Post
Ask Question

Start With AngularJS: Part Ten

Thank you for reading my previous articles on AngularJS. If you have not read them, then study from the following links. After reading them it will be easier to understand today’s topic.

Injector

Gets the injector for the current element or its parent. This allows you to ask for dependencies defined for the modules in these elements.

Example:

  1. app.controller("MyCtrl", function ($scope, $injector) {  
  2.    $scope.doSomething = function () {  
  3.       var s1 = $injector.get('s1')  
Inject

Resolves dependencies and injects them into a function.

Example:
  1. fnctrl3["$inject"] = ["$scope", "$rootScope"];  
  2. app.controller("ctrl3", fnctrl3);  
Dependency Injection

Dependency Injection (DI) is a design pattern where dependencies are defined in an application as part of the configuration. AngularJS uses dependency injection to load module dependencies when an application first starts. Dependency injection also helps to make an application more testable. That is one of the main advantages of using AngularJS to build JavaScript applications. AngularJS applications are much easier to test than applications written with most JavaScript frameworks.

To facilitate this configuration, AngularJS provides three ways to declare dependencies.

Directly using the parameters of a function, as we can see in the following example:

 

 

  1. function User Controller($scope, $http, $resource, $ownservice)  
  2. {  
  3.     Var user;  
  4.     $scope.User = {  
  5.         name: "Shiva",  
  6.         age: "27"  
  7.     }  
  8. }  

 

  • Using an array, as shown here:
    1. User. Controller ('User Controller', ['$scope','$http' function ($scope, $http)   
    2. {...}]);  
  • Using the $inject property, as follows:
    1. User Controller var = function ($scope, $http)  
    2. {...};   
    3. User Controller $ inject = ['$scope','$http'];   
    4. user.Module.controller ('User Controller' User Controller);  

AngularJS use dependency with several types:

  • Value
  • Factory
  • Service
  • Provider
  • Constant

This all you learn in my previous video part six,

  1. Now create a demo project.
  2. Open Visual Studio.
  3. Create new folder on desktop.
  4. Open that folder on Visual Studio & add html file name with Dependency.

    program
    1. <!DOCTYPEhtml>  
    2. <html xmlns="http://www.w3.org/1999/xhtml">  
    3.   
    4.     <head>  
    5.         <title>AngularJS Dependency Injection</title>  
    6.         <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">  
    7.             </script>  
    8.             <script>  
    9.             var app = angular.module("app", []);  
    10.             app.controller("ctrl1", function ($scope, $rootScope)  
    11.             {  
    12.                 $scope.Name = "Shiva";  
    13.             });  
    14.             app.controller("ctrl2", ["$scope", "$rootScope", function (s, r)  
    15.             {  
    16.                 s.Name = "Kshma";  
    17.             }]);  
    18.             var fnctrl3 = function (scope, rootscope)  
    19.             {  
    20.                 scope.Name = "Ashita";  
    21.             };  
    22.             fnctrl3["$inject"] = ["$scope", "$rootScope"];  
    23.             app.controller("ctrl3", fnctrl3);  
    24.             </script>  
    25.     </head>  
    26.     <body ng-app="app">  
    27.     <div ng-controller="ctrl1"> {{Name}}   
    28.     </div>  
    29.     <div ng-controller="ctrl2"> {{Name}}   
    30.     </div>  
    31.     <div ng-controller="ctrl3"> {{Name}}   
    32.     </div>  
    33. </body>#ff0000</html>  

Output:

Output

Hope you all understood about inject, injector, and dependency injection.

Read more articles on AngularJS:


Similar Articles