AngularJS
Afhankelijkheid injectie

Syntaxis

• myApp.controller ('MyController', functie ($ scope) {...}); // niet-geminimaliseerde code

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

• functie MyController () {}

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

  myApp.controller ('MyController', MyController); // $ injecteer annotatie

• $ Injector.get ( 'injecteerbare'); // dynamische / runtime-injectie

Opmerkingen

injecties

Het eenvoudigste voorbeeld van een injectie in een Angular-app - $scope injecteren naar een Angular Controller :

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

Het bovenstaande illustreert een injectie van een $scope in een controller , maar het is hetzelfde of u een module in een andere injecteert. Het proces is hetzelfde.

Het systeem van Angular is verantwoordelijk voor het oplossen van afhankelijkheden voor u. Als u bijvoorbeeld een service maakt, kunt u deze weergeven zoals in het bovenstaande voorbeeld en is deze beschikbaar voor u.

U kunt DI - Dependency Injection - overal gebruiken waar u een component definieert.

Merk op dat in het bovenstaande voorbeeld we "Inline Array Annotation" gebruiken. Dit betekent dat we expliciet als tekenreeksen de namen van onze afhankelijkheden schrijven. We doen dit om te voorkomen dat de toepassing breekt wanneer de code wordt geminimaliseerd voor productie. Codeminificatie verandert de namen van de variabelen (maar niet van strings), waardoor de injectie wordt verbroken. Door strings te gebruiken, weet Angular welke afhankelijkheden we willen.

Heel belangrijk - de volgorde van stringnamen moet hetzelfde zijn als de parameters in de functie.

Er zijn tools die dit proces automatiseren en voor u regelen.

Dynamische injecties

Er is ook een optie om componenten dynamisch aan te vragen. Je kunt het doen met de $injector service:

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

Opmerking: hoewel deze methode kan worden gebruikt om het probleem van circulaire afhankelijkheid te voorkomen dat uw app zou kunnen breken, wordt het niet als beste praktijk beschouwd om het probleem te omzeilen door het te gebruiken. Circulaire afhankelijkheid geeft meestal aan dat er een fout is in de architectuur van uw toepassing en u moet dit in plaats daarvan oplossen.

$ injecteer Property-annotatie

Evenzo kunnen we de annotatie van de eigenschap $inject gebruiken om hetzelfde te bereiken als hierboven:

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

AngularJS-service dynamisch laden in vanille JavaScript

U kunt AngularJS-services in vanille JavaScript laden met de AngularJS- injector() -methode. Elk opgehaald jqLite-element dat angular.element() heeft een methode- injector() die kan worden gebruikt om de injector op te halen.

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);
}

In het bovenstaande voorbeeld proberen we het jqLite-element op te halen dat de root van de AngularJS-toepassing ( ngAppElement ) bevat. Om dat te doen, gebruiken we de methode angular.element() , op zoek naar een DOM-element met het kenmerk ng-app of data-ng-app of, als het niet bestaat, vallen we terug op het document . We gebruiken ngAppElement om de injectorinstantie op te halen (met ngAppElement.injector() ). De injector wordt bijvoorbeeld gebruikt om te controleren of de dienst te injecteren bestaat (met injector.has() ) en vervolgens de dienst laden (met injector.get() ) in service variabele.