Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • AngularJS Dependency Injection in detail

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.03k
    Comment on it

    Dependency Injection allows the removal of hard-coded dependencies and makes it possible to change them. It helps in making components testable,reusable and maintainable.
    We are provided with in built dependency injection mechanism by AngularJs. We can easily divide our application into multiple types of components and then use AngularJs to inject them into one another.
    Some well known services that can be injected in a controller are:-
    1.$http
    2.$resource
    3.$document
    4.$window
    5.$timeout
    6.$scope
    7.$filter
    AngularJS injects all parameters whenever a controller is instantiated. Simple way to inject is -

    mainApp.controller( exampleController", function( $scope, $http, $timeout, $state, $rootScope ) {
    
    
    })


      There are some components provided by AngularJs. These are :-
    1.Value
    2.Provider
    3.Factory
    4.Constant
    5.Service
    Value- It stores a single value and is the simplest Angularjs service to create and use. For example-

    var myapp = angular.module(myApp, []);
    
    myApp.value("Value", 9); // add value to angularjs module
    
    //Injecting this value
    myApp.controller(EgCtrl, function($scope, Value) {
    
        console.log(Value);
    
    });


    Provider -Provider is a special factory method with a method get() which is used to return the value/service/factory.Providers can be configured during the module configuration phase. The constructor function is instantiated before the $get method is called. For example:-

    myapp.provider('Circle', function () {  // Create a service that calculates area of a circle
       return {
       $get: function (pi) {
       return {
       area: function(r){
       return pi * r * r;
         }
    
       }
      }
     }
    });
    myapp.controller("mycontroller", function ($scope, Circle) { // Injecting into the controller
    })

    Factory -In a Factory you create an object, add properties and methods to it, then return that same object. When you pass this service into your controller, those properties on the object will now be available in that controller through your factory.

    myapp.factory('Circle', function(pi) { // Creates a factory called circle that calculates area of a circle
    
    var myfactory = {};
    myfactory.Area = function (r) {
    return pi * r * r;
    }
    return myfactory;
    });
    myapp.controller("mycontroller", function ($scope, Circle) { //Injecting this factory into the controller
    })


    Constant - Value of a constant is never changed(it remains constant). It can be injected everywhere. For example:
     

    myapp.constant("pi", 3.14); // declaring a constant pi with its value 3.14
    

    Now anywhere pi is used, its value will be taken as 3.14.
    Service - service receives a javascript constructor function as argument. It creates a service by invoking a constructor with the new operator. We can inject other services also in it. -
     

    myapp.service('Circle', function(pi) {// creating a service called Circle
    this.Area = function (r) {
    return pi * r * r;
    }
    });
    myapp.controller("mycontroller", function ($scope, Circle) { // Injecting the service in the controller
    })

     

    Note:-This is not the complete code as per logic. This is only to provide a basic example of its usage.

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: