1. Abhängigkeitsinjektion
Die Abhängigkeitsinjektion (DI) ist ein Software -Designmuster, das sich darum befasst, wie Code die Ressourcen erhält, von denen er abhängt.
Für eine tiefere Diskussion über DI können Sie die Abhängigkeitsinjektion (http://en.wikipedia.org/wiki/dependency_injection), Inversion of Control (http://martinfowler.com/articles/injection.html) besuchen, oder Sie können die Book -Design -Muster auf Software -Design -Mustern besuchen.
1. DI auf den Punkt gebracht (einfach spricht di)
Objekt oder Funktion kann nur die Ressourcen erhalten, von denen sie auf die folgenden drei Arten abhängen:
1) Sie können abhängige Ressourcen über den neuen Bediener erstellen.
2) Sie können abhängige Ressourcen durch globale Variablen finden.
3) Die abhängigen Ressourcen können durch Parameter weitergegeben werden.
Die beiden Methoden 1 und 2 sind nicht die besten, da sie die Abhängigkeiten harten codieren, was es nicht unmöglich macht, die Abhängigkeiten zu ändern, aber es wird komplizierter. Dies ist insbesondere ein Problem für das Testen, und normalerweise ist bei unabhängig voneinander testetem Test erwünscht, Scheinabhängigkeiten bereitzustellen.
Die dritte Methode ist relativ die machbarste, da sie die Verantwortung für die Lokalisierung von Abhängigkeiten von Komponenten beseitigt. Das Vertrauen wird nur an die Komponenten übergeben.
Funktion someclass (Begrüßer) {this.greeter = Begrüßer} someclass.prototype.dosomething = function (name) {this.greeter.greet (name);}Im obigen Beispiel muss Someclass nicht darum kümmern, die Abhängigkeit von Begrüßern zu lokalisieren, sondern nur zur Laufzeit des Begrüßers vorbei.
Dies ist angemessener, übernimmt jedoch die Verantwortung für die Erlangung der Abhängigkeitsressourcen für den Code, der für den Aufbau von Someclass verantwortlich ist.
Um die Verantwortung für die Erstellung von Abhängigkeiten zu verwalten, verfügt jede Winkelanwendung über einen Injektor (http://code.angularjs.org/1.0.2/docs/api/angular.injector). Injector ist ein Service -Locator, der für die Lokalisierung und Erstellung abhängiger Ressourcen verantwortlich ist.
Fordern Sie Abhängigkeiten an, löst das Problem des Hardcode, aber es bedeutet, dass der Injektor die gesamte Anwendung durchlaufen muss. Passing Injector wird das Gesetz des Demeter (http://baike.baidu.com/view/823220.htm) zerstören. Um dieses Problem zu beheben, übertragen wir die Verantwortung für die Abhängigkeitsuche an den Injektor.
Ich habe so viel darüber gesagt. Schauen Sie sich die Beispiele an, die ich unten geändert habe. Ich habe zwei Beispiele des Originaltextes zusammengeführt, wobei ich Inject innerhalb und Außenwinkel verwendet habe:
<! DocType html> <html Lang = "zh-cn" ng-App = "mainApp"> <kopf> <meta charset = "utf-8"> <title> Injector </title> </head> <body> <div ng-controller = "myController"> <button ng-ng-click = "Sayhello" () " src = "../ Angular-1.0.1.js" type = "text/javaScript"> </script> <script type = "text/javaScript"> // Erstellen Sie das Modul othermodule, das dem externen Modul var othermodule.module äquivalent entspricht. // Injector beibringen, wie man "Begrüßer" erstellt // Beachten Sie, dass Begrüßer selbst auf $ window othermodule.factory ("Begrüßer", Funktion ($ Fenster) {// Dies ist eine Fabrikmethode, verantwortlich für das Erstellen von Greet Service Return {Greet: Funktion (Text) {$ Fenster.alert (Text);};}); // Folgendes zeigt, dass in einem Nichtstrommodul die GREET-Methode über den Injektor aufrufen: // Erstellen Sie einen neuen Injektor aus dem Modul // Dieser Schritt erfolgt normalerweise automatisch, wenn Angular gestartet wird. // Die "ng", eckige Dinge müssen eingeführt werden // Die Reihenfolge wird absichtlich umgekehrt, und es wird vorübergehend bestätigt, dass die Reihenfolge dieser Sache keine Rolle spielt. . var injector = angular.injector (['othermodule', 'ng']); // Anfrage des Begrüßers Abhängigkeit. var g = injector.get ("Begrüßer"); // nenn es direkt ~ g.greet ("hi ~ mein kleiner dada ~"); // Dies ist die aktuelle Haupt -App, und Sie müssen sich auf othermodule var mainApp = angular.module ("mainApp", ["othermodule"]) verlassen; // Achten Sie auf die Parameter der Definitionsfunktion des Controllers und geben Sie hier $ Scope und Begrüßer direkt ein. // Der Begrüßerdienst ist mainapp.controller ("mycontroller", function mycontroller ($ scope, greeter) {$ scope.sayhello = function () {Begrüßer.greet ("Hello Kitty ~~");};}); // ng-controller hat dieses Ding still hinter den Kulissen gemacht //injector.instantiate(myController); </script> </body> </html>Beachten Sie, dass MyController, da es einen NG-Controller gibt, MyController initialisiert wird, alle Abhängigkeiten von MyController erfüllen können, damit MyController die Existenz des Injektors nicht kennen muss. Dies ist das beste Ergebnis. Der Anwendungscode fordert lediglich die Abhängigkeiten an, die er benötigt, ohne den Injektor zu bearbeiten. Diese Einstellung wird nicht das Gesetz des Demeteres verstoßen.
2. Abhängigkeit Annotation (Abhängigkeitskommentare, die den Weg der Abhängigkeiten erläutert)
Woher weiß Injektor, welcher Service injiziert werden muss?
Anwendungsentwickler müssen Annotationsinformationen bereitstellen, die von Injector als Lösung für Abhängigkeiten verwendet werden. Alle vorhandenen API -Funktionen in Angular beziehen sich auf den Injektor, und dies ist bei der in jedem Dokument erwähnten API der Fall. Hier sind drei äquivalente Möglichkeiten, um unseren Code mit Service -Namensinformationen zu kommentieren.
1. Abhängigkeiten
Dies ist der einfachste Weg, um eine abhängige Ressource zu erhalten. Es ist jedoch erforderlich anzunehmen, dass der Parametername der Funktion mit dem Namen der abhängigen Ressource übereinstimmt.
Funktion MyController ($ Scope, Begrüßer) {...}Der Injektor einer Funktion kann den Namen des Dienstes erraten, der injiziert werden muss (FunktionName.toString (), Regexp), indem er die Funktionsdefinition überprüfen und den Funktionsnamen extrahiert. Im obigen Beispiel sind $ Scope und Begrüßer zwei Dienste, die in die Funktion eingespritzt werden müssen (die Namen sind ebenfalls gleich).
Obwohl dies einfach ist, funktioniert diese Methode nicht nach der Komprimierung der JavaScript -Verschleierung, da der Parametername geändert wird. Dies macht diese Methode nur für Pretotyping (Product Usability Prototype Simulation Test Method, http://www.pretotyping.org/, http://tech.qq.com/a/20120217/000320.htm) und Demo -Anwendungen nützlich.
2. $ Inject Annotation ($ Inject Kommentar)
Um dem Skriptkompressor die Funktion der Funktion umzubenennen und dennoch den richtigen Dienst injizieren zu können, muss die Funktion die Abhängigkeit über die $ Inject -Eigenschaft kommentieren. Die $ Inject -Eigenschaft ist eine Reihe der Namen der Dienste, die injiziert werden müssen.
var MyController = Funktion (umbenannt $ scope, umbenanntgreeter) {...} // Wenn das, was hier abhängig ist, nicht im aktuellen Modul ist, erkennt es sie immer noch nicht. // Sie müssen sich zunächst auf das entsprechende Modul im aktuellen Modul verlassen. Es ähnelt dem vorherigen Beispiel. Aber ich weiß nicht, ob dies der richtige Weg ist.
MyController. $ Inject = ['$ scope', 'Begrüßer'];
Es sollte vorsichtig sein, dass die Reihenfolge von $ Inject mit der Reihenfolge der von der Funktion deklarierten Argumente übereinstimmen muss.
Diese Annotationsmethode ist für Controller -Deklarationen nützlich, da sie Annotationsinformationen mit der Funktion angibt.
3.. Inline -Annotation (Inline -Kommentare)
Manchmal ist es nicht bequem, die $ Inject Annotation -Methode zu verwenden, z. B. beim direkten Kommentieren.
Zum Beispiel:
somemodule.factory ('Begrüßer', Funktion ($ Fenster) {...;});Da vorübergehende Variablen erforderlich sind (verhindern, dass es nach der Komprimierung nicht verwendet werden kann), wird der Code als:
var greeterFactory = function (umbenannt $ window) {...;}; Begrüßung.Aus diesem Grund (Code Bloat) bietet Angular auch einen dritten Kommentarstil:
somemodule.factory ('Begrüßer', ['$ window', function (umbenannt $ window) {...;}]);Denken Sie daran, dass alle Kommentarstile gleichwertig sind und überall in einem Winkel verwendet werden können, der die Injektion unterstützt.
3. Wo kann ich Benutzer DI?
DI ist überall im Winkel. Es wird normalerweise in Controller- und Fabrikmethoden verwendet.
1. DI in Controllern
Der Controller ist die Klasse, die für (Beschreibung) des Anwendungsverhaltens verantwortlich ist. Die empfohlene Controller -Deklarationsmethode lautet:
var MyController = Funktion (DEP1, DEP2) {...} MyController. $ inject = ['DEP1', 'DEP2'];2. Fabrikmethoden
Die Werksmethode ist für die Erstellung der meisten Winkelobjekte verantwortlich. Zum Beispiel Richtlinie, Dienst, Filter. Die Werksmethode ist im Modul registriert. Die empfohlene Fabrikdeklarationsmethode lautet:
Angualar.module ('MyModule', []). config (['depprovider', function (depprovider) {...}]). factory ('serviceId', ['depService', function (depService) {...}]). Directive ('Directiveame', ['DepService', Funktion (DepService) {...}]). filter ('filtername', ['depService', function (depService) {...}]);Das obige ist die Zusammenfassung der AngularJS -Abhängigkeitsinjektionsinformationen. Vielen Dank für Ihre Unterstützung für diese Seite!