AngularJS Modul
Modul definiert eine Anwendung.
Modul ist ein Container in verschiedenen Teilen der Anwendung.
Controller-Modul ist eine Container-Anwendung.
Der Controller gehören üblicherweise zu einem Modul.
Erstellen Sie ein Modul
Sie können ein Modul von AngularJS vonangular.module Funktion zu erstellen:
<Script>
var app = angular.module ( "myApp" , []);
"MyApp" Parameter entspricht der Ausführung der Anwendung von HTML-Elementen.
Jetzt können Sie einen Controller Anweisungen, Filter usw. in AngularJS Anwendungen hinzuzufügen.
In-Controller
Sie könnenng-Controller Anweisungen hinzuzufügen Anwendungen Controller verwenden:
AngularJS Beispiele
{{Firstname + "" + nachName }}
</ Div>
<Script>
app.controller ( "myCtrl", function ( $ scope) {
$ Scope.firstName = "John";
$ Scope.lastName = "Doe";
});
Versuchen »
Sie können AngularJS Controller erfahren Sie mehr Wissen über den Controller - Abschnitt.
In Anweisungen
AngularJS bietet viele integrierte Befehle, können Sie sie Funktionalität in Ihrer Anwendung hinzufügen können.
Eine vollständige Anleitung finden Sie in den Inhalt zu finden AngularJS Referenzhandbuch .
Darüber hinaus können Sie das Modul verwenden, um Ihre eigene Anweisung Anwendungen hinzuzufügen:
AngularJS Beispiele
<Script>
app.directive ( "w3bigDirective", function ( ) {
Rückkehr {
Vorlage: "habe ich die Anweisung Konstruktor!"
};
});
Versuchen »
Sie können AngularJS Richtlinien mehr Wissen über Anweisungsabschnitt erfahren.
Module und Steuerungen, die in der JS-Datei
Typischerweise AngularJS Anwendungsmodul und die Steuerung ist in der JavaScript-Datei enthalten.
In den folgenden Beispielen "myApp.js" die Definition der Programm-Anwendungsmodule enthält, "myCtrl.js" Datei enthält den Controller:
AngularJS Beispiele
<Html>
<Script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
<Body>
<Div ng-app = "myApp " ng-Controller = "myCtrl">
{{Firstname + "" + nachName }}
</ Div>
<Script src = "myApp.js"> </ script>
<Script src = "myCtrl.js"> </ script>
</ Body>
</ Html>
Versuchen »
myApp.js
 | In der Moduldefinition [] Parameter wird verwendet, Modulabhängigkeiten zu definieren. Klammern [] zeigt an, dass das Modul nicht angewiesen ist, wenn es Abhängigkeit ist, wird dann auf dem Modulnamen in Klammern geschrieben abhängen. |
|---|
myCtrl.js
$scope.firstName = "John";
$scope.lastName= "Doe";
});
Funktion wirkt sich auf den globalen Namespace
JavaScript sollte mit globalen Funktionen zu vermeiden. Da sie leicht mit einem anderen Skriptdatei abgedeckt werden.
AngularJS Modul Umfang so dass alle Funktionen in dem Modul, um das Problem zu vermeiden.
Beim Laden der Bibliothek?
| In unserem Beispiel alle AngularJS HTML-Dokument-Bibliotheken werden in den Kopf geladen. |
|---|
Für HTML-Anwendungen wird in der Regel für alle Skripte empfohlen werden im Boden des <body> Element platziert.
Dadurch wird die Seite Ladegeschwindigkeit zu erhöhen, da HTML nicht unterliegt Skript laden zu laden.
In unserem mehrfach AngularJS Beispiel werden Sie AngularJS Bibliothek geladen wird im <head> Bereich des Dokuments zu sehen.
In unserem Beispiel wird AngularJS im <head> -Element geladen, weil der Anruf erst nach Abschluss des Ladens der Bibliothek durchgeführt angular.module werden.
Eine andere Lösung ist AngularJS Bibliothek <body> Element zu laden, muss aber vor Ihrem AngularJS Skript platziert werden:
AngularJS Beispiele
<Html>
<Head>
<Meta charset = "UTF-8 ">
<Script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
</ Head>
<Body>
<Div ng-app = "myApp " ng-Controller = "myCtrl">
{{Firstname + "" + nachName }}
</ Div>
<Script>
var app = angular.module ( "myApp", []);
app.controller ( "myCtrl", function ($ scope) {
$ Scope.firstName = "John";
$ Scope.lastName = "Doe";
});
</ Script>
</ Body>
</ Html>
Versuchen »