Detailed explanation of AngularJS $injector dependency injection

Inference-based injection

This injection method requires ensuring that the parameter name is the same as the service name. If the code needs to be compressed or other operations, it will lead to injection failure.

 app.controller("myCtrl1", function($scope,hello1,hello2){
    $scope.hello = function(){
      hello1.hello();
      hello2.hello();
    }
  });

Annotation-based injection

This injection method requires setting a dependency array, which contains the names of the dependent services. In the function parameters, you can set parameter names freely, but you must ensure the consistency of the order.

var myCtrl2 = function($scope,hello1,hello2){
    $scope.hello = function(){
      hello1.hello();
      hello2.hello();
    }
  }
  myCtrl2.$injector = ['hello1','hello2'];
  app.controller("myCtrl2", myCtrl2);

Inline injection

This injection method directly passes in two parameters, one is the name, and the other is an array. The last parameter of this array is the actual method body, and the others are the target dependencies. However, it must ensure that the order of the parameters matches the method body (like annotation injection).

app.controller("myCtrl3",['$scope','hello1','hello2','function($scope,hello1,hello2){
    $scope.hello = function(){
      hello1.hello();
      hello2.hello();
    }
  });

Common methods of $injector

In angular, you can obtain the injector through angular.injector()

var $injector = angular.injector();

Obtain the name of the service through $injector.get('serviceName')

$injector.get('$scope')

Obtain all dependencies of xxx through $injector.annotate('xxx')

$injector.annotate(xxx)

Sample Code

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /">
  <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body ng-app="myApp">
  <div ng-controller="myCtrl1">
    <input type="button" ng-click="hello()" value="ctrl1></input>
  </div>
  <div ng-controller="myCtrl2">
    <input type="button" ng-click="hello()" value="ctrl2></input>
  </div>
  <div ng-controller="myCtrl3">
    <input type="button" ng-click="hello()" value="ctrl3></input>
  </div>
  <script type="text/javascript">
  var app = angular.module("myApp",[]);
  app.factory("hello1",function(){
    return {
      hello:function(){
        console.log("hello1 service);
      }
    }
  });
  app.factory("hello2",function(){
    return {
      hello:function(){
        console.log("hello2 service);
      }
    }
  });
  var $injector = angular.injector();
  console.log(angular.equals($injector.get('$injector'),$injector));//true
  console.log(angular.equals($injector.invoke(function($injector) {return $injector;}),$injector));//true
  //inferred
  // $injector.invoke(function(serviceA){});
  app.controller("myCtrl1", function($scope,hello1,hello2){
    $scope.hello = function(){
      hello1.hello();
      hello2.hello();
    }
  });
  //annotated
  // function explicit(serviceA) {};
  // explicit.$inject = ['serviceA'];
  // $injector.invoke(explicit);
  var myCtrl2 = function($scope,hello1,hello2){
    $scope.hello = function(){
      hello1.hello();
      hello2.hello();
    }
  }
  myCtrl2.$injector = ['hello1','hello2'];
  app.controller("myCtrl2", myCtrl2);
  //inline
  app.controller("myCtrl3",['$scope','hello1','hello2','function($scope,hello1,hello2){
  // app.controller("myCtrl3",['$scope','hello1','hello2',function(a,b,c){
    // a.hello = function(){
    // b.hello();
    // c.hello();
    // }
    $scope.hello = function(){
      hello1.hello();
      hello2.hello();
    }
  });
  console.log($injector.annotate(myCtrl2));//["$scope","hello1","hello2"]
  </script>
</body>
</html>

This is the summary of the AngularJS injector. We will continue to supplement relevant information, thank you all for your support to this site!

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to notice#w3Please send an email to codebox.com (replace # with @ when sending an email) to report violations, and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.

Basic Tutorial