Heim > Artikel > Web-Frontend > AngularJS-Erste-Schritte-Tutorial (Zero): Bootstrap_AngularJS

AngularJS-Erste-Schritte-Tutorial (Zero): Bootstrap_AngularJS

WBOYOriginal: 2016-05-16 16:28:331306Durchsuche

Wir sind jetzt bereit, die AngularJS-Anwendung zu schreiben – phonecat. In diesem Schritt (Schritt 0) machen Sie sich mit wichtigen Quellcodedateien vertraut, lernen, eine Entwicklungsumgebung mit einem AngularJS-Seed-Projekt zu starten und die Anwendung im Browser auszuführen.

Geben Sie das Verzeichnis „angular-phonecat“ ein und führen Sie den folgenden Befehl aus:

Code kopieren Der Code lautet wie folgt:

git checkout -f step-0

Dieser Befehl setzt das Arbeitsverzeichnis des Phonecat-Projekts zurück. Es wird empfohlen, dass Sie diesen Befehl bei jedem Lernschritt ausführen und die Nummer im Befehl in die Nummer ändern, die Ihrem Lernschritt entspricht alle im Arbeitsverzeichnis vorgenommenen Änderungen.

Führen Sie den folgenden Befehl aus:

Code kopieren Der Code lautet wie folgt:

node scripts/web-server.js

Um den Server zu starten, fordert das Befehlszeilenterminal den HTTP-Server auf, der unter http://localhost:8000 ausgeführt wird. Durch Schließen des Terminals wird der Server nicht heruntergefahren. Geben Sie http://localhost:8000/app/index.html in den Browser ein, um auf unsere Phonecat-Anwendung zuzugreifen.

Jetzt sollten Sie unsere erste Anwendung im Browser gesehen haben. Sie ist sehr einfach, zeigt aber, dass unser Projekt zur Ausführung bereit ist.

Das in der Anwendung angezeigte „Nothing here“ besteht aus dem folgenden HTML-Code. Der Code enthält die Schlüsselelemente von AngularJS, die wir lernen müssen.

app/index.html

Code kopieren Der Code lautet wie folgt:

Meine HTML-Datei

Nichts hier {{'noch' '!'}}

Was macht der Code?

ng-app-Anweisung:

Code kopieren Der Code lautet wie folgt:

Die

ng-app-Direktive markiert den Geltungsbereich des AngularJS-Skripts. Das Hinzufügen des ng-app-Attributs zu bedeutet, dass der gesamte -Bereich gilt. Entwickler können die ng-app-Direktive auch lokal verwenden, beispielsweise

, und das AngularJS-Skript wird nur in diesem

ausgeführt.

AngularJS-Skript-Tag:

Code kopieren Der Code lautet wie folgt:

Diese Codezeile lädt das Skript „angular.js“ Wenn der Browser das Laden der gesamten HTML-Seite abgeschlossen hat, führt er das Skript „angular.js“ aus. Nachdem das Skript „angular.js“ ausgeführt wurde, sucht es nach dem HTML-Tag, das es enthält In der ng-app-Direktive definiert dieses Tag den Umfang der AngularJS-Anwendung.

Durch doppelte Klammern gebundener Ausdruck:

Code kopieren Der Code lautet wie folgt:

Hier ist nichts {{'noch' '!'}}

Diese Codezeile demonstriert die Kernfunktion von AngularJS-Vorlagen – Bindung. Diese Bindung besteht aus doppelten geschweiften Klammern {{}} und dem Ausdruck „yet“ „!“.

Diese Bindung teilt AngularJS mit, dass es den Ausdruck auswerten und das Ergebnis in das DOM einfügen muss. In den nächsten Schritten werden wir sehen, dass das DOM in Echtzeit aktualisiert werden kann, wenn sich das Ergebnis der Ausdrucksoperation ändert.

AngularJS-Ausdruck Angular-Ausdruck ist ein Code-Snippet, das dem AngularJS-Ausdruck ähnelt und nur im Bereich von AngularJS und nicht im gesamten DOM ausgeführt wird.

Bootstrap AngularJS-Anwendung

Das automatische Booten von AngularJS-Anwendungen über die ngApp-Direktive ist eine einfache Möglichkeit und für die meisten Situationen geeignet. In der fortgeschrittenen Entwicklung, beispielsweise bei der Verwendung von Skripten zum Laden von Anwendungen, können Sie Bootstrap auch verwenden, um AngularJS-Anwendungen manuell zu booten.

Es gibt drei wichtige Punkte im AngularJS-Anwendungs-Bootstrapping-Prozess:

1. Der Injektor wird verwendet, um eine Abhängigkeitsinjektion für diese Anwendung zu erstellen 2. Der Injektor erstellt den Root-Bereich als Bereich unseres Anwendungsmodells 3. AngularJS stellt eine Verknüpfung zum DOM im Root-Bereich her, beginnend mit dem mit ngApp markierten HTML-Tag, und verarbeitet nach und nach die Anweisungen und Bindungen im DOM.

Sobald die AngularJS-Anwendung gestartet ist, hört sie weiterhin auf die durch HTML ausgelösten Ereignisse des Browsers, wie z. B. Mausklickereignisse, Schlüsselereignisse, eingehende HTTP-Antworten und andere Ereignisse, die das DOM-Modell ändern. Sobald ein solches Ereignis auftritt, erkennt AngularJS die Änderung automatisch und verarbeitet und aktualisiert sie entsprechend.

Der Aufbau der oben genannten Anwendung ist sehr einfach. Das Vorlagenpaket enthält nur eine Direktive und eine statische Bindung, und das Modell ist ebenfalls leer. Als nächstes versuchen wir eine etwas komplexere Anwendung!

Wozu dienen diese Dateien in meinem Arbeitsverzeichnis?

Die obige Anwendung stammt aus dem AngularJS-Seed-Projekt. Normalerweise können wir das AngularJS-Seed-Projekt verwenden, um neue Projekte zu erstellen. Das Seed-Projekt umfasst die neueste AngularJS-Codebasis, Testbibliotheken, Skripte und ein einfaches Anwendungsbeispiel, das die grundlegende Konfiguration enthält, die für die Entwicklung einer typischen Webanwendung erforderlich ist.

Für dieses Tutorial haben wir die folgenden Änderungen am AngularJS-Seed-Projekt vorgenommen:

1. Löschen Sie die Beispielanwendung 2. Mobiltelefonbilder zu app/img/phones/ hinzufügen; 3. Mobiltelefondatendatei (JSON) zu app/phones/ hinzufügen

4. Fügen Sie Twitter Bootstrap-Dateien zu app/css/ und app/img/ hinzu.

Üben

Versuchen Sie, neue Ausdrücke über mathematische Operationen zu index.html hinzuzufügen:

Code kopieren

Der Code lautet wie folgt:

1 2 = {{ 1 2 }}

Zusammenfassung

Jetzt gehen wir zu Schritt 1 über und fügen der Webanwendung einige Inhalte hinzu.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：AngularJS-Erste-Schritte-Tutorial (1): Static Template_AngularJSNächster Artikel：AngularJS-Erste-Schritte-Tutorial (1): Static Template_AngularJS

In Verbindung stehende Artikel

Mehr sehen