AngularJS
Wstrzykiwanie zależności

Składnia

• myApp.controller („MyController”, funkcja ($ scope) {...}); // niezminimalizowany kod

• myApp.controller („MyController”, [„$ scope”, funkcja ($ scope) {...}]); // wsparcie minifikacji

• funkcja MyController () {}

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

  myApp.controller („MyController”, MyController); // $ adnotacja

• $ injector.get („do wstrzykiwań”); // wtrysk dynamiczny / wykonawczy

Uwagi

Zastrzyki

Najprostszy przykład zastrzyku w aplikacji Angular - wstrzyknięcie $scope do Controller Angular:

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

Powyższe ilustruje wstrzyknięcie $scope do controller , ale to samo, czy wstrzykujesz dowolny moduł do dowolnego innego. Proces jest taki sam.

System Angular odpowiada za rozwiązywanie zależności. Jeśli na przykład utworzysz usługę, możesz ją wymienić, tak jak w powyższym przykładzie, i będzie ona dostępna dla Ciebie.

Możesz użyć DI - Dependency Injection - wszędzie tam, gdzie definiujesz komponent.

Zauważ, że w powyższym przykładzie używamy tak zwanej „Inline Array Adnotation”. Oznacza to, że jednoznacznie piszemy jako ciągi nazwy naszych zależności. Robimy to, aby zapobiec zerwaniu aplikacji, gdy kod zostanie zminimalizowany do produkcji. Minifikacja kodu zmienia nazwy zmiennych (ale nie łańcuchów), co przerywa zastrzyk. Używając ciągów, Angular wie, jakich zależności chcemy.

Bardzo ważne - kolejność nazw ciągów musi być taka sama jak parametrów w funkcji.

Istnieją narzędzia, które automatyzują ten proces i zajmują się tym za Ciebie.

Dynamiczne zastrzyki

Istnieje również opcja dynamicznego żądania komponentów. Możesz to zrobić za pomocą usługi $injector :

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

Uwaga: chociaż tę metodę można zastosować w celu uniknięcia problemu zależności cyklicznej, który może uszkodzić aplikację, nie jest uważane za najlepszą praktykę omijanie problemu za pomocą jej. Zależność cykliczna zwykle wskazuje na lukę w architekturze aplikacji, którą należy rozwiązać.

$ inject Adnotacja właściwości

Odpowiednio możemy użyć adnotacji właściwości $inject aby osiągnąć to samo, co powyżej:

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

Dynamicznie ładuj usługę AngularJS w waniliowym JavaScript

Możesz załadować usługi AngularJS w waniliowym JavaScript za pomocą metody AngularJS injector() . Każdy pobrany element jqLite wywołujący angular.element() ma metodę injector() której można użyć do pobrania iniektora.

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

W powyższym przykładzie próbujemy pobrać element jqLite zawierający katalog główny aplikacji AngularJS ( ngAppElement ). Aby to zrobić, używamy metody angular.element() , szukając elementu DOM zawierającego atrybut ng-app lub data-ng-app lub, jeśli nie istnieje, wracamy do elementu document . Używamy ngAppElement do pobierania instancji wtryskiwacza (z ngAppElement.injector() ). Instancja inżektora służy do sprawdzania, czy istnieje usługa do wstrzykiwania (przy pomocy injector.has() ), a następnie do ładowania usługi (przy pomocy injector.get() ) w zmiennej service .