Bevor wir über das AngularJS -Modul sprechen, führen wir zunächst einige Wissenspunkte von Angular ein:
AngularJS ist eine reine Kundentechnologie, die vollständig in JavaScript geschrieben wurde. Es verwendet herkömmliche Technologien der Webentwicklung (HTML, CSS, JavaScript), um die Entwicklung der Webanwendungen schneller und einfacher zu gestalten.
AngularJS vereinfacht die Anwendungsentwicklung darin, einige gemeinsame Entwicklungsvorgänge auf niedriger Ebene zu verpacken, um ihnen Entwicklern zu bieten. AngularJS wird diese Vorgänge auf niedrigem Niveau automatisch behandeln. Dazu gehören:
1.Dom Operation
2. Richten Sie das Hören von Ereignissen ein
3. Die Eingabemittelüberprüfung, da AngularJS die meisten dieser Vorgänge behandeln, können sich Entwickler mehr auf die Geschäftslogik der Anwendung konzentrieren und weniger wiederholte, fehleranfällige und niedrige Code schreiben.
Während AngularJS die Entwicklung vereinfacht, bringt es dem Kunden auch einige exquisite Technologien, darunter:
1. Trennung von Daten, Geschäftslogik und Ansichten
2. Automatische Bindung von Daten und Ansichten
1. Allgemeine Dienstleistungen
4. Abhängigkeitsinjektion (hauptsächlich für Aggregationsdienste verwendet)
5. Extensible HTML -Compiler (vollständig von JavaScript geschrieben)
6. Einfach zu testen
7. Die Nachfrage des Kunden nach diesen Technologien existiert seit langem.
Gleichzeitig können Sie auch AngularJs verwenden, um einseitige oder mehrseitige Anwendungen zu entwickeln, es wird jedoch hauptsächlich zur Entwicklung von Einzel-Seiten-Anwendungen verwendet. AngularJS unterstützt Browser-Historienvorgänge, Vorwärts- und Rückschaltflächen und bevorzugte Operationen in einseitigen Anwendungen.
Lassen Sie uns als nächstes das Modul von AngularJs ausführlich erklären.
Die meisten Anwendungen verfügen über eine Hauptmethode zum Instanziieren, Organisieren und Starten von Anwendungen. AngularJS -Anwendungen haben keine Hauptmethode, verwenden jedoch Module, um zu deklarieren, wie die Anwendung gestartet werden soll. Diese Methode hat die folgenden Vorteile:
1. Der Startprozess ist deklarativ, daher ist es einfacher zu verstehen.
2. Bei Unit -Tests müssen nicht alle Module geladen werden. Diese Methode hilft also, Unit -Tests zu schreiben.
3.. Zusätzliche Module können Tests in bestimmten Situationen hinzugefügt werden. Diese Module können die Konfigurationen ändern und bei End-to-End-Tests helfen.
4. Code von Drittanbietern kann in wiederverwendbare Module verpackt werden.
5. Module können in einer beliebigen Reihenfolge der Reihenfolge der Sequenz oder Parallelität geladen werden (da sich die Ausführung des Moduls selbst verzögert).
Zum Beispiel:
<! docType html> <html ng-app = "myapp"> <kopf> <script src = "http://code.angularjs.org/angular-1.0.2.min.js"> </script> <script> var myappmodule = Angular.module ('myapp', []); // das Modul konfigurieren. // In diesem Beispiel erstellen wir ein Grußfilter myappmodule.filter ('greet', function () {return function (name) {return 'hello,' + name + '!;};}); </script> </head> <body> <div> {{'World' | Greet}} </div> </body> </html>Im obigen Beispiel verwenden wir das MyApp-Modul, um die Anwendung zu starten, indem wir sie in <html ng-App = "MyApp"> angeben.
Das obige Beispiel ist sehr einfach zu schreiben, ist jedoch nicht zum Schreiben großer Anwendungen auf die gleiche Weise geeignet. Unsere Empfehlung ist, Ihre Anwendung in die folgenden Module aufzuteilen:
1. Ein Servicemodul, mit dem Serviceerklärungen vorgenommen wurden.
2. Ein Anweisungsmodul, mit dem Anweisungen deklariert wurden.
3. Ein Filtermodul, mit dem Filtererklärungen vorgenommen werden.
V.
Zum Beispiel:
<! docType html> <html ng-app = "xmpl"> <head> <script src = "http://code.angularjs.org/angular-1.0.2.min {{Begrüßung}}! </div> </body> </html> [/code] script.js: [code] angular.module ('xmpl.service', []). // Service Modul Value ('Begrüßer', {// benutzerdefinierter Begrüßer -Objekt Salutation: 'Hallo', Lokalisierung: Funktion (Lokalisierung) {this.salutation = lokalisierung value ('user', {// benutzerdefinierte Benutzerobjektlade: Funktion (Name) {this.name = name;}}); Angular.module ('xmpl.directive', []); // Befehlsmodul Angular.module ('xmpl.filter', []); // Filtermodul Angular.module ('xmpl', ['xmpl.service', 'xmpl.directive', 'xmpl.filter']). // Modul XMPL hängt vom Modulauslauf ab (Funktion (Begrüßer, Benutzer) im Array {// den Code initialisieren. Wenn die Anwendung startet, Begrüßer. greeter.greet (user.name);}Der Grund für diese Aufteilung ist, dass Sie häufig den Initialisierungscode in Ihren Tests ignorieren müssen, da diese Codes schwieriger zu testen sind. Durch die Ausspaltung kann es im Test leicht ignoriert werden. Der Test kann auch genauer sein, indem nur Module im Zusammenhang mit dem aktuellen Test geladen werden. Das obige ist nur ein Vorschlag. Sie können sicher sein, dass Sie es entsprechend Ihrer spezifischen Situation anpassen können.
Ein Modul ist eine Sammlung einer Reihe von Konfigurationen und Codeblöcken, die der Anwendung in der Startphase angeschlossen sind. Ein einfachste Modul besteht aus zwei Sätzen von Codeblöcken:
Konfigurationscodeblock - Führen Sie während der Injektions- und Konfigurationsphase der Injektionsanbieter aus. Nur der Injektionsanbieter und Konstanten können in den Konfigurationsblock injiziert werden. Dies soll verhindern, dass der Dienst im Voraus initialisiert wird, bevor er konfiguriert wird.
Code Block ausführen - Führen Sie nach dem Erstellen des Injektors aus und werden zum Starten der Anwendung verwendet. Nur Fälle und Konstanten können in den Laufblock injiziert werden. Dies soll verhindern, dass die Systemkonfiguration nach dem Betrieb auftritt.
Code -Implementierung:
Angular.module ('MyModule', []). config (function (injectable) {// Provider-Injector-Konfigurationscode-Block // Dies ist ein Beispiel für den Konfigurationsblock. // Sie können so viele davon haben, wie Sie möchten. // Sie können nur Anbieter (nicht Instanzen) // in die Konfigurationsblöcke injizieren.}). run (function (injectable) {// Instance-Injector-Konfigurationscode-Block // Dies ist ein Beispiel für einen Auslaufblock. // Sie können so viele davon haben, wie Sie möchten. // Sie können nur Instanzen (nicht Anbieter) // in die Auslaufblöcke injizieren});Module haben auch einige einfache Möglichkeiten zum Konfigurieren, und die Verwendung dieser Verwendung entspricht der Verwendung von Codeblöcken. Zum Beispiel:
Angular.module ('MyModule', []). Wert ('a', 123). factory ('a', function () {return 123;}). Richtlinie ('Directiveame', ...). filter ('filtername', ...); // ist gleich asangular.module ('MyModule', []). config (function ($ care, $ compileProvider, $ filterProvider) {$ ciples.value ('a', 123) $ ciples.factory ('a', function () {return 123;}) $ compileProvider.directive ('DirectVeNoce', ...).Die Konfigurationsblöcke werden in der Reihenfolge der Registrierung in $ care, $ compileProvider, $ filterProvider und $ filterProvider angewendet. Die einzige Ausnahme ist die Definition von Konstanten, die immer zu Beginn des Konfigurationsblocks platziert werden sollten.
Laufblöcke ähneln die Hauptmethode in AngularJs. Ein Laufblock ist ein Code, der zum Starten der Anwendung verwendet wird. Es wird ausgeführt, nachdem alle Dienste konfiguriert sind und alle Injektoren erstellt werden. Ausführungsblöcke enthalten normalerweise einen schwer zu testenden Code, sodass sie in separaten Modulen geschrieben werden sollten, damit sie während der Einheitstests ignoriert werden können.
Ein Modul kann andere Module als Abhängigkeiten auflisten. "Abhängig von einem bestimmten Modul" bedeutet, dass das abhängige Modul vor dem Modul geladen werden muss. Mit anderen Worten, der Konfigurationsblock des abhängigen Moduls wird vor dem Konfigurationsblock dieses Moduls ausgeführt. Gleiches gilt für das Ausführen von Blöcken. Jedes Modul kann nur einmal geladen werden, auch wenn es von mehreren Modulen abhängt.
Ein Modul ist eine Methode zur Verwaltung von $ Injector -Konfiguration und hat nichts mit dem Laden des Skripts zu tun. Es gibt viele Bibliotheken zum Laden von Steuermodulen im Internet, die mit AngularJs verwendet werden können. Da Module beim Laden nichts tun, können sie in beliebiger Reihenfolge oder parallel geladen werden