Detaillierte Erläuterung der Methoden des AngularJS-Moduls_AngularJS

Was ist AngularJS?

AngularJs (im Folgenden als ng bezeichnet) ist ein strukturelles Framework zum Entwerfen dynamischer Webanwendungen. Erstens handelt es sich um ein Framework und nicht um eine Klassenbibliothek. Es bietet einen vollständigen Satz von Lösungen zum Entwerfen von Webanwendungen. Es ist mehr als nur ein Javascript-Framework, denn sein Kern ist tatsächlich eine Erweiterung von HTML-Tags.

Was ist eine HTML-Tag-Erweiterung? Tatsächlich können Sie Tags verwenden, um einen Teil der Seitenlogik zu vervollständigen. Die spezifische Methode erfolgt über benutzerdefinierte Tags, benutzerdefinierte Attribute usw. Diese Tags/Attribute, die nicht in HTML enthalten sind, haben einen Namen in der ng:-Direktive. Mehr dazu später. Was ist also eine dynamische Webanwendung? Im Gegensatz zu herkömmlichen Websystemen können Webanwendungen Benutzern umfassende Vorgänge bieten und Ansichten kontinuierlich mit Benutzervorgängen aktualisieren, ohne dass URL-Sprünge erforderlich sind. ng-Beamter gibt außerdem an, dass es sich besser für die Entwicklung von CRUD-Anwendungen eignet, also Anwendungen mit mehr Datenoperationen, als für Spiele oder Bildverarbeitungsanwendungen.

Um dies zu erreichen, hat ng einige großartige Funktionen eingeführt, darunter Vorlagenmechanismus, Datenbindung, Module, Anweisungen, Abhängigkeitsinjektion und Routing. Durch die Bindung von Daten und Vorlagen können wir mühsame DOM-Vorgänge vermeiden und uns auf die Geschäftslogik konzentrieren.

Noch eine Frage: Handelt es sich bei ng um ein MVC-Framework? Oder MVVM-Framework? Auf der offiziellen Website wurde erwähnt, dass das Design von ng die Grundidee von MVC übernimmt, es sich jedoch nicht vollständig um MVC handelt, da wir beim Schreiben des Codes tatsächlich die Anweisung ng-controller verwenden (zumindest vom Namen her handelt es sich um MVC). ), aber das vom Controller abgewickelte Geschäft interagiert im Wesentlichen mit der Ansicht, die MVVM sehr nahe zu sein scheint. Wenden wir unsere Aufmerksamkeit dem nicht auffälligen Titel der offiziellen Website zu: „AngularJS – Superheroic JavaScript MVW Framework“.

Die Module-Klasse in AngularJS ist dafür verantwortlich, zu definieren, wie die Anwendung gestartet wird. Sie kann auch verschiedene Fragmente in der Anwendung durch Deklarationen definieren. Werfen wir einen Blick darauf, wie diese Funktionen implementiert werden.

1. Wo ist die Main-Methode

Wenn Sie mit der Programmiersprache Java oder Python arbeiten, möchten Sie vielleicht wissen, wo sich die Hauptmethode in AngularJS befindet. Wo ist die Methode, die alles startet und zuerst ausgeführt wird? Wo ist die Methode im JavaScript-Code, die alles instanziiert und zusammenfügt und dann die Anwendung anweist, mit der Ausführung zu beginnen?

Tatsächlich verfügt AngularJS nicht über eine Hauptmethode, sondern verwendet das Konzept von Modulen, um die Hauptmethode zu ersetzen. Mithilfe von Modulen können wir die Abhängigkeiten in einer Anwendung deklarativ beschreiben und festlegen, wie sie zusammengestellt und gestartet wird. Die Gründe für die Verwendung dieser Methode sind folgende:

1. Module sind deklarativ. Das bedeutet, dass es einfacher zu schreiben und leichter zu verstehen ist – das Lesen ist genau wie das Lesen von normalem Englisch!

2. Es ist modular. Dies zwingt Sie dazu, darüber nachzudenken, wie Sie Ihre Komponenten und Abhängigkeiten definieren, um sie klarer zu machen.

3. Es erleichtert das Testen. Beim Unit-Testen können Sie selektiv Module hinzufügen und Inhalte im Code vermeiden, die nicht Unit-getestet werden können. Gleichzeitig können Sie beim Szenariotest weitere Zusatzmodule laden, damit diese besser mit anderen Komponenten zusammenarbeiten können.

In unserer Anwendung gibt es beispielsweise ein Modul namens „MyAwesomeApp“. Fügen Sie in HTML einfach Folgendes zum -Tag hinzu (oder technisch gesehen zu jedem Tag):

Code kopieren Der Code lautet wie folgt:

Die ng-app-Direktive weist AngularJS an, das MyAwesomeApp-Modul zum Starten Ihrer Anwendung zu verwenden. Wie sollten also Module definiert werden? Wir empfehlen beispielsweise, dass Sie separate Module für Dienste, Anweisungen und Filter definieren. Ihr Hauptmodul kann dann Abhängigkeiten von diesen Modulen deklarieren.

Dies erleichtert die Modulverwaltung, da es sich bei allen um gute, vollständige Codeblöcke handelt und jedes Modul nur eine Funktion hat. Gleichzeitig können Unit-Tests nur die Module laden, auf die sie sich konzentrieren, sodass die Anzahl der Initialisierungen reduziert werden kann und Unit-Tests verfeinert und fokussierter werden.

2. Laden und Abhängigkeiten

Der Modulladevorgang erfolgt in zwei verschiedenen Phasen, die sich im Funktionsnamen widerspiegeln können: Codeblock konfigurieren und Codeblock ausführen (oder als Phase bezeichnet).

1.Codeblock konfigurieren

In dieser Phase verbindet und registriert AngularJS alle Datenquellen. Daher können nur Datenquellen und Konstanten in Config-Blöcke eingefügt werden. Dienste, bei denen nicht sicher ist, ob sie initialisiert wurden, können nicht injiziert werden.

2.Codeblock ausführen

Der Codeblock ausführen wird verwendet, um Ihre Anwendung zu starten und die Ausführung zu starten, nachdem der Injektor erstellt wurde. Um zu vermeiden, dass das System nach diesem Punkt konfiguriert werden muss, können nur Instanzen und Konstanten in den Run-Block eingefügt werden. Sie werden feststellen, dass in AngularJS der Run-Block der Hauptmethode am ähnlichsten ist.

3. Schnelle Methode

Was kann man mit Modulen machen? Wir können damit Controller, Anweisungen, Filter und Dienste instanziieren, aber Sie können mit Modulklassen noch viel mehr tun. API-Methoden wie folgt konfiguriert:

1.config(configFn)

Mit dieser Methode können Sie einige Registrierungsarbeiten durchführen, die beim Laden des Moduls abgeschlossen werden müssen.

2.constant(name, object)

Diese Methode wird zuerst ausgeführt, sodass Sie sie verwenden können, um anwendungsweite Konstanten zu deklarieren und sie in allen Konfigurationsmethoden (Konfigurationsmethode) und Instanzmethoden (alle nachfolgenden Methoden wie Controller, Dienst usw.) verfügbar zu machen.

3.controller(name,constructor)

Seine Grundfunktion besteht darin, den Controller für die spätere Verwendung zu konfigurieren.

4.directive(name,directiveFactory)

Mit dieser Methode können Sie Anweisungen in Ihrer App erstellen.

5.filter(name,filterFactory)

Ermöglicht das Erstellen benannter AngularJS-Filter, wie im vorherigen Abschnitt beschrieben.

6.run(initializationFn)

Sie können diese Methode verwenden, wenn Sie nach dem Start des Injektors einige Aktionen ausführen möchten, diese Aktionen jedoch ausgeführt werden müssen, bevor die Seite für den Benutzer verfügbar ist.

7.Wert(Name,Objekt)

                                                                                                                                                            --  Werte können in die gesamte Anwendung eingefügt werden.

8.factory(name,factoryFn)

Wenn Sie eine Klasse oder ein Objekt haben und diese mit Logik oder Parametern versehen müssen, bevor sie initialisiert werden können, können Sie hier die Factory-Schnittstelle verwenden. Eine Factory ist eine Funktion, die für die Erstellung bestimmter Werte (oder Objekte) verantwortlich ist. Schauen wir uns ein Beispiel der Begrüßungsfunktion an. Diese Funktion erfordert eine Begrüßung zum Initialisieren:

function Greeter(salutation) {
 this.greet = function(name) {
 return salutation + ' ' + name;
};
}

Ein Beispiel für eine Begrüßungsfunktion ist wie folgt:

myApp.factory('greeter', function(salut) {
 return new Greeter(salut);
});

Dann kann man es so nennen:

var myGreeter = greeter('Halo');

9.service(name,object)

Der Unterschied zwischen Factory und Service besteht darin, dass die Factory die an sie übergebene Funktion direkt aufruft und dann das Ausführungsergebnis zurückgibt, während der Service das Schlüsselwort „new“ verwendet, um den an sie übergebenen Konstruktor aufzurufen und dann die Ergebnisse zurückzugeben. Daher kann die bisherige Greeter Factory durch den folgenden Greeter Service ersetzt werden:

myApp.service('greeter', Greeter);

每当我们需要一个greeter实例的时候，AngularJS就会调用新的Greeter()来返回一个实例。

10.provider(name,providerFn)

provider是这几个方法中最复杂的部分（显然，也是可配置性最好的部分）。provider中既绑定了factory也绑定了service，并且在注入系统准备完毕之前，还可以享受到配置provider函数的好处（也就是config块）。

我们来看看使用provider改造之后的greeter Service是什么样子：

myApp.provider('greeter', function() {
 var salutation = 'Hello';
 this.setSalutation = function(s) {
 salutation = s;
}
 function Greeter(a) {
 this.greet = function() {
 return salutation + ' ' + a;
}
}
 this.$get = function(a) {
 return new Greeter(a);
};
});

这样我们就可以在运行时动态设置问候语了（例如，可以根据用户使用的不同语言进行设置）。

var myApp = angular.module(myApp, []).config(function(greeterProvider) {
greeterProvider.setSalutation('Namaste');
});