1. Was ist ein Modul?
Viele Anwendungen verfügen über eine Hauptmethode für Initialisierung, Laden (sind Drähte?) Und Startanwendungen. Angular Application erfordert nicht die Hauptmethode. Stattdessen liefert das Modul ein deklaratives Formular mit einem bestimmten Zweck und einer beschreibenden Beschreibung der Beginn der Anwendung. Dies gibt mehrere Vorteile:
2. Die Grundlagen
Wir sind gespannt darauf, wie man das Hello World -Modul zum Laufen bringt. Hier sind einige wichtige Dinge, auf die Sie achten sollten:
Modul -API (http://code.angularjs.org/1.0.2/docs/api/angular.module)
Beachten Sie das in <html ng-App = "MyApp"> erwähnte MyApp-Modul, mit dem der Launcher das von uns definierte MyApp-Modul starten kann.
<! DocType html> <html lang = "zh-cn" ng-App = "MyApp"> <kopf> <meta charset = "utf-8"> <titels> Basics </title> <style type = "text/csS"> .ng-cloak {display: keine; } </style> </head> <body> <div> {{'Kitty' | GREET}} </div> <script src = "../ Angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javaScript"> var simpleemodule = angular.module ("myApp", []); simimodule.filter ("greet", function () {return function (name) {return "hello" + name + "!";}}); </script> </body> </html>3. (Empfohlene Einrichtung) Empfohlene Einrichtung
Obwohl das obige Beispiel einfach ist, handelt es sich nicht um eine große Anwendung. Wir empfehlen, Ihre Anwendung wie folgt in mehrere Module aufzuteilen:
Der Grund für diese Teilung ist, dass wir beim Testen häufig den Initialisierungscode ignorieren müssen, der den Test erschwert. Durch die Aufteilung des Code in separate Module ist es leicht zu ignorieren, dass dieser Code in Tests. Auf diese Weise können wir uns mehr auf das Laden des entsprechenden Moduls zum Testen konzentrieren.
Das obige ist nur ein Vorschlag, Sie können es so machen, wie Sie möchten.
4. Modulbelastung und Abhängigkeiten (Modulbelastung und Abhängigkeiten)
Ein Modul ist eine Sammlung von Konfigurationen, die Blöcke ausführen, die beim Starten der Anwendung angewendet werden. In seiner einfachsten Form besteht es aus zwei Arten von Blöcken:
1. Konfigurationsblöcke: Im Prozess der Anbieterregistrierung und -konfiguration ausgeführt. Nur Anbieter und konstant (konstant?) Sie können in Konfigurationsblöcke injiziert werden. Dies soll den Unfall vermeiden, dass der Dienst ausgeführt wird, bevor der Dienst konfiguriert ist.
2. Ausführen von Blöcken: Ausführen nach dem Erstellen des Injektors ausführen und zum Starten der Anwendung verwendet. Nur Fälle und Konstanten können in den Laufblock injiziert werden. Dies soll eine weitere Ausführung der Systemkonfiguration während des Programmbetriebs vermeiden.
Angular.module ('MyModule', []). config (function (injectable) {// Provider-Injector // Hier ist ein Beispiel für den Konfigurationsblock // Wir können n solcher Dinge abrufen // Wir können Anbieter (nicht Instanzen, nicht Instanzen) in den Konfigurationsblock} injizieren. run (function (injectable) {// instance-injector // Hier ist ein Beispiel für den Auslaufblock // Wir können n solcher Dinge erhalten // Wir können nur Instanzen (Instanzen) (nicht Anbieter) in den Auslaufblock} injizieren);a) Konfigurationsblöcke
Es gibt eine bequeme Möglichkeit, dies im Modul zu tun, was dem Konfigurationsblock entspricht. Zum Beispiel:
Angular.module ('MyModule', []). Wert ('a', 123). factory ('a', function () {return 123;}). Richtlinie ('Directiveame', ...). filter ('filtername', ...); // entspricht Angular.module ('MyModule', []). config (function ($ care, $ compileProvider, $ filterProvider) {$ ciples.value ('a', 123) $ ciples.factory ('a', function () {return 123;}) $ compileProvider.directive ('DirectVeNoce', ...).Die Reihenfolge, in der Konfigurationsblöcke angewendet werden, stimmt mit der Reihenfolge überein, in der sie registriert sind. Für konstante Definitionen handelt es sich um einen zusätzlichen Fall, d. H. Die konstante Definition zu Beginn der Konfigurationsblöcke.
b) Blocks ausführen (Anwendungsblock)
Run Block ist am nächsten an der Hauptmethode in Angular. Der Auslaufblock ist der Code, der ausgeführt werden muss, um die Anwendung zu starten. Es wird ausgeführt, nachdem alle Servicekonfigurationen und Injektoren erstellt wurden. Ausführen von Blöcken enthalten normalerweise Code, der in Unit -Test schwieriger ist. Aus diesem Grund sollten diese Codes in einem separaten Modul definiert werden, damit sie in Unit -Tests ignoriert werden können.
c) Abhängigkeiten (Abhängigkeiten)
Ein Modul kann andere Module auflisten, von denen es abhängt. Wenn Sie sich auf ein Modul verlassen, muss das angeforderte Modul (zuverlässig) geladen werden, bevor das Modul angefordert wird (das Modul, das von anderen Modulen abhängen muss, der Anforderer) geladen wird. Mit anderen Worten, der Konfigurationsblock des angeforderten Moduls wird vor den Konfigurationsblöcken oder dem erforderlichen Modul ausgeführt. Wie erklärt man das oder hier?). Gleiches gilt für Run Block. Jedes Modul kann nur einmal geladen werden, auch wenn mehrere andere Module erforderlich sind.
d) Asynchrone Belastung (asynchrones Laden)
Das Modul ist eine der Möglichkeiten zur Verwaltung der $ Injector -Konfiguration, ohne dass Skripte in die VM geladen werden. Es gibt jetzt fertige Projekte, die speziell für das Laden von Skripts entwickelt wurden und auch in Angular verwendet werden können. Da Module beim Laden nichts tun, können sie in beliebiger Reihenfolge in die VM geladen werden. Skriptlader können diese Funktion verwenden, um paralleles Laden durchzuführen.
5. Unit -Tests
In der einfachsten Form der Unit -Tests besteht darin, eine Teilmenge einer Anwendung im Test zu instanziieren und dann auszuführen. Wichtig ist, dass wir erkennen müssen, dass für jeden Injektor jedes Modul nur einmal geladen wird. Normalerweise hat eine Anwendung nur einen Injektor. Bei Tests hat jeder Testfall seinen Injektor, was bedeutet, dass in jedem VM das Modul mehrmals geladen wird. Durch das korrekte Erstellen des Moduls hilft das Testen der Unit wie im folgenden Beispiel:
In diesem Beispiel bereiten wir uns an, dass das folgende Modul definiert ist:
Angular.module ('Begrüßung', []). Factory ('alert', Funktion ($ Fenster) {Rückgabefunktion (Text) {$ window.alert (text);};}). value ('salutation', 'Hallo'). Factory ('Greet', Funktion (Alarm, Salution) {return function (name) {name);Schreiben wir einige Testfälle:
Beschreiben ('MyApp', function () {// Laden des Moduls der Anwendungsantwort und dann das angegebene Testmodul, das $ Fenster in die Scheinversion umschreibt. Real $ ist das folgende $. $ windy) {Greet ('World'); $.Value ('alert', alertspy);