AngularJS | Ways to implement Dependency Injection

There are 5 ways to implement Dependency Injection in AngularJS:

· Value

· Constant

· Factory

· Providers

· Services

We are going to look into each one by one:

Value: Value function is used to initialize any variable such as number, string or object. It is required to pass values to the controller during config or run phase (config or run phase is when AngularJS bootstraps itself) which is then injected into factories, services or controllers.

Example:

//define a module

var testApp = angular.module([]);

//create a value object and pass it a data 

testApp.value("numberValue", 1100); 

Injecting a value

testApp.controller("testCtrl", function ($scope, numberValue) {

    console.log("numberValue",numberValue);

}

Constant:

Unfortunately we cannot inject values into the module.config() function. But we can inject constants. Constant value is used when we want to do any configuration such as in any routing program.

Example:

Injecting a constant

var testApp = angular.module([]);

testApp.constant("configParam", "constant value");   

testApp.config(function (serviceProvider, configParam) {

    serviceProvider.doConfig(configParam)

}

Factory:

A factory is a simple function which allows us to add some logic before creating the object. It returns the created object. It injects the values whenever service or controller needs a value. It returns the value on demand and uses “factory” function to process and return the value.

Example:

var testApp = angular.module([]);

testApp.value("numberValue", 1100); 

testApp.factory("addNum", function (numberValue) {

return "numberValue is "+numberValue;

});

testApp.controller("testCtrl", function ($scope, addNum) {

    console.log("addNum ", addNum);

}

Service:

It is a singleton object and contains set of functions to perform certain tasks. Services are created by using service() function on a module and then injected into controllers. It is injected into controllers.

For example, the "$http" is a service in Angular.JS which when injected in your controllers provides the necessary functions of ( get() , query() , save() , remove(), delete() ).

Example:

var testApp = angular.module([]);

testApp.service('addService', function(){

    this.add = function(a,b) {

        return a+b;

    }

});

testApp.controller("testCtrl", function ($scope, addService) {

    console.log(addService.add(1,6));

}

It is used when we need to share a single object across the application such as, authenticated user details.

Provider:

Provider is itself is a factory. It allows us to create services, factory etc during config phase that is on runtime. It uses get() function to return the value or service or factory.

Example:

var testApp = angular.module([]);

testApp.config(function($provide) {

    $provide.provider('MathService', function() {

       this.$get = function() {

          var factory = {};

         

          factory.multiply = function(a, b) {

             return a * b;

          }

          return factory;

       };

    });

 });

testApp.service('CalService', function(MathService){ 

    this.square = function(a) { 

       return MathService.multiply(a,a); 

    } 

 });

testApp.controller("testCtrl", function ($scope, $state, CalService) {

    $scope.result = CalcService.square(5); 

    console.log("aaa ", $scope.result)

});

It is used when we need to provide module-wise configuration for service object before making it available.