AngularJS
Iniezione di dipendenza

Sintassi

• myApp.controller ('MyController', function ($ scope) {...}); // codice non minificato

• myApp.controller ('MyController', ['$ scope', function ($ scope) {...}]); // supporto minification

• function MyController () {}

  MyController. $ Inject = ['$ scope'];

  myApp.controller ('MyController', MyController); // $ inserisce l'annotazione

• $ Injector.get ( 'iniettabile'); // Iniezione dinamica / runtime

Osservazioni

iniezioni

L'esempio più semplice di un'iniezione in un'app Angular: l'iniezione di $scope a un Controller angolare:

angular.module('myModule', [])
.controller('myController', ['$scope', function($scope) {
    $scope.members = ['Alice', 'Bob'];
    ...
}])

Quanto sopra illustra un'iniezione di $scope in un controller , ma è lo stesso se si inserisce un modulo in un altro. Il processo è lo stesso.

Il sistema di Angular è incaricato di risolvere le dipendenze per te. Se crei un servizio, ad esempio, puoi elencarlo come nell'esempio sopra e sarà disponibile per te.

È possibile utilizzare DI - Dipendenza iniezione - ovunque si stia definendo un componente.

Si noti che nell'esempio precedente viene utilizzata la cosiddetta "Annotazione di array in linea". Significa, scriviamo esplicitamente come stringhe i nomi delle nostre dipendenze. Lo facciamo per prevenire l'interruzione dell'applicazione quando il codice viene ridotto per la produzione. La minificazione del codice cambia i nomi delle variabili (ma non le stringhe), che interrompe l'iniezione. Usando le stringhe, Angular sa quali dipendenze vogliamo.

Molto importante: l'ordine dei nomi delle stringhe deve essere uguale ai parametri nella funzione.

Esistono strumenti che automatizzano questo processo e si prendono cura di questo per te.

Iniezioni dinamiche

C'è anche un'opzione per richiedere dinamicamente i componenti. Puoi farlo usando il servizio $injector :

myModule.controller('myController', ['$injector', function($injector) {
    var myService = $injector.get('myService');
}]);

Nota: mentre questo metodo potrebbe essere usato per prevenire il problema della dipendenza circolare che potrebbe interrompere la tua app, non è considerata una buona pratica aggirare il problema usandolo. La dipendenza circolare di solito indica che c'è un'anomalia nell'architettura della tua applicazione, e dovresti invece indirizzarla.

$ inietta annotazione di proprietà

Equivalentemente, possiamo usare l'annotazione di proprietà $inject per ottenere lo stesso risultato sopra:

var MyController = function($scope) {
  // ...
}
MyController.$inject = ['$scope'];
myModule.controller('MyController', MyController);

Carica dinamicamente il servizio AngularJS in JavaScript vaniglia

È possibile caricare i servizi AngularJS in JavaScript vanilla utilizzando il metodo injector() AngularJS. Ogni elemento jqLite richiamato chiamando angular.element() ha un metodo injector() che può essere utilizzato per recuperare l'iniettore.

var service;
var serviceName = 'myService';

var ngAppElement = angular.element(document.querySelector('[ng-app],[data-ng-app]') || document);
var injector = ngAppElement.injector();

if(injector && injector.has(serviceNameToInject)) {
    service = injector.get(serviceNameToInject);
}

Nell'esempio precedente proviamo a recuperare l'elemento jqLite che contiene la radice dell'applicazione AngularJS ( ngAppElement ). Per fare ciò, usiamo il metodo angular.element() , cercando un elemento DOM contenente l'attributo ng-app o data-ng-app o, se non esiste, torniamo all'elemento document . Usiamo ngAppElement per recuperare l'istanza di injector (con ngAppElement.injector() ). L'istanza di injector viene utilizzata per verificare se il servizio da iniettare esiste (con injector.has() ) e quindi per caricare il servizio (con injector.get() ) all'interno della variabile di service .