A brief discussion of the $injector object in Angular-JS Tutorial-php.cn

A brief discussion of the $injector object in Angular

青灯夜游

Release： 2021-05-20 09:52:05

forward

2470 people have browsed it

In this article, let’s learn about Angular Dependency injection object $injector. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

A brief discussion of the $injector object in Angular

$injector is actually an IOC container that contains many modules and services we create through .module() and $provide. The $injector service provides access to the dependency injector object. Of course, we can also call angular.injector() to obtain the injector. [Related recommendation: "angular tutorial"]

var injector1 = angular.injector(["myModule","herModule"]); //获得myModule和herModule模块下的注入器实例

Copy after login

angular.injector() can be called multiple times, and each time it returns a newly created injector object, so the myInjector and angular we created automatically The $injector created is not the same object.

    var injector1 = angular.injector(["myModule","herModule"]);  
    var injector2 = angular.injector(["myModule","herModule"]);  
      
    alert(injector1 == injector2);//false

Copy after login

Commonly used methods of $injector

Get the instance of the service based on the name through $injector.get('serviceName'), and through $injector.annotate('xxx' ) to get all dependencies of xxx.

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([&#39;myApp&#39;]);
  console.log(angular.equals($injector.get(&#39;$injector&#39;),$injector));//true
  var myCtrl2 = function($scope,hello1,hello2){
    $scope.hello = function(){
      hello1.hello();
      hello2.hello();
    }
  }
  myCtrl2.$injector = [&#39;hello1&#39;,&#39;hello2&#39;];
  app.controller("myCtrl2", myCtrl2);
  console.log($injector.annotate(myCtrl2));//["$scope","hello1","hello2"]

Copy after login

Three ways to declare dependencies in angular

When we use the .controller() function, the $controller service will be called, and at the bottom , the controller will be created using the invoke() function of the $injector service. The function invoke() will be responsible for analyzing what parameters need to be passed into the controller and executing the function, so the bottom layer is actually declared in the following three ways. rely.

    // 创建myModule模块、注册服务  
    var myModule = angular.module(&#39;myModule&#39;, []);  
    myModule.service(&#39;myService&#39;, function() {  
                this.my = 0;  
    });  
      
    // 获取injector  
    var injector = angular.injector(["myModule"]);  
      
    // 第一种inference（推断）
    injector.invoke(function(myService){alert(myService.my);});  
      
    // 第二种annotation （注入）
    function explicit(serviceA) {alert(serviceA.my);};  
    explicit.$inject = [&#39;myService&#39;];  
    injector.invoke(explicit);  
      
    // 第三种inline  （内联）
    injector.invoke([&#39;myService&#39;, function(serviceA){alert(serviceA.my);}]);

Copy after login

$scope object

Because $scope is local and not a service, the way Angular uses it is different from the way the service uses it. In order to inject $scope correctly Variables, the following is a theoretical practice:

 $injector.invoke(function ($scope, $http) {
  	//在这里使用$scope,$http
  },
  null,
  {$scope: {}});

Copy after login

$rootScope object

$rootScope is automatically created when angularJS loads a module. Each module will only have 1 rootScope. Once rootScope is created, it will be added to $injector in the form of a service. That is to say, the root scope of a module can be obtained through $injector.get("$ rootScope ").

// 新建一个模块
var module = angular.module("app",[]);
 
// true说明$rootScope确实以服务的形式包含在模块的injector中
var hasNgInjector = angular.injector([&#39;app&#39;,&#39;ng&#39;]);  
console.log("has $rootScope=" + hasNgInjector.has("$rootScope"));//true
 
// 获取模块相应的injector对象,不获取ng模块中的服务
// 不依赖于ng模块,无法获取$rootScope服务
var noNgInjector = angular.injector([&#39;app&#39;]);
console.log("no $rootScope=" + noNgInjector.has("$rootScope"));//false
 
// 获取angular核心的ng模块
var ngInjector = angular.injector([&#39;ng&#39;]);  
console.log("ng $rootScope=" + ngInjector.has("$rootScope"));//true

Copy after login

For more programming-related knowledge, please visit: Programming Video! !

The above is the detailed content of A brief discussion of the $injector object in Angular. For more information, please follow other related articles on the PHP Chinese website!