AngularJS-Module
- Vorherige Seite AngularJS- Ausdrücke
- Nächste Seite AngularJS- Anweisungen
AngularJS 模块定义了一个应用程序。
模块是应用程序不同部分的容器。
模块是应用程序控制器的容器。
控制器始终属于某个模块。
创建模块
通过使用 AngularJS 函数，angular.module 创建一个模块：
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
"myApp"-Parameter bezieht sich auf das HTML-Element, in dem die Anwendung läuft.
Jetzt können Sie in AngularJS-Anwendungen Controller, Anweisungen, Filter und mehr hinzufügen.
Controller hinzufügen
Fügen Sie einem Ihrer Anwendungen einen Controller hinzu und verwenden ng-controller Die Anweisung referenziert den Controller:
Beispiel
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "Bill";
$scope.lastName = "Gates";
});
</script>
Sie werden im späteren Teil dieses Tutorials mehr über Controller erfahren.
Anweisungen hinzufügen
AngularJS hat eine Reihe von integrierten Anweisungen, die Sie verwenden können, um Funktionen zu Ihrer Anwendung hinzuzufügen.
Für eine vollständige Referenz besuchen Sie bitte unsere AngularJS-Anweisungsreferenz.
Darüber hinaus können Sie Ihrem Anwendungsmodul Ihre eigenen Anweisungen hinzufügen:
Beispiel
<div ng-app="myApp" w3-test-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
return {
template : "Ich wurde in einem Anweisungs-Constructor erstellt!"
};
});
</script>
Sie werden im späteren Teil dieses Tutorials ausführlich über Anweisungen erfahren.
Module und Controller in der Datei
Es ist in AngularJS-Anwendungen sehr häufig, Module und Controller in JavaScript-Dateien zu platzieren.
In diesem Beispiel enthält "myApp.js" die Moduldefinition der Anwendung und "myCtrl.js" den Controller:
Beispiel
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script src="myApp.js"></script>
<script src="myCtrl.js"></script>
</body>
</html>
myApp.js
var app = angular.module("myApp", []);
Die []-Parameter in der Moduldefinition können verwendet werden, um abhängige Module zu definieren.
Wenn Sie keine []-Parameter haben, erstellen Sie nicht ein neues Modul, sondern rufen ein bestehendes Modul ab.
myCtrl.js
app.controller("myCtrl", function($scope) {
$scope.firstName = "Bill";
$scope.lastName= "Gates";
});
Funktionen könnten den globalen Namensraum verunreinigen
In JavaScript sollten globale Funktionen vermieden werden. Sie sind leicht von anderen Skripten überschrieben oder beschädigt zu werden.
AngularJS-Module reduzieren dieses Problem, indem sie alle Funktionen lokal im Modul behalten.
Wann Bibliotheken laden
Obwohl es in HTML-Anwendungen sehr häufig ist, Skripte am <body> Ende der Elemente ist sehr häufig, aber es wird empfohlen, dass Sie <head> oder <body> am Anfang der Bibliothek AngularJS laden.
Das liegt daran, dass nur nach dem Laden der Bibliothek der Code kompiliert werden kann angular.module Aufruf.
Beispiel
<!DOCTYPE html>
<html>
<body>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "Bill";
$scope.lastName = "Gates";
});
</script>
</body>
</html>
- Vorherige Seite AngularJS- Ausdrücke
- Nächste Seite AngularJS- Anweisungen
