Kürzlich habe ich den maßgeblichen AngularJS -Leitfaden gelesen. Aus verschiedenen Gründen (hauptsächlich, weil ich kein Geld habe, hasse ich es, also habe ich mich entschlossen, die elektronische Version online herunterzuladen (weil es kein Geld kostet, haha ...). Die Schriftart ist ziemlich klar und der Gesamteffekt ist ziemlich gut. Als ich jedoch die Gesamtzahl der Seitenzahlen in der oberen linken Ecke sah, 479 Seiten. Lernen Sie aber nicht die Seitenzahl lernen, möchten Sie aber nicht mit meiner Freundin eingehen?
Glücklicherweise war ich vor dem Lesen von E-Books ein bisschen einfach. Ich hatte ein wenig gelernt, Videos anzusehen, von zwei-Wege-Daten, die an Dienste bindung, und dann bis zum Anweisungssystem mehr oder weniger Kontakt. Darüber hinaus wurde während einer Web -Sonder -Kursauswahlzuweisung ein einfaches Systemverwaltungssystem für Schülerklassen über AngularJs im vorderen Ende und NodeJs im Backend und Mongoose im Backend erstellt. Da ich kein Geld habe, kann ich es nur auf Github platzieren. Github -Adresse: Student Management System, Willkommen bei Fork, gehen wir zum Thema unten ...
================================================================ieben
In der Regel gibt es drei Möglichkeiten, dass ein Objekt die Kontrolle über seine Abhängigkeit erlangt:
(1) Abhängigkeiten intern erstellen;
(2) Referenzen durch globale Variablen;
(3) Bei Bedarf Parameter durchlaufen.
Die Abhängigkeitsinjektion wird auf dritte Weise erreicht. Die beiden anderen Methoden werden verschiedene Probleme mit sich bringen, z. B. die Verschmutzung des globalen Umfangs, die Isolation extrem schwierig, usw. Die Abhängigkeitsinjektion ist ein Entwurfsmuster, das hartcodierte Abhängigkeiten beseitigt, sodass Abhängigkeiten zur Laufzeit geändert oder sogar entfernt werden können.
Die Möglichkeit, Abhängigkeiten zur Laufzeit zu ändern, ist ideal für das Testen, da wir eine isolierte Umgebung erstellen können, in der verspottete Objekte anstelle von realen Objekten in der Produktionsumgebung verwendet werden können.
Aus funktionaler Perspektive findet die Abhängigkeitsinjektion die Abhängigkeit automatisch im Voraus und informiert die abhängige Ressource des Injektionsziels, sodass die Ressource sofort injiziert werden kann, wenn das Ziel es benötigt.
Beim Schreiben von Komponenten, die von anderen Objekten oder Bibliotheken abhängen, müssen wir die Abhängigkeiten zwischen Komponenten beschreiben. Während der Laufzeit erstellt der Injektor eine Instanz der Abhängigkeit und ist dafür verantwortlich, ihn an den abhängigen Verbraucher weiterzugeben.
// Hervorragendes Beispiel aus der Angular -Dokumentationsfunktion Someclass (Begrüßer) {this.greeter = Begrüßer;} someclass.Prototype.Greetname = Funktion (Name) {this.greeter.greet (Name);}; // Beachten Sie, dass der Beispielcode einen Controller auf der globalen Zielfernrohr erstellt.Someclass kann zur Laufzeit auf den internen Begrüßer zugreifen, aber es ist es egal, wie man einen Hinweis auf den Begrüßer bekommt. Um einen Hinweis auf die Begrüßungsinstanz zu erhalten, ist der Schöpfer von Someclass dafür verantwortlich, seine Abhängigkeiten zu konstruieren und sie einzugeben.
Aus den oben genannten Gründen verwendet AngularJS $ Injetor (Injector Service), um Abfragen und die Instanziierung von Abhängigkeiten zu verwalten. Tatsächlich ist $ Injetor für die Instanziierung aller Komponenten in AngularJs verantwortlich, einschließlich der Module, Anweisungen und Controller der Anwendung.
Zur Laufzeit ist $ Injetor dafür verantwortlich, ein Modul zu instanziieren, wenn es startet, und alle Abhängigkeiten übergeben, an die es benötigt wird.
Zum Beispiel der folgende Code. Dies ist eine einfache Anwendung, die ein Modul und einen Controller deklariert:
Angular.module ('MyApp', []). Factory ('Begrüßer', function () {return {greet: function (msg) {alert (msg);}}}). Controller ('mycontroller', function ($ scope, greeter) {$ scope.sayhello = function () {) {) {) {);Wenn AngularJs dieses Modul instanziiert, sucht es nach Begrüßer und verweist natürlich Hinweise darauf:
<div ng-app = "myapp"> <div ng-controller = "mycontroller"> <button ng-klick = "Sayhello ()"> Hallo </button> </div> </div>
Intern ist der Verarbeitungsprozess von AngularJS wie folgt:
// Verwenden Sie den Injektor, um den Anwendungsvar injector = Angular.injector (['ng', 'MyApp'] zu laden. MyController = $ controller ('MyController', {$ scope: scope});Der obige Code gibt nicht an, wie man Begrüßer findet, funktioniert jedoch ordnungsgemäß, da $ Injektor dafür verantwortlich ist, ihn für uns zu finden und zu laden.
AngularJS extrahiert die Parameterliste aus der übergebenen Funktion während der Instanziierung durch die Annotate -Funktion. Geben Sie den folgenden Code in die Entwickler -Tools von Chrome ein, um diese Funktion anzuzeigen:
> Injector.annotate (Funktion ($ q, Begrüßer) {}) ["$ q", "Begrüßer"]In einer AngularJS -Anwendung arbeitet $ Injector, ob wir wissen oder nicht. Beim Schreiben eines Controllers versucht $ Injector, wenn kein [] -Tag verwendet wird oder eine explizite Deklaration vorliegt, Abhängigkeiten nach Parameternamen zu schließen.
Abgeleitete Injektionsaussage
Wenn es keine explizite Deklaration gibt, geht AngularJS davon aus, dass der Parametername der Name der Abhängigkeit ist. Daher wird die Methode toString () des Funktionsobjekts intern analysiert, die Funktionsparameterliste analysiert und extrahiert und diese Parameter über $ Injector in die Objektinstanz injiziert. Der Injektionsprozess ist wie folgt:
Injector.invoke (Funktion ($ http, Begrüßer) {});Beachten Sie, dass dieser Prozess nur für unkomprimierte und verschleierte Code anwendbar ist, da AngularJS eine unkomprimierte Parameterliste für die Parsen erfordert. Mit diesem Prozess des Abschlusses auf der Grundlage von Parameternamen ist die Reihenfolge der Parameter von geringer Bedeutung, da AngularJs uns hilft, Eigenschaften in die richtige Reihenfolge zu injizieren.
Ausdrücklich Erklärungen injizieren
AngularJS bietet explizite Methoden, um die Abhängigkeiten klar zu definieren, die eine Funktion verwenden muss, wenn sie aufgerufen wird. Das Deklarieren von Abhängigkeiten auf diese Weise kann auch dann ordnungsgemäß funktionieren, auch wenn der Quellcode komprimiert ist und der Parametername ändert. Die $ Inject -Eigenschaft kann verwendet werden, um die Funktion der explizite Injektion von Erklärungen zu implementieren. Die $ Inject -Eigenschaft eines Funktionsobjekts ist ein Array, der Typ des Array -Elements ist eine Zeichenfolge, und ihre Werte sind der Name des Dienstes, der injiziert werden muss.
Hier ist der Beispielcode:
var acontrollerFactory = function acontroller ($ scope, Begrüßer) {console.log ("geladener Controller", Begrüßer); // ... Controller}; // Begrüßer service console.log ("Begrüßerdienst");} // unser Anwendungscontroller Angular.module ('MyApp', []). Controller ('MyController', AcontrollerFactory). = Injector.get ('$ controller'), rootscope = injector.get ('$ rootScope'), newscope = rootscope.Für diese Deklarationsmethode ist die Reihenfolge der Parameter sehr wichtig, da die Reihenfolge der $ Inject -Array -Elemente einzeln der Reihenfolge der injizierten Parameter entsprechen muss. Diese Deklarationsmethode kann in komprimiertem Code ausgeführt werden, da die relevanten Informationen der Deklaration bereits an die Funktion selbst gebunden sind.
Intra-Line-Injektionsaussage
Der letzte Weg, um Deklarationen von AngularJS zu injizieren, ist eine Inline -Injektionsdeklaration, die jederzeit verwendet werden kann. Diese Methode ist eigentlich ein syntaktischer Zucker, der genau dem oben genannten Prinzip für die Injektion von Erklärungen durch die $ Inject -Eigenschaft entspricht, es uns jedoch ermöglicht, Parameter innerhalb der Linie zu übergeben, wenn die Funktion definiert ist. Darüber hinaus vermeidet es die Verwendung temporärer Variablen während des Definitionsprozesses.
Bei der Definition eines AngularJS-Objekts ermöglicht die Inline-Deklaration wir, ein Array von Parametern direkt anstelle einer Funktion zu übergeben. Die Elemente des Arrays sind Zeichenfolgen, die die Namen von Abhängigkeiten darstellen, die in das Objekt injiziert werden können. Der letzte Parameter ist das Objektobjekt selbst der Abhängigkeitsinjektion.
Beispiele sind wie folgt:
Angular.module ('MyApp'). Controller ('MyController', ['$ scope', 'Begrüßer', Funktion ($ scope, greeter) {}]);Da es sich um eine Liste von Zeichenfolgen handelt, können Inline -Injektionsdeklarationen auch im komprimierten Code normal ausgeführt werden. Es wird normalerweise von Klammern und dem [] -Symbol verwendet, das das Array deklariert.
Die obige AngularJS -Abhängigkeitsinjektion ist der gesamte Inhalt, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.