AngularJS-Module
Ein AngularJS-Modul definiert eine Anwendung.
Das Modul ist ein Container für die verschiedenen Teile einer Anwendung.
Das Modul ist ein Container für die Anwendungscontroller.
Controller gehören immer zu einem Modul.
Erstellen eines Moduls
Ein Modul wird mithilfe der AngularJS-Funktion erstellt angular.module
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
Der Parameter "myApp" bezieht sich auf ein HTML-Element, in dem die Anwendung ausgeführt wird.
Jetzt können Sie Ihrer AngularJS-Anwendung Controller, Direktiven, Filter und mehr hinzufügen.
Controller hinzufügen
Fügen Sie Ihrer Anwendung einen Controller hinzu und verweisen Sie mit der
ng-controllerAnweisung auf 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
= "John";
$scope.lastName
= "Doe";
});
</script>
Später in diesem Tutorial erfahren Sie mehr über Controller.
Direktive hinzufügen
AngularJS verfügt über eine Reihe integrierter Anweisungen, mit denen Sie Ihrer Anwendung Funktionen hinzufügen können.
Eine vollständige Referenz finden Sie in unserer AngularJS-Richtlinienreferenz .
Darüber hinaus können Sie das Modul verwenden, um Ihre Anwendungen um eigene Anweisungen zu ergänzen:
Beispiel
<div ng-app="myApp" w3-test-directive></div>
<script>
var app =
angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
template : "I was made in a directive constructor!"
};
});
</script>
Später in diesem Tutorial erfahren Sie mehr über Direktiven.
Module und Controller in Dateien
In AngularJS-Anwendungen ist es üblich, das Modul und die Controller in JavaScript-Dateien abzulegen.
In diesem Beispiel enthält „myApp.js“ eine Anwendungsmoduldefinition, während „myCtrl.js“ den Controller enthält:
Beispiel
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/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", []);
Der Parameter [] in der Moduldefinition kann verwendet werden, um abhängige Module zu definieren.
Ohne den Parameter [] erstellen Sie kein neues Modul, sondern rufen ein vorhandenes ab.
myCtrl.js
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName= "Doe";
});
Funktionen können den globalen Namensraum verschmutzen
Globale Funktionen sollten in JavaScript vermieden werden. Sie können leicht von anderen Skripten überschrieben oder zerstört werden.
AngularJS-Module reduzieren dieses Problem, indem sie alle Funktionen lokal im Modul halten.
Wann die Bibliothek geladen werden soll
Während es in HTML-Anwendungen üblich ist, Skripte am Ende des
<body>Elements zu platzieren, wird empfohlen, dass Sie die AngularJS-Bibliothek entweder in der <head>oder am Anfang der <body>.
Dies liegt daran, dass Aufrufe von angular.moduleerst kompiliert werden können, nachdem die Bibliothek geladen wurde.
Beispiel
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/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
= "John";
$scope.lastName
= "Doe";
});
</script>
</body>
</html>