AngularJS Dependency Injection

What is Dependency Injection

The explanation on Wikipedia is: Dependency Injection (DI) is a software design pattern in which one or more dependencies (or services) are injected into a separate object (or client), becoming part of the client's state.

This pattern separates the creation of the client's dependencies from its own behavior, making the program design loosely coupled and adhering to the Dependency Inversion and Single Responsibility principles. In contrast to the Service Locator pattern, it allows the client to understand how the system finds dependencies.

In simple terms - don't come to me unless you need something, I'll come to you when I need something.

AngularJS provides a good dependency injection mechanism. The following five core components are used for dependency injection:

• value
• factory
• service
• provider
• constant

Value

Value is a simple JavaScript object used to pass values to controllers (during the configuration phase):

// Define a module
var mainApp = angular.module("mainApp", []);

// Create a value object "defaultInput" and pass data
mainApp.value("defaultInput", 5);
...

// Inject "defaultInput" into the controller
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
   $scope.number = defaultInput;
   $scope.result = CalcService.square($scope.number);

   $scope.square = function() {
      $scope.result = CalcService.square($scope.number);
   }
});

Factory

A factory is a function that returns a value. It is created when needed by services and controllers.

Typically, we use the factory function to calculate or return a value.

// Define a module
var mainApp = angular.module("mainApp", []);

// Create a factory "MathService" for multiplying two numbers
mainApp.factory('MathService', function() {
   var factory = {};

   factory.multiply = function(a, b) {
      return a * b
   }
   return factory;
}); 

// Inject the factory "MathService" into the service
mainApp.service('CalcService', function(MathService){
   this.square = function(a) {
      return MathService.multiply(a,a);
   }
});
...

Provider

In AngularJS, a provider is used to create a service, factory, etc. (during the configuration phase).

The provider offers a factory method get(), which is used to return the value/service/factory.

// Define a module
var mainApp = angular.module("mainApp", []);
...

// Use provider to create a service that defines a method for multiplying two numbers
mainApp.config(function($provide) {
   $provide.provider('MathService', function() {
      this.$get = function() {
         var factory = {};  

         factory.multiply = function(a, b) {
            return a * b; 
         }
         return factory;
      };
   });
});

Constant

A constant is used to pass values during the configuration phase. Note that this constant is not available during the configuration phase.

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

Example

The following example demonstrates the above dependency injection mechanisms.

AngularJS Example - Factory

var mainApp = angular.module("mainApp", []);
mainApp.value("defaultInput", 5);

mainApp.factory('MathService', function() {
    var factory = {};

    factory.multiply = function(a, b) {
        return a * b;
    }
    return factory;
});

mainApp.service('CalcService', function(MathService){
    this.square = function(a) {
        return MathService.multiply(a,a);
    }
});

mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
    $scope.number = defaultInput;
    $scope.result = CalcService.square($scope.number);

    $scope.square = function() {
        $scope.result = CalcService.square($scope.number);
    }
});

AngularJS Example - Provider

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

mainApp.config(function($provide) {
    $provide.provider('MathService', function() {
        this.$get = function() {
            var factory = {};

            factory.multiply = function(a, b) {
                return a * b;
            }
            return factory;
        };
    });
});

mainApp.value("defaultInput", 5);

mainApp.service('CalcService', function(MathService){
    this.square = function(a) {
        return MathService.multiply(a,a);
    }
});

mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
    $scope.number = defaultInput;
    $scope.result = CalcService.square($scope.number);

    $scope.square = function() {
        $scope.result = CalcService.square($scope.number);
    }
});