AngularJS-Einführungs-Tutorial Hello World!_AngularJS

Eine gute Möglichkeit, mit dem Erlernen von AngularJS zu beginnen, besteht darin, die klassische Anwendung „Hello World!“ zu erstellen:

1. Erstellen Sie mit Ihrem bevorzugten Texteditor eine HTML-Datei, zum Beispiel: helloworld.html.
2. Kopieren Sie den folgenden Quellcode in Ihre HTML-Datei.
3. Öffnen Sie diese HTML-Datei in einem Webbrowser.

Quellcode:

Code kopieren Der Code lautet wie folgt:

            


Hallo {{'World'}}!

Bitte führen Sie den obigen Code in Ihrem Browser aus, um den Effekt zu sehen.

Jetzt schauen wir uns den Code genauer an und sehen, was los ist. Wenn die Seite geladen wird, weist das Tag ng-app AngularJS an, die gesamte HTML-Seite zu verarbeiten und die Anwendung zu booten:

Code kopieren Der Code lautet wie folgt:

Diese Zeile lädt das AngularJS-Skript:

Code kopieren Der Code lautet wie folgt:

(Einzelheiten dazu, wie AngularJS die gesamte HTML-Seite verarbeitet, finden Sie unter Bootstrap.)

Schließlich ist der Textkörper im Tag die Vorlage, die zur Anzeige unserer Begrüßung in der Benutzeroberfläche verwendet wird:

Code kopieren Der Code lautet wie folgt:

Hallo {{'World'}}!

Beachten Sie, dass der mit doppelten geschweiften Klammern {{}} markierte Inhalt der in der Begrüßung gebundene Ausdruck ist. Dieser Ausdruck ist eine einfache Zeichenfolge „Welt“.

Als nächstes schauen wir uns ein interessanteres Beispiel an: die Verwendung von AngularJS, um einen dynamischen Ausdruck an unseren Begrüßungstext zu binden.

Hallo AngularJS-Welt!

Dieses Beispiel zeigt die bidirektionale Datenbindung in AngularJS:

1. Bearbeiten Sie das zuvor erstellte Dokument helloworld.html.
2. Kopieren Sie den folgenden Quellcode in Ihre HTML-Datei.
3. Aktualisieren Sie das Browserfenster.

Quellcode:

Code kopieren Der Code lautet wie folgt:

            


Ihr Name:
                                                                                      Hallo {{dein Name ||. 'Welt'}}!

Bitte führen Sie den obigen Code in Ihrem Browser aus, um den Effekt zu sehen.

Zu diesem Beispiel sind einige wichtige Dinge zu beachten:

1. Der Texteingabebefehl ist an eine Modellvariable namens yourname gebunden.
2. Das Tag mit der doppelten geschweiften Klammer fügt dem Begrüßungstext die Modellvariable „IhrName“ hinzu.
3. Sie müssen für diese Anwendung keinen zusätzlichen Ereignis-Listener registrieren oder einen Ereignishandler hinzufügen!

Versuchen Sie nun, Ihren Namen in das Eingabefeld einzugeben. Der eingegebene Name wird aktualisiert und sofort in der Begrüßung angezeigt. Dies ist das Konzept der bidirektionalen Datenbindung in AngularJS. Alle Änderungen am Eingabefeld werden sofort in den Modellvariablen widergespiegelt (eine Richtung), und alle Änderungen an den Modellvariablen werden sofort im Begrüßungstext widergespiegelt (die andere Richtung).

Analyse von AngularJS-Anwendungen

In diesem Abschnitt werden die drei Komponenten einer AngularJS-Anwendung beschrieben und erläutert, wie sie dem Model-View-Controller-Entwurfsmuster zugeordnet werden:

Vorlagen

Vorlagen sind Dateien, die Sie in HTML und CSS schreiben und die die Ansichten Ihrer Anwendung darstellen. Sie können HTML neue Elemente und Attribut-Tags als Anweisungen für den AngularJS-Compiler hinzufügen. Der AngularJS-Compiler ist vollständig erweiterbar, was bedeutet, dass Sie mit AngularJS Ihr eigenes HTML-Markup in HTML erstellen können!

Anwendungslogik (Logic) und Verhalten (Behavior)

Anwendungslogik und -verhalten sind Controller, die Sie in JavaScript definieren. AngularJS unterscheidet sich von Standard-AJAX-Anwendungen darin, dass Sie keine zusätzlichen Listener oder DOM-Controller schreiben müssen, da diese bereits in AngularJS integriert sind. Diese Funktionen erleichtern das Schreiben, Testen, Warten und Verstehen Ihrer Anwendungslogik.

Modelldaten (Daten)

Modelle werden aus Eigenschaften von AngularJS-Bereichsobjekten abgeleitet. Die Daten im Modell können Javascript-Objekte, Arrays oder primitive Typen sein. Wichtig ist, dass sie alle zu AngularJS-Bereichsobjekten gehören.

AngularJS verwendet den Bereich, um die bidirektionale Synchronisierung zwischen dem Datenmodell und der Benutzeroberfläche der Ansichtsschnittstelle aufrechtzuerhalten. Sobald sich der Modellstatus ändert, aktualisiert AngularJS sofort die Ansichtsoberfläche und umgekehrt.

Darüber hinaus bietet AngularJS auch einige sehr nützliche Servicefunktionen:

1. Zu den zugrunde liegenden Diensten gehören Abhängigkeitsinjektion, XHR, Caching, URL-Routing und Browser-Abstraktionsdienste.
2. Sie können auch Ihre eigenen spezifischen Anwendungsdienste erweitern und hinzufügen.
3. Mit diesen Diensten können Sie ganz bequem WEB-Anwendungen schreiben.