Ein AngularJS Modul definiert eine Anwendung.
Das Modul ist ein Behälter für die verschiedenen Teile einer Anwendung.
Das Modul ist ein Behälter für die Anwendungs-Steuereinheiten.
Controller gehören immer zu einem Modul.
Erstellen eines Moduls
Ein Modul wird unter Verwendung der AngularJS Funktion erstellt angular.module
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>Der "myApp" Parameter bezieht sich auf ein HTML-Element, in dem die Anwendung ausgeführt wird.
Jetzt können Sie hinzufügen, Controller, Richtlinien, Filter und vieles mehr, um Ihre AngularJS Anwendung.
Hinzufügen eines Controllers
Fügen Sie einen Controller für Ihre Anwendung, und beziehen sich auf die Steuerung mit der ng-controller - Richtlinie:
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>
Versuch es selber " Sie werden mehr über Controller später in diesem Tutorial lernen.
Hinzufügen einer Richtlinie
AngularJS hat eine Reihe von integrierten in Richtlinien, die Sie Funktionalität in Ihrer Anwendung hinzufügen können.
Für eine vollständige Referenz finden Sie auf unserer AngularJS Referenzrichtlinie .
Darüber hinaus können Sie das Modul verwenden Sie Ihre eigenen Richtlinien, um Ihre Anwendungen hinzuzufügen:
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> Versuch es selber " Sie werden mehr über Richtlinien erfahren später in diesem Tutorial.
Module und Steuerungen in Dateien
Es ist üblich, in AngularJS Anwendungen das Modul und die Controller in JavaScript-Dateien zu setzen.
In diesem Beispiel "myApp.js" enthält ein Anwendungsmodul Definition, während "myCtrl.js" enthält den Controller:
Beispiel
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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>
Versuch es selber " myApp.js
var app = angular.module( "myApp" , []);
 | Der [] Parameter in der Moduldefinition kann verwendet werden, abhängig Module zu definieren. |
|---|
| Ohne die [] Parameter, erstellen Sie nicht ein neues Modul, aber das Abrufen einen vorhandenen. |
|---|
myCtrl.js
app.controller( "myCtrl" , function($scope) {
$scope.firstName = "John";
$scope.lastName= "Doe";
});
Funktionen können den globalen Namespace Verunreinigen
Globale Funktionen sollten in JavaScript vermieden werden. Sie lassen sich leicht von anderen Skripts überschrieben oder zerstört werden.
AngularJS Module dieses Problem reduziert, indem alle Funktionen lokal auf dem Modul zu halten.
Wenn die Bibliothek zu laden
Während es üblich , in HTML - Anwendungen ist Skripte am Ende des zu platzieren <body> Element, ist es empfehlenswert , dass Sie die AngularJS Bibliothek laden entweder im <head> oder am Anfang des <body> .
Dies liegt daran , Anrufe angular.module nur kompiliert werden , nachdem die Bibliothek geladen wurde.
Beispiel
<!DOCTYPE html>
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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>
Versuch es selber "