AngularJS- Modul

Ein Modul definiert eine Anwendung.

Module sind Container für die verschiedenen Bestandteile einer Anwendung.

Module sind Container für Anwendungs-Controller.

Controller gehören normalerweise zu einem Modul.

Ein Modul erstellen

Sie können dieangular.module-Funktion von AngularJS verwenden, um ein Modul zu 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 Ihrer AngularJS-Anwendung Controller, Direktiven, Filter und so weiter hinzufügen.

Einen Controller hinzufügen

Sie können dieng-controller-Direktive verwenden, um der Anwendung einen Controller hinzuzufügen:

AngularJS-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>

Selbst ausprobieren »

Sie können im KapitelAngularJS Controllersmehr über Controller lernen.

Eine Direktive hinzufügen

AngularJS bietet viele integrierte Direktiven, mit denen Sie Ihrer Anwendung Funktionalität hinzufügen können.

Eine vollständige Referenz finden Sie imAngularJS-Referenzhandbuch。

Darüber hinaus können Sie Module verwenden, um Ihrer Anwendung eigene Direktiven hinzuzufügen:

AngularJS-Beispiel

<div ng-app="myApp" example-directive></div>

<script>

var app = angular.module("myApp", []);

app.directive("exampleDirective", function() {
    return {
        template : "Ich wurde im Konstruktor der Direktive erstellt!"
    };
});
</script>

Selbst ausprobieren »

ImAngularJS-DirektivenKapitel können Sie mehr über Direktiven erfahren.

Module und Controller sind in JS-Dateien enthalten

Normalerweise enthalten AngularJS-Anwendungen Module und Controller in JavaScript-Dateien.

Im folgenden Beispiel enthält "myApp.js" die Definition des Anwendungsmoduls und die Datei "myCtrl.js" enthält den Controller:

AngularJS-Beispiel

<!DOCTYPE html>
<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 + " " + lastName }}
</div>

<script src="myApp.js"></script>
<script src="myCtrl.js"></script>

</body>
</html>

Selbst ausprobieren »

myApp.js

var app = angular.module("myApp", []);

Note In der Moduldefinition wird der Parameter [] verwendet, um die Abhängigkeiten des Moduls zu definieren.
Die eckigen Klammern [] zeigen an, dass das Modul keine Abhängigkeiten hat; falls Abhängigkeiten vorhanden sind, werden die Namen der abhängigen Module in die Klammern geschrieben.

myCtrl.js

app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName= "Doe";
});

Funktionen wirken sich auf den globalen Namensraum aus

Globale Funktionen sollten in JavaScript vermieden werden, da sie leicht von anderen Skriptdateien überschrieben werden können.

AngularJS-Module fassen alle Funktionen unter dem Modul zusammen, wodurch dieses Problem vermieden wird.

Wann sollte die Bibliothek geladen werden?

Note In unseren Beispielen werden alle AngularJS-Bibliotheken im head-Bereich des HTML-Dokuments geladen.

Für HTML-Anwendungen wird normalerweise empfohlen, alle Skripte am Ende des <body>-Elements einzufügen.

Dies verbessert die Ladegeschwindigkeit der Seite, weil das Laden von HTML nicht durch das Laden von Skripten eingeschränkt wird.

In vielen unserer AngularJS-Beispiele werden Sie sehen, dass die AngularJS-Bibliothek im <head>-Abschnitt des Dokuments geladen wird.

In unseren Beispielen wird AngularJS im <head>-Element geladen, weil Aufrufe von angular.module erst erfolgen können, nachdem die Bibliothek vollständig geladen wurde.

Eine andere Lösung besteht darin, die AngularJS-Bibliothek im <body>-Element zu laden, aber sie muss vor Ihren AngularJS-Skripten platziert werden:

AngularJS-Beispiel

<!DOCTYPE html>
<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 + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>

</body>
</html>

Selbst ausprobieren »
Andere Erweiterungen