Eine gute Möglichkeit, AngularJs zu lernen, besteht darin, die klassische Anwendung "Hello World!" Zu erstellen:
1. Erstellen Sie eine HTML -Datei mit Ihrem bevorzugten Texteditor, zum Beispiel: helloWorld.html.
2. Kopieren Sie den folgenden Quellcode in Ihre HTML -Datei.
3. Öffnen Sie diese HTML -Datei in einem Webbrowser.
Quellcode:
Die Codekopie lautet wie folgt:
<! docType html>
<html ng-App>
<kopf>
<script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script>
</head>
<body>
Hallo {{'World'}}!
</body>
</html>
Bitte führen Sie den obigen Code in Ihrem Browser aus, um den Effekt zu sehen.
Schauen wir uns nun den Code genauer an und sehen, was los ist. Wenn die Seite geladen ist, fordert das Tag ng-App AngularJS an, die gesamte HTML-Seite zu verarbeiten und die Anwendung zu starten:
Die Codekopie lautet wie folgt:
<html ng-App>
Diese Zeile lädt das AngularJS -Skript:
Die Codekopie lautet wie folgt:
<script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script>
(Details zu AngularJs, die die gesamte HTML -Seite bearbeiten, siehe Bootstrap.)
Schließlich ist der Körper im Tag die Vorlage für die Anwendung, die unsere Grüße in der Benutzeroberfläche zeigt:
Die Codekopie lautet wie folgt:
Hallo {{'World'}}!
Beachten Sie, dass der Inhalt des mit doppelten Klammern getaggten {{}} der gebundene Ausdruck in der Begrüßung ist, die eine einfache Zeichenfolge 'Welt' ist.
Schauen wir uns im Folgenden ein interessanteres Beispiel an: Binden Sie einen dynamischen Ausdruck an unseren Grußtext mit AngularJs.
Hallo AngularJS World!
Dieses Beispiel zeigt die bidirektionale Datenbindung für AngularJs:
1. Bearbeiten Sie das zuvor erstellte HelloWorld.html -Dokument.
2. Kopieren Sie den folgenden Quellcode in Ihre HTML -Datei.
3.. Aktualisieren Sie das Browserfenster.
Quellcode:
Die Codekopie lautet wie folgt:
<! docType html>
<html ng-App>
<kopf>
<script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script>
</head>
<body>
Ihr Name: <Eingabe type = "text" ng-model = "yourname" placeholder = "World">
<hr>
Hallo {{yourname || 'Welt'}}!
</body>
</html>
Bitte führen Sie den obigen Code in Ihrem Browser aus, um den Effekt zu sehen.
Dieses Beispiel enthält die folgenden wichtigen Hinweise:
1. Texteingangsanweisung <Eingabe ng-model = "yourname" /> ist an eine Modellvariable mit dem Namen YourName gebunden.
2. Double STRACE -Marke Fügen Sie Ihre NAME -Modellvariable zum Begrüßungstext hinzu.
3. Sie müssen keinen Event -Hörer registrieren oder einen Event -Handler für die Anwendung hinzufügen!
Versuchen Sie nun, Ihren Namen in das Eingabefeld einzugeben, und der von Ihnen eingebene Name wird sofort aktualisiert und im Gruß angezeigt. Dies ist das Konzept der Zwei-Wege-Datenbindung von AngularJs. Alle Änderungen am Eingabefeld werden sofort in der Modellvariablen (One Direction) reflektiert, und alle Änderungen an der Modellvariablen werden sofort im Grußtext (die andere Richtung) reflektiert.
Analyse von AngularJS -Anwendungen
In diesem Abschnitt werden die drei Komponenten von AngularJS-Anwendungen beschrieben und erklärt, wie sie dem Entwurfsmuster für Modell-View-Controller-Entwürfe zugeordnet sind:
Vorlagen
Eine Vorlage ist eine Datei, die Sie in HTML und CSS schreiben, um die Ansicht der Anwendung zu präsentieren. Sie können HTML als Richtlinien für AngularJS Compiler neues Element- und Attribut -Tags hinzufügen. Der AngularJS -Compiler ist vollständig erweiterbar, was bedeutet, dass Sie mit AngularJS Ihre eigenen HTML -Tags in HTML erstellen können!
Anwendungslogik und Verhalten
Anwendungslogik und Verhalten sind die Controller, die Sie in JavaScript definieren. AngularJS unterscheidet sich von Standard -Ajax -Anwendungen. Sie müssen keinen Hörer oder DOM -Controller schreiben, da diese bereits in AngularJs integriert sind. Diese Funktionen machen Ihre Anwendungslogik einfach zu schreiben, zu testen, zu warten und zu verstehen.
Modelldaten (Daten)
Das Modell wird aus den Eigenschaften von angularjs abgeschotteten Objekten erweitert. Die Daten im Modell können ein JavaScript -Objekt, ein Array oder ein primitiver Typ sein, und es ist egal, es ist wichtig, dass sie alle zu AngularJs -Scoped -Objekten gehören.
AngularJS behält die bidirektionale Synchronisation zwischen dem Datenmodell und der Benutzeroberfläche der View -Schnittstelle durch den Umfang bei. Sobald sich der Modellzustand ändert, aktualisiert AngularJS die in der Sichtschnittstelle reflektierten Sichtschnittstellen sofort und umgekehrt.
Darüber hinaus bietet AngularJS auch einige sehr nützliche Servicefunktionen:
1. Die zugrunde liegenden Dienste umfassen Abhängigkeitsinjektion, XHR, Cache, URL -Routing- und Browser -Abstract -Dienste.
2. Sie können auch Ihre eigenen Anwendungsdienste erweitern und hinzufügen.
3. Diese Dienste können es für Sie sehr bequem machen, Webanwendungen zu schreiben.