Die Vorteile der Abhängigkeitsinjektion (DI) werden nicht mehr diskutiert, und diejenigen, die das Frühlingsgerüst verwendet haben, wissen es. Als Vordergrund -JS -Framework unterstützt AngularJS auch DI. Dies ist eine Funktion, die JavaScript/JQuery nicht hat. DI im Zusammenhang mit AngularJs umfasst angular.module (), angular.injector (), $ injector und $ bereit. Für einen DI -Container muss es drei Elemente haben: Serviceregistrierung, Abhängigkeitserklärung und Objekterwerb. Beispielsweise wird im Frühjahr die Registrierung des Dienstes über das <Bean> -Tag der XML -Konfigurationsdatei oder die Annotation @Repository, @Service, @Controller und @Component implementiert; Die Erfassung des Objekts kann von ApplicationContext.getbean () implementiert werden. Die Abhängigkeitserklärung kann in der XML -Datei konfiguriert werden oder im Java -Code mit @Resource und anderen Anmerkungen deklariert werden. In Angular entsprechen Modul und $ bereitgestellt der Registrierung des Dienstes. Injektor wird verwendet, um Objekte zu erhalten (Angular vervollständigt automatisch die Injektion von Abhängigkeiten). Es gibt 3 Möglichkeiten, Abhängigkeiten in Angular zu deklarieren. Das Folgende ist eine Einführung in den Winkel -DI aus diesen 3 Aspekten.
1.. Angular.module () erstellt, erhält und registriert Module in Winkel
Das Angular.module () ist ein globaler Ort zum Erstellen, Registrieren und Abrufen von Winkelmodulen. Wenn zwei oder mehr Argumente bestanden werden, wird ein neues Modul erstellt. Wenn nur ein Argument bestanden wird, wird ein vorhandenes Modul (der Name als erstes Argument zum Modul übergeben) abgerufen.
// Mehr als einen Parameter übergeben bedeutet ein neues Modul; Ein leeres Array bedeutet, dass das Modul nicht auf anderen Modulen var createModule = angular.module ("MyModule", []); // Es gibt nur einen Parameter (Modulname), was bedeutet, das Modul zu erhalten // Wenn das Modul nicht existiert, wird das Angular -Framework eine Ausnahmevar -Getmodul. alert (CreateModule == getModule);Diese Funktion kann neue Module erstellen oder vorhandene Module erhalten. Unabhängig davon, ob es sich um die Anzahl der Parameter handelt.
Angular.module (Name, [erfordert], [configFn]);
Name: String -Typ, der den Namen des Moduls darstellt;
Erfordert: eine Reihe von Zeichenfolgen, die die Liste anderer Module darstellen, von denen das Modul abhängt. Wenn Sie sich nicht auf andere Module verlassen, verwenden Sie ein leeres Array.
configFN: Wird verwendet, um einige Konfigurationen für dieses Modul zu erstellen.
Jetzt wissen wir, wie man Module erstellt und erhält. Was genau sind Module? Der offizielle Entwicklerhandbuch gibt nur einen Satz: Sie können sich ein Modul als Container für die verschiedenen Teile Ihrer App -Controller, -Dienste, Filter, Richtlinien usw. vorstellen. Ich verstehe ihn jetzt nicht ganz. Es bedeutet grob, dass ein Modul eine Sammlung einiger Funktionen ist, wie z. B. Ganzes aus Kinderelementen wie Controllern, Diensten, Filtern, Anweisungen usw. Ich kann es jetzt nicht erklären, also werde ich es zuerst hinter sich lassen.
2. Die Beziehung zwischen $ care und Modul
Der $ bereitgestellte Service verfügt über eine Reihe von Methoden zum Registrieren von Komponenten mit dem $ Injector. Viele dieser Funktionen sind ebenfalls auf Angular.modul ausgesetzt.
Wie bereits erwähnt: Modul und Bereitstellung werden verwendet, um Dienste in Injektor zu registrieren. Überprüfen Sie die offizielle API und Sie können feststellen, dass $ conendite conendet (), constant (), value (), factory () und service () Dienste verschiedener Natur erstellt werden; Angular.module bietet auch diese 5 Service -Registrierungsmethoden an. Tatsächlich sind die Funktionen der beiden genau gleich, mit denen Dienste mit dem DI -Container in den Injektor registriert werden.
Auto unter der offiziellen API enthält $ care und $ iNjector, implizite Modul, das automatisch zu jedem $ Injector hinzugefügt wird. Im wahrsten Sinne des Wortes hat jeder Injektor diese beiden impliziten Dienste. Aber in Version 1.2.25 habe ich das Gefühl, dass es keine Möglichkeit gibt, die $ bereitgestellte Bereitstellung im Injektor zu erhalten. Ich weiß nicht, warum das ist? Im Allgemeinen müssen Sie diesen Dienst nicht anzeigen, sondern nur die im Modul bereitgestellte API verwenden.
var injector = angular.injector (); alert (Injector.has ("$ conplot"); // falsealert (Injector.has ("$ Injector"); // true3. Angular.injector ()
Sie können den Injektor auch mit Angular.injector () erhalten. aber es ist nicht an das Modul gebunden. Dieser Ansatz ist bedeutungslos, er ist gleichbedeutend mit der Erstellung eines leeren DI -Containers, und es gibt keinen Service. Wie können andere ihn verwenden? Die richtige Art und Weise besteht darin, die Module anzugeben, die beim Erstellen des Injektors geladen werden müssen.
// Create myModule module and register service var myModule = angular.module('myModule', []);myModule.service('myService', function() { this.my = 0;});// Create herModule module and register service var herModule = angular.module('herModule', []); Hermodule.Service ('Herservice', function () {this.her = 1;}); // laden den Service var injector = angular.injector (["MyModule", "Hermodule"]); alert (Injector.get ("MyService".Wenn mehrere Module geladen werden, können die Dienste unter mehreren Modulen über den zurückgegebenen Injektor erhalten werden. In diesem Beispiel, wenn nur MyMouldle geladen wird, kann der erhaltene Injektor nicht auf die Dienste unter Hermouldle zugreifen. Hier ist besonders wichtig zu beachten: Angular.injector () kann mehrmals aufgerufen werden und jedes Mal, wenn es das neu erstellte Injektorobjekt zurückgibt.
var Injector1 = angular.injector (["MyModule", "Hermodule"]); var iNjector2 = angular.injector (["MyModule", "Hermodule"]; ALERM (INJECTOR1 == Injector2); // Falsch
4. Drei Möglichkeiten, Abhängigkeiten in Angular zu erklären
Angular bietet drei Möglichkeiten, Abhängigkeiten zu erhalten: Inferenz-, Annotations- und Inline -Methoden.
// MYMODULE -Modul erstellen und registrieren Sie den Service var MyModule = angular.module ('myModule', []); MyModule.Service ('myService', function () {this.my = 0;}); // Injectorvar Injector = Angular.injector (["MyModule"). inferenceInjector.invoke (Funktion (MyService) {alert (myService.my);}); // Die zweite AnnotationFunktion explizit (servicea) {alert (servicea.my);}; explizit. $ Inject = ['MyService']; InlineInjector.invoke (['MyService', Funktion (servicea) {alert (servicea.my);}]);Unter ihnen erfordern die Annotation und die Inline -Methoden den empfohlenen Funktionsparameternamen nicht. Die Inferenzmethode erfordert, dass der Parametername und der Dienstname konsistent sind. Wenn der JS -Code komprimiert oder verschleiert wird, gibt es Probleme mit der Funktion, und diese Methode wird nicht empfohlen.
Das obige ist eine Zusammenstellung der Informationen, die durch AngularJS -Abhängigkeit injiziert werden. Wir werden in Zukunft weiterhin relevante Informationen hinzufügen. Vielen Dank für Ihre Unterstützung für diese Website!