Dependency Injection In AngularJS

Introduction

Dependency Injection is one of the best features of AngularJS. It is a software design pattern in which objects are passed as dependencies. It helps us to remove hard coded dependencies and makes dependencies configurable. Using Dependency Injection, we can make components maintainable, reusable and testable.

Dependency Injection is required for the following:

• Separating the process of creation and consumption of dependencies.
• It allow us to create independent development of the dependencies.
• We can change the dependencies when required.
• It allows injecting mock object as dependencies for testing.

AngularJS provides the following components which can be injected into each other as dependencies.

Service

Service in AngularJS is a function or an object that can be used to share data and the behavior across the application (controller, directives, filters, other services etc.) or we can say services in AngularJS are objects that are wired together using DI (dependency injection) and it can be used to share and organize code across the application. Services are defined using service() functions and it can be injected into other Angular object like controller, directives, filters, other services, etc.

//Create AngularJS application
var app = angular.module("myapp", []);

//Create service that contains method which add two inputs
app.service('appService', function () {
    this.add = function (a1, a2) {
        return parseInt(a1) + parseInt(a2);
    }
})

//Inject appservice into the controller
app.controller("appController", function ($scope, appService) {
    $scope.Add = function () {
        $scope.total = appService.add($scope.digit1, $scope.digit2);
    }
});

Factory

Factory is an Angular function which is used to return value. It creates the value on demand and holds that value.

//Create AngularJS application
var app = angular.module("myapp", []);

//Create factory that contains method which add two inputs
app.factory('appService', function () {
    var factory = {};

    factory.add = function (a1, a2) {
        return parseInt(a1) + parseInt(a2);
    }
    return factory;
})

//Inject appservice into the controller
app.controller("appController", function ($scope, appService) {
    $scope.Add = function () {
        $scope.total = appService.add($scope.digit1, $scope.digit2);
    }
});

Provider

AngularJS internally use provider to create services, factory, etc. during bootstrapping. Using "config" and "run" method of AngularJS, we can specify functions that run at configuration and run time for a module. Both the functions are injectable with dependencies like factory.

var app = angular.module('myapp', []);

app.config(['provider', function (provider) {
    //ToDo.
}])
app.run(['service', function (service) {
    //ToDo.
}]);

Constant

Constant in AngularJS is used to pass value at the config phase. Constant values are also available at runtime. We can also use it at controller and template.

var app = angular.module("myapp", []);

//Define Contant
app.constant('clientId', '123456');

//Use constant in provider
app.config(['testProvider', 'clientId', function (testProvider, clientId) {

}]);

//Use constant at Controller
app.controller('TestController', ['$scope', "clientId", function DemoController($scope, clientId) {
    $scope.clientId = clientId;
}]);

Value

Value is JavaScript object  that can be injected to the controller during config phase.

//Define Value
app.value('clientId', '123456');


//Use value at Controller
app.controller('TestController', ['$scope', "clientId", function DemoController($scope, clientId) {
    $scope.clientId = clientId;
}]);

Summary

AngularJS provides an advanced Dependency Injection mechanism. Their are basically five types of recipe (Value, Factory, Service, Provider and Constant) which are described in the preceding section and they can be injected into each other as dependencies.

Hope this will help you.