Wir bereiten uns jetzt darauf vor, AngularJS -Anwendung - Phonecat zu schreiben. In diesem Schritt (Schritt 0) werden Sie mit wichtigen Quellcode -Dateien vertraut, lernen, eine Entwicklungsumgebung mit AngularJS -Saatgutprojekten zu starten und die Anwendung auf der Browser -Seite auszuführen.
Geben Sie das Verzeichnis Angular-Phonecat ein und führen Sie den folgenden Befehl aus:
Die Codekopie lautet wie folgt:
Git Checkout -f Schritt -0
Dieser Befehl setzt das Arbeitsverzeichnis des Phonecat -Projekts zurück. Es wird empfohlen, diesen Befehl in jedem Lernschritt auszuführen, die Nummer im Befehl in die Nummer, die dem Lernschritt entspricht, ändern, und der Befehl löscht alle Änderungen, die Sie im Arbeitsverzeichnis vorgenommen haben.
Führen Sie den folgenden Befehl aus:
Die Codekopie lautet wie folgt:
Knotenskripte/webserver.js
Um den Server zu starten, fordert das Befehlszeilenterminal den HTTP -Server auf, der unter http: // localhost: 8000 ausgeführt wird. Bitte schließen Sie das Terminal nicht. Schließen Sie das Terminal schließen den Server. Geben Sie http: // localhost: 8000/app/index.html in Ihren Browser ein, um auf unsere Phonecat -Anwendung zuzugreifen.
Jetzt sollten Sie im Browser unsere erste Anwendung gesehen haben, was einfach ist, aber dies bedeutet, dass unser Projekt bereit ist.
Das "nichts hier!" In der Anwendung wird aus dem folgenden HTML -Code erstellt, der die Schlüsselelemente von AngularJs enthält, genau das, was wir lernen müssen.
app/index.html
Die Codekopie lautet wie folgt:
<! docType html>
<html Lang = "en" ng-App>
<kopf>
<meta charset = "utf-8">
<title> Meine HTML -Datei </title>
<link rel = "stylesheet" href = "css/app.css">
<link rel = "stylesheet" href = "css/bootstrap.css">
<script src = "lib/angular/angular.js"> </script>
</head>
<body>
<p> Nichts hier {{'noch' + '!'}} </p>
</body>
</html>
Was macht der Code?
NG-App-Richtlinie:
Die Codekopie lautet wie folgt:
<html Lang = "en" ng-App>
Die NG-App-Richtlinie markiert den Umfang der AngularJS-Skript. Das Hinzufügen des NG-App-Attributs in <html> bedeutet, dass das gesamte <html> der Umfang des AngularJS-Skripts ist. Entwickler können auch NG-App-Direktiven lokal verwenden, wie <div ng-App>, und AngularJS-Skripte werden nur in diesem <div> ausgeführt.
AngularJS -Skript -Tag:
Die Codekopie lautet wie folgt:
<script src = "lib/angular/angular.js"> </script>
Diese Codezeile wird in das Skript angular.js geladen. Wenn der Browser die gesamte HTML -Seite lädt, wird das Skript angular.js ausgeführt. Nachdem das Skript angular.js ausgeführt wurde, wird nach einem HTML-Tag mit der NG-App-Anweisung suchen. Dieses Tag definiert den Umfang der AngularJS -Anwendung.
Doppelpraces gebundene Ausdruck:
Die Codekopie lautet wie folgt:
<p> Nichts hier {{'noch' + '!'}} </p>
Diese Codezeile demonstriert die Kernfunktion der AngularJS -Template - Bindung, die aus doppelten Klammern {{}} und dem Ausdruck 'noch' + '!' Besteht.
Diese Bindung zeigt AngularJs an, dass sie die Ausdrücke berechnen und das Ergebnis in das DOM einfügen muss. In den nächsten Schritten werden wir feststellen, dass das DOM in Echtzeit in Echtzeit aktualisiert werden kann, wenn sich die Ergebnisse des Ausdrucks ändern.
AngularJS-Expression Winkelexpression ist ein JavaScript-ähnlicher Ausschnitt, AngularJS-Expressionen laufen nur im Bereich von AngularJs, nicht im gesamten DOM.
Starten Sie die AngularJS -Anwendung
Das automatische Booten von AngularJS -Anwendungen über NGAPP -Direktiven ist eine prägnante Möglichkeit für die meisten Situationen. In der erweiterten Entwicklung, z. B. Skripten zum Laden einer App, können Sie auch Bootstrap verwenden, um AngularJS -Anwendungen manuell zu starten.
Es gibt drei wichtige Punkte im AngularJS -Anwendungsstartprozess:
1. Der Injektor wird für diese Anwendung eine Abhängigkeitsinjektion erstellen.
2. Der Injektor erstellt den Wurzelbereich als Umfang unseres Anwendungsmodells.
3. AngularJS verknüpft das DOM im Wurzelbereich, beginnend mit HTML -Tags, die mit NGApp gekennzeichnet sind, und allmählich mit Anweisungen und Bindungen im DOM zu tun.
Sobald die AngularJS -Anwendung gestartet ist, wird sie weiterhin die HTML -Auslösen des Browsers wie Mausklickereignisse, Taste -Drücken -Ereignisse, HTTP -eingehende Antworten usw. anhören, die das DOM -Modell ändern. Sobald solche Ereignisse aufgetreten sind, erkennt AngularJS automatisch Änderungen und führt die entsprechende Verarbeitung und Aktualisierungen vor.
Die Struktur der obigen Anwendung ist sehr einfach. Das Template -Paket enthält nur eine Richtlinie und eine statische Bindung, und das Modell ist ebenfalls leer. Versuchen wir als nächstes eine etwas komplexere Anwendung!
Was machen diese Dateien in meinem Arbeitsverzeichnis?
Die obige Anwendung stammt aus dem AngularJS -Saatgutprojekt. Wir können normalerweise das AngularJS -Saatgutprojekt verwenden, um neue Projekte zu erstellen. Das Saatgutprojekt enthält die neueste AngularJS -Code -Basis, Testbibliothek, 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 Probenanwendung;
2. Fügen Sie Mobiltelefonbilder zu App/IMG/Handys hinzu/;
3. Fügen Sie App/Phones/;
4. Fügen Sie Twitter Bootstrap -Dateien zu App/CSS/und App/IMG/hinzu.
üben
Versuchen Sie, einen neuen Ausdruck über mathematische Operationen zu Index.html hinzuzufügen:
Die Codekopie lautet wie folgt:
<p> 1 + 2 = {{1 + 2}} </p>
Zusammenfassen
Gehen wir nun zu Schritt 1 und fügen Sie der Webanwendung einige Inhalte hinzu.