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

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:

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.

Erklärung dieser Website

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

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Mehr anzeigen

Heißer Artikel

Assassin's Creed Shadows: Seashell Riddle -Lösung

3 Wochen vor By DDD

Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben

3 Wochen vor By DDD

Wo kann man die Kransteuerungsschlüsselkarten in Atomfall finden

3 Wochen vor By DDD

<🎜>: Dead Rails - wie man jede Herausforderung abschließt

4 Wochen vor By DDD

Atomfall Guide: Gegenstandsstandorte, Questführer und Tipps

1 Monate vor By DDD

Mehr anzeigen

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Mehr anzeigen

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7694

15

Java-Tutorial

1640

14

CakePHP-Tutorial

1393

52

Laravel-Tutorial

1287

25

PHP-Tutorial

1229

29

Mehr anzeigen