Dependency Injection In AngularJS

Dependency Injection In AngularJS

Dependency Injection is a software design pattern in which components depended on other component.In angularJs the component are depended on other components. In angularJs controller are depended on service and the service are depended on factory service. This relieves a component from locating the dependency and makes dependencies configurable. This helps essy to use components reusable, maintainable and testable. AngularJS provides a supreme Dependency Injection mechanism. It provides core components which can be injected into each other as dependencies.

  • value
  • factory
  • service
  • provider
  • constant

value injection in AnglarJS

The value is javascript object with are used for passing value for controller.

    //define a module
    var mainApp = angular.module("mainApp", []);
    //create a value object as "first","last" and pass it a data.
        mainApp.value("first", 'Pramod');///define constant first
        mainApp.value("last", 'kumawat');///define constant last
    ...
    //inject the value in the controller using its name "first" and last
     mainApp.controller('ConciteController', function($scope, CalService,first,last) {
      
            $scope.first = first;
            $scope.last = last;
            $scope.result = CalService.square($scope.first,$scope.last);
            $scope.square = function() {
            $scope.result = CalService.square($scope.first,$scope.last);
         }
      });

factory Injection in AngularJs

factory is a function which is used to return value. It creates value on demand whenever a service or controller use. It normally uses a factory function to perform and return the value

        /define a module
        var mainApp = angular.module("mainApp", []);
        //create a factory "ConciteService" which provides a method add to return addation of two string
        mainApp.factory('ConciteService', function() {     
         var factory = {};  
         factory.addstring = function(a, b) {
            return a +' '+ b ;
         }
         return factory;
      }); 
        
        //inject the factory "ConciteService" in a service to utilize the addstring method of factory.
        mainApp.service('CalService', function(ConciteService){
            this.square = function(a,b) { 
            return ConciteService.addstring(a,b); 
         }
      });

service injection in AngularJS

service is a single javascript object containing a set of functions to perform certain tasks. Services are defined using service() functions and then injected into controllers.The services are use passing data from controller and perform specfic operation in AnjularJS.

     /define a module
        var mainApp = angular.module("mainApp", []);
        //create a factory "ConciteService" which provides a method add to return addation of two string
        mainApp.factory('ConciteService', function() {     
         var factory = {};  
         factory.addstring = function(a, b) {
            return a +' '+ b ;
         }
         return factory;
      }); 
        
        //inject the factory "ConciteService" in a service to utilize the addstring method of factory.
        mainApp.service('CalService', function(ConciteService){
            this.square = function(a,b) { 
            return ConciteService.addstring(a,b); 
         }
      });

constant injection in AngularJS

The value of contants are fixed during the exection. constants are used to pass values at config phase considering the fact that value can not be used to be passed during config phase.

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

Output

angularjsinjectionexample

angularjsinjectionexample

Share Button

About admin

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Author: pramod kumar kumawat Mob: 9269727062
Free WordPress Themes - Download High-quality Templates