Eine kurze Diskussion des $injector-Objekts in Angular-js-Tutorial-php.cn

Eine kurze Diskussion des $injector-Objekts in Angular

青灯夜游

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

nach vorne

2473 Leute haben es durchsucht

In diesem Artikel lernen wir etwas über Angulardas Abhängigkeitsinjektionsobjekt $injector. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Eine kurze Diskussion des $injector-Objekts in Angular

$injector ist eigentlich ein IOC-Container, der viele Module und Dienste enthält, die wir über .module() und $provide erstellen. Der $injector-Dienst bietet Zugriff auf das Abhängigkeitsinjektorobjekt. Natürlich können wir auch angle.injector() aufrufen, um den Injektor zu erhalten. [Verwandte Empfehlung: „Angular Tutorial“]

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

Nach dem Login kopieren

angular.injector() kann mehrmals aufgerufen werden und gibt jedes Mal ein neu erstelltes Injektorobjekt zurück, sodass der von uns selbst erstellte myInjector und der von Angular automatisch erstellte $injector dies nicht tun das gleiche Objekt.

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

Nach dem Login kopieren

Häufig verwendete Methoden von $injector

Rufen Sie die Instanz des Dienstes basierend auf dem Namen über $injector.get('serviceName') ab und rufen Sie alle Abhängigkeiten von xxx über $injector.annotate('xxx' ab) ).

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"]

Nach dem Login kopieren

Drei Möglichkeiten, Abhängigkeiten in Angular zu deklarieren

Wenn wir die Funktion .controller() verwenden, wird der Dienst $controller aufgerufen, und unten wird die Funktion invoke() des Dienstes $injector aufgerufen Die zum Erstellen des Controllers verwendete Funktion invoke() ist dafür verantwortlich, zu analysieren, welche Parameter an den Controller übergeben werden müssen, und die Funktion auszuführen, sodass die unterste Ebene tatsächlich die folgenden drei Möglichkeiten zum Deklarieren von Abhängigkeiten verwendet.

    // 创建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);}]);

Nach dem Login kopieren

$scope-Objekt

Da $scope lokal und kein Dienst ist, unterscheidet sich die Art und Weise, wie Angular es verwendet, von der Art und Weise, wie der Dienst es verwendet. Um die $scope-Variable korrekt einzufügen, finden Sie hier eine theoretische Übung :

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

Nach dem Login kopieren

$rootScope-Objekt

$rootScope wird automatisch erstellt, wenn AngularJS ein Modul lädt. Jedes Modul hat nur 1 RootScope. Sobald rootScope erstellt wurde, wird es in Form eines Dienstes zu $injector hinzugefügt. Das heißt, der Root-Bereich eines Moduls kann über $injector.get("$rootScope") abgerufen werden.

// 新建一个模块
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

Nach dem Login kopieren

Weitere Programmierkenntnisse finden Sie unter: Programmiervideo! !

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion des $injector-Objekts in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!