Une brève discussion de l'objet $injector dans Angular-js tutoriel-php.cn

Une brève discussion de l'objet $injector dans Angular

青灯夜游

Libérer： 2021-05-20 09:52:05

avant

2423 Les gens l'ont consulté

Dans cet article, découvrons AngularObjet d'injection de dépendances $injector. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Une brève discussion de l'objet $injector dans Angular

$injector est en fait un conteneur IOC qui contient de nombreux modules et services que nous créons via .module() et $provide. Le service $injector permet d'accéder à l'objet injecteur de dépendances. Bien entendu, nous pouvons également appeler angulaire.injector() pour obtenir l'injecteur. [Recommandations associées : "tutoriel angulaire"]

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

Copier après la connexion

angular.injector() peut être appelé plusieurs fois, et à chaque fois, il renvoie un objet injecteur nouvellement créé, donc myInjector et angulaire nous créé automatiquement Le $injecteur créé n'est pas le même objet.

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

Copier après la connexion

Méthodes couramment utilisées de $injector

Obtenir l'instance du service en fonction du nom via $injector.get('serviceName') et via $injector .annotate('xxx' ) pour obtenir toutes les dépendances de 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"]

Copier après la connexion

Trois façons de déclarer des dépendances en angulaire

Lorsque nous utilisons la fonction .controller(), le service $controller sera appelé, et au bottom , le contrôleur sera créé à l'aide de la fonction Ensure() du service $injector. La fonction Invoquer() sera chargée d'analyser les paramètres qui doivent être transmis au contrôleur et d'exécuter la fonction, de sorte que la couche inférieure soit réellement déclarée. des trois manières suivantes.

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

Copier après la connexion

Objet $scope

Parce que $scope est local et non un service, la façon dont Angular l'utilise est différente de la façon dont les services l'utilisent pour l'injecter. $scope correctement Variables, ce qui suit est une pratique théorique :

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

Copier après la connexion

Objet $rootScope

$rootScope est automatiquement créé lorsque angulaireJS charge un module. Chaque module n'aura qu'un seul module. 1 racineScope. Une fois rootScope créé, il sera ajouté à $injector sous la forme d'un service. C'est-à-dire que la portée racine d'un module peut être obtenue via $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

Copier après la connexion

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!