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.

  1. //Create AngularJS application  
  2. var app = angular.module("myapp", []);  
  3.   
  4. //Create service that contains method which add two inputs  
  5. app.service('appService'function () {  
  6.     this.add = function (a1, a2) {  
  7.         return parseInt(a1) + parseInt(a2);  
  8.     }  
  9. })  
  10.   
  11. //Inject appservice into the controller  
  12. app.controller("appController"function ($scope, appService) {  
  13.     $scope.Add = function () {  
  14.         $scope.total = appService.add($scope.digit1, $scope.digit2);  
  15.     }  
  16. });  
Factory

Factory is an Angular function which is used to return value. It creates the value on demand and holds that value.
  1. //Create AngularJS application  
  2. var app = angular.module("myapp", []);  
  3.   
  4. //Create factory that contains method which add two inputs  
  5. app.factory('appService'function () {  
  6.     var factory = {};  
  7.   
  8.     factory.add = function (a1, a2) {  
  9.         return parseInt(a1) + parseInt(a2);  
  10.     }  
  11.     return factory;  
  12. })  
  13.   
  14. //Inject appservice into the controller  
  15. app.controller("appController"function ($scope, appService) {  
  16.     $scope.Add = function () {  
  17.         $scope.total = appService.add($scope.digit1, $scope.digit2);  
  18.     }  
  19. });  
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.
  1. var app = angular.module('myapp', []);  
  2.   
  3. app.config(['provider'function (provider) {  
  4.     //ToDo.  
  5. }])  
  6. app.run(['service'function (service) {  
  7.     //ToDo.  
  8. }]);  
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.
  1. var app = angular.module("myapp", []);  
  2.   
  3. //Define Contant  
  4. app.constant('clientId''123456');  
  5.   
  6. //Use constant in provider  
  7. app.config(['testProvider''clientId'function (testProvider, clientId) {  
  8.       
  9. }]);  
  10.   
  11. //Use constant at Controller   
  12. app.controller('TestController', ['$scope'"clientId"function DemoController($scope, clientId) {  
  13.     $scope.clientId = clientId;  
  14. }]);  
Value

Value is JavaScript object  that can be injected to the controller during config phase.
  1. //Define Value  
  2. app.value('clientId''123456');  
  3.   
  4.   
  5. //Use value at Controller   
  6. app.controller('TestController', ['$scope'"clientId"function DemoController($scope, clientId) {  
  7.     $scope.clientId = clientId;  
  8. }]);  
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.

 

Up Next
    Ebook Download
    View all
    Learn
    View all