AngularJS -Anwendung
Jetzt ist es an der Zeit, eine echte AngularJS Single -Page -Webanwendung (SPA) zu erstellen.
AngularJS -Anwendungsbeispiel
Sie haben genug über AngularJs gelernt und können jetzt Ihre erste AngularJS -Anwendung erstellen:
Wortanzahl verbleiben: 100
Anwendungserklärung
AngularJS -Instanz
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "mynotectrl"> <h2> Meine Notizen </h2> <textarea ng-model = "message" cols = "40" rows = "10"> </textArea> <p> <p> <button ng-klick = "speichern ()"> Save </button rema-teufly: <): ng-bind = "links ()"> </span> </p> <script src = "mynoteApp.js"> </script> <script src = "mynotectrl.js"> </script> </body> </html>
Auslaufergebnisse:
Wortanzahl verbleiben: 100
Anwendungsdatei "mynoteApp.js":
var app = angular.module ("mynoteapp", []);
Controller -Datei "mynotectrl.js":
app.Controller ("mynotectrl", function ($ scope) {$ scope.message = "";Das <html> -Element ist der Container für AngularJS-Anwendung: ng-App = "mynoteapp":
<html ng-app = "mynoteapp">
<Div> ist der Umfang des Controllers auf der HTML-Seite: ng-controller = "mynotectrl":
<div ng-controller = "mynotectrl">
Die NG-Model-Direktive bindet <textarea> an die Controller-Variable-Nachricht:
<textarea ng-model = "message" cols = "40" rows = "10"> </textArea>
Zwei NG-Klick-Ereignisse rufen die Controller-Funktionen Clear () und Save () an:
<Button ng-klick = "save ()"> speichern </button> <button ng-klick = "clear ()"> clear </button>
Die NG-Bind-Anweisung bindet die Controller-Funktion links () an <span>, um die verbleibenden Zeichen anzuzeigen:
Anzahl der links links: <span ng-bind = "links ()"> </span>
Die Anwendungsbibliotheksdatei muss geladen werden, nachdem AngularJs ausgeführt werden kann:
<script src = "mynoteApp.js"> </script> <script src = "mynotectrl.js"> </script>
AngularJS -Anwendungsarchitektur
Das obige Beispiel ist eine vollständige AngularJS Single Page Web Application (SPA).
Das <html> Element enthält die AngularJS-Anwendung (ng-App =).
Das <Div> -Element definiert den Umfang des AngularJS-Controllers (ng-controller =).
In einer Anwendung kann es aus vielen Controllern bestehen.
Die Anwendungsdatei (My ... app.js) definiert den Anwendungsmodellcode.
Ein oder mehrere Controller -Dateien (mein ... Strg.js) definieren den Controller -Code.
Zusammenfassung - Wie funktioniert es?
Die NG-App-Richtlinie befindet sich unter dem Wurzelelement der Anwendung.
Für eine einzelne Webanwendung (SPA) ist das Stamm der Anwendung normalerweise das <html> -Element.
Eine oder mehrere NG-Controller-Richtlinien definieren den Controller der Anwendung. Jeder Controller hat seinen eigenen Bereich :: Definierte HTML -Elemente.
AngularJS startet automatisch im HTML -Domcontent -Ereignis. Wenn die NG-App-Anweisung gefunden wird, lädt AngularJS das Modul in der Anweisung und erstellt NG-App als Wurzel der Anwendung.
Die Wurzel der Anwendung kann die gesamte Seite oder ein kleiner Teil der Seite sein. Wenn es sich um einen kleinen Teil handelt, wird sie schneller zusammengestellt und ausgeführt.
Das obige ist eine detaillierte Erklärung der einfachen Anwendung von AngularJs. Ich hoffe, es kann AngularJS -Programmierung helfen.