AngularJS
Abhängigkeitsspritze

Syntax

• myApp.controller ('MyController', Funktion ($ scope) {...}); // nicht reduzierter Code

• myApp.controller ('MyController', ['$ scope', Funktion ($ scope) {...}]); // Minification unterstützen

• Funktion MyController () {}

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

  myApp.controller ('MyController', MyController); // $ Annotation einfügen

• $ injector.get ('injizierbar'); // dynamische / Laufzeitinjektion

Bemerkungen

Injektionen

Das einfachste Beispiel für eine Injektion in einer Angular-App - wobei $scope in einen Angular Controller eingefügt wird:

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

Das Obige veranschaulicht eine Injektion eines $scope in einen controller , es ist jedoch dasselbe, ob Sie ein Modul in ein anderes injizieren. Der Prozess ist der gleiche.

Angulars System ist für die Auflösung von Abhängigkeiten für Sie zuständig. Wenn Sie beispielsweise einen Dienst erstellen, können Sie ihn wie im obigen Beispiel auflisten und für Sie verfügbar machen.

Sie können DI - Dependency Injection verwenden, wo immer Sie eine Komponente definieren.

Beachten Sie, dass wir im obigen Beispiel die sogenannte "Inline Array Annotation" verwenden. Das heißt, wir schreiben explizit als Namen die Namen unserer Abhängigkeiten. Wir tun dies, um zu verhindern, dass die Anwendung beschädigt wird, wenn der Code für die Produktion minimiert wird. Durch die Codeminifizierung werden die Namen der Variablen geändert (jedoch keine Zeichenfolgen), wodurch die Injektion unterbrochen wird. Durch die Verwendung von Strings weiß Angular, welche Abhängigkeiten wir wollen.

Sehr wichtig - die Reihenfolge der Zeichenfolgennamen muss mit den Parametern in der Funktion übereinstimmen.

Es gibt Tools, die diesen Prozess automatisieren und für Sie erledigen.

Dynamische Injektionen

Es gibt auch eine Option zum dynamischen Anfordern von Komponenten. Sie können dies mit dem $injector Dienst tun:

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

Hinweis: Diese Methode kann zwar verwendet werden, um das zirkuläre Abhängigkeitsproblem zu verhindern, durch das Ihre App möglicherweise beschädigt wird, es wird jedoch nicht als bewährte Methode angesehen, das Problem durch Verwendung zu umgehen. Eine kreisförmige Abhängigkeit weist normalerweise darauf hin, dass in der Architektur Ihrer Anwendung ein Fehler vorliegt, und Sie sollten stattdessen darauf eingehen.

$ inject Eigenschaftsanmerkung

Gleichermaßen können wir die $inject Eigenschaftsanmerkung verwenden, um dasselbe wie oben zu erreichen:

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

Laden Sie den AngularJS-Dienst dynamisch in JavaScript

Sie können AngularJS-Dienste in Vanilla-JavaScript mithilfe der AngularJS injector() -Methode laden. Jedes Element jqLite abgerufen Aufruf angular.element() hat eine Methode injector() , die verwendet werden , kann der Injektor abzurufen.

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

Im obigen Beispiel versuchen wir, das jqLite-Element abzurufen, das die Wurzel der AngularJS-Anwendung ( ngAppElement ) enthält. Dazu verwenden wir die angular.element() -Methode, um nach einem DOM-Element zu suchen, das das Attribut " ng-app oder " data-ng-app . Wenn dies nicht der Fall ist, greifen wir auf das document . Wir verwenden ngAppElement , um die Injektorinstanz abzurufen (mit ngAppElement.injector() ). Die Injector-Instanz wird verwendet, um zu prüfen, ob der zu injizierende Dienst vorhanden ist (mit injector.has() ) und anschließend den Dienst (mit injector.get() ) in der service Variablen zu laden.