AngularJS $injector 依赖注入详解

Iniezione inferita

Questo metodo di iniezione deve garantire che i nomi dei parametri siano gli stessi dei nomi dei servizi. Se il codice deve essere compresso o altre operazioni, potrebbe causare il fallimento dell'iniezione.

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

Iniezione con etichetta

Questo metodo di iniezione richiede di impostare un array di dipendenze, all'interno del quale ci sono i nomi dei servizi. Nei parametri della funzione, è possibile impostare nomi di parametri a piacere, ma deve garantire l'uniformità dell'ordine.

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

Iniezione inline

Questo metodo di iniezione passinga due parametri, uno è il nome, l'altro è un array. L'ultimo parametro dell'array è il corpo del metodo vero e proprio, gli altri sono gli obiettivi delle dipendenze, ma deve garantire l'ordine dei parametri (come l'iniezione con etichetta).

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

Metodi comuni di $injector

In angular, è possibile ottenere l'iniettore tramite angular.injector()

var $injector = angular.injector();

Ottieni il nome del servizio dipendente tramite $injector.get('serviceName')

$injector.get('$scope')

Ottieni tutte le dipendenze di xxx tramite $injector.annotate('xxx')

$injector.annotate(xxx)

Esempio di codice

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

Ecco la raccolta delle informazioni sull'iniettore AngularJS, continueremo a integrare le informazioni pertinenti, grazie per il supporto di tutti a questo sito!

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il copyright è dell'autore originale, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non possiede il diritto di proprietà, non è stato elaborato manualmente e non assume alcuna responsabilità legale correlata. Se trovi contenuti sospetti di copyright, ti preghiamo di inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare, fornendo prove pertinenti. Una volta verificata, questo sito cancellerà immediatamente il contenuto sospetto di copyright.

教程基础