AngularJS -Anwendung
Jetzt ist es an der Zeit, eine echte AngularJS Single-Page-Webanwendung (SPA) zu erstellen.
Beispiel für eine AngularJS-Anwendung
Sie haben genug über AngularJS gelernt und können nun mit der Erstellung Ihrer ersten AngularJS-Anwendung beginnen:
Meine Notizen
Verbleibende Zeichen:100
Erklärung der Anwendung
AngularJS-Beispiele
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.net/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-controller="myNoteCtrl">
<h2>Meine Notizen</h2>
<p><textarea ng-model="message" cols="40" rows="10"></textarea></p>
<p>
<button ng-click="save()">Speichern</button>
<button ng-click="clear()">Löschen</button>
</p>
<p>Anzahl der verbleibenden Zeichen: <span ng-bind="left()"></span></p>
</div>
<script src="myNoteApp.js"></script>
<script src="myNoteCtrl.js"></script>
</body>
</html>
Selbst ausprobieren »
Die Anwendungsdatei "myNoteApp.js":
Die Controller-Datei "myNoteCtrl.js":
$scope.message = "";
$scope.left = function() {return 100 - $scope.message.length;};
$scope.clear = function() {$scope.message = "";};
$scope.save = function() {alert("Notiz gespeichert");};
});
Das <html>-Element ist die AngularJS-Anwendung: ng-app="myNoteApp" als Container:
Das <div>-Element ist der Geltungsbereich (Scope) des Controllers auf der HTML-Seite: ng-controller="myNoteCtrl":
Die ng-model-Direktive bindet die <textarea> an die Controller-Variable message:
Zweing-click-Ereignisse rufen die Controller-Funktionenclear()undsave() auf:
<button ng-click="clear()">Löschen</button>
ng-bind-Direktiven binden Controller-Funktionenleft()an <span>, um die verbleibenden Zeichen anzuzeigen:
Die Anwendungsbibliotheksdatei muss ausgeführt werden, nachdem AngularJS geladen wurde:
<script src="myNoteCtrl.js"></script>
Architektur einer AngularJS-Anwendung
Das obige Beispiel ist eine vollständige AngularJS Single-Page-Webanwendung (SPA).
Das <html>-Element enthält die AngularJS-Anwendung (ng-app=).
Das <div>-Element definiert den Gültigkeitsbereich des AngularJS-Controllers (ng-controller=).
Eine Anwendung kann viele Controller haben.
Die Anwendungsdatei (my...App.js) definiert den Anwendungsmodellcode.
Eine oder mehrere Controller-Dateien (my...Ctrl.js) definieren den Controllercode.
Zusammenfassung – Wie funktioniert es?
Die ng-app-Direktive wird am Stammelement der Anwendung platziert.
Bei einer Single-Page-Webanwendung (SPA) ist die Wurzel der Anwendung typischerweise das <html>-Element.
Eine oder mehrere ng-controller-Direktiven definieren die Controller der Anwendung. Jeder Controller hat seinen eigenen Gültigkeitsbereich: das definierte HTML-Element.
AngularJS startet automatisch beim HTML DOMContentLoaded-Ereignis. Wenn die ng-app-Direktive gefunden wird, lädt AngularJS das in der Direktive angegebene Modul und kompiliert die Anwendung mit ng-app als Wurzel.
Die Wurzel einer Anwendung kann die gesamte Seite oder nur ein kleiner Teil der Seite sein; wenn es ein kleiner Teil ist, wird sie schneller kompiliert und ausgeführt.
Weitere Erweiterungen