AngularJS -Modul
Das Modul definiert eine Anwendung.
Ein Modul ist ein Behälter für verschiedene Teile einer Anwendung.
Ein Modul ist ein Container für den Anwendungscontroller.
Der Controller gehört normalerweise zu einem Modul.
Module erstellen
Sie können Module durch die Angular.modul -Funktion von AngularJs erstellen:
<div ng-App = "myApp"> ... </div> <script> var app = angular.module ("myapp", []); </script>Der Parameter "MyApp" entspricht dem HTML -Element, das die Anwendung ausführt.
Jetzt können Sie Controller, Anweisungen, Filter usw. in Ihre AngularJS -Anwendung hinzufügen.
Fügen Sie einen Controller hinzu
Sie können die NG-Controller-Anweisung verwenden, um den Controller der Anwendung hinzuzufügen:
AngularJS -Instanz
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "myctrl"> {{{FirstName + "" + Lastname}} </div> <script> var app = angular.module ("myApp", []); app.controller ("myctrl", Funktion ($ scope) {$ scope.firstname = "$"; "Doe";}); </script> </body> </html>Laufeffekt:
John Doe
Sie können mehr über Controller im AngularJS -Controller -Kapitel erfahren.
Befehl hinzufügen
AngularJS bietet viele integrierte Anweisungen, mit denen Sie Ihrer Anwendung Funktionen hinzufügen können.
Vollständige Anweisungen finden Sie im AngularJS Reference -Handbuch.
Darüber hinaus können Sie Module verwenden, um Ihre eigenen Anweisungen für Ihre Bewerbung hinzuzufügen:
AngularJS -Instanz
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" = angular.module ("myapp", []); app.directive ("Runoobdirective", function () {return {template: "Ich habe es im Richtungskonstruktor erstellt!"};}); </script> </body> </html>Auslaufergebnisse:
Ich habe es im Richtlinienkonstruktor erstellt!
Weitere Informationen zu Direktiven im Kapitel AngularJS -Richtlinien erfahren Sie.
Module und Controller sind in JS -Dateien enthalten
In der Regel enthalten AngularJS -Anwendungen Module und Controller in JavaScript -Dateien.
Im folgenden Beispiel enthält "MyApp.js" den Definer des Anwendungsmoduls, und die "myctrl.js" -Datei enthält den Controller:
AngularJS -Instanz
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "myctrl"> {{{astname + "" + lastname}} </div> <script src = "myapp.js"> </script> <script src = "myctrl.js"> </script> </body> </html>Auslaufergebnisse:
John Doe
myapp.js
var app = angular.module ("myapp", []);
Hinweis In der Moduldefinition wird der Parameter [] verwendet, um die Abhängigkeiten des Moduls zu definieren.
Die Klammern [] geben an, dass das Modul keine Abhängigkeiten hat. Wenn es eine Abhängigkeit gibt, wird der Name der Abhängigkeit in die Klammern geschrieben.
myctrl.js
app.Controller ("myctrl", function ($ scope) {$ scope.firstname = "John"; $ scope.lastName = "doe";});Funktionen wirken sich auf den globalen Namespace aus
Globale Funktionen sollten in JavaScript vermieden werden. Weil sie durch andere Skriptdateien leicht überschrieben werden.
Mit dem AngularJS -Modul können alle Funktionen unter diesem Modul abgebildet werden, wodurch dieses Problem vermieden wird.
Wann wird die Bibliothek geladen?
Hinweis: In unserer Instanz werden alle AngularJS -Bibliotheken am Kopf des HTML -Dokuments geladen.
Für HTML -Anwendungen wird im Allgemeinen empfohlen, alle Skripte am unteren Rand des <body> -Elements zu platzieren.
Dadurch wird die Ladegeschwindigkeit der Webseite erhöht, da das Laden von HTML nicht dem Laden des Skripts unterliegt.
In unseren multiplen AngularJS -Instanzen sehen Sie, dass die AngularJS -Bibliothek im Bereich <kopf> des Dokuments geladen ist.
In unserem Fall wird AngularJS im <kopf> -Element geladen, da der Aufruf nach Angular.module erst nach dem Laden der Bibliothek hergestellt werden kann.
Eine andere Lösung besteht darin, die AngularJS -Bibliothek in das <Body> -Element zu laden, muss jedoch vor Ihrem AngularJS -Skript platziert werden:
AngularJS -Instanz
<! DocType html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "myctrl"> {{{FirstName + "" + Lastname}} </div> <script> var app = angular.module ("myApp", []); app.controller ("myctrl", Funktion ($ scope) {$ scope.firstname = "$"; "Doe";}); </script> </body> </html>Auslaufergebnisse:
John Doe
Das obige ist eine Zusammenstellung der AngularJS -Modulinformationen, und wir werden sie später weiter hinzufügen. Ich hoffe, dass es helfen kann, Freunde zu programmieren.