AngularJS-Erste-Schritte-Tutorial (2): AngularJS Template_AngularJS

Es ist an der Zeit, diesen Webseiten einige dynamische Funktionen zu geben – verwenden Sie AngularJS! Wir haben hier einen Test für den Controller hinzugefügt, der später hinzugefügt wird.

Es gibt viele Arten von Codestrukturen für eine Anwendung. Für AngularJS-Anwendungen empfehlen wir die Verwendung des Model-View-Controller (MVC)-Musters, um Code zu entkoppeln und Anliegen zu trennen. Vor diesem Hintergrund verwenden wir AngularJS, um unserer Anwendung einige Modelle, Ansichten und Controller hinzuzufügen.

Bitte setzen Sie das Arbeitsverzeichnis zurück:

Code kopieren Der Code lautet wie folgt:

git checkout -f Schritt-2

Unsere App verfügt jetzt über eine Liste mit drei Telefonen.

Die wichtigsten Unterschiede zwischen Schritt 1 und Schritt 2 sind unten aufgeführt. Sie können auf GitHub gehen, um die vollständigen Unterschiede zu sehen.

Ansichten und Vorlagen

In AngularJS ist eine Ansicht eine Abbildung eines Modells, das über eine HTML-Vorlage gerendert wird. Dies bedeutet, dass AngularJS bei jeder Modelländerung den Verbindungspunkt in Echtzeit aktualisiert und die Ansicht entsprechend aktualisiert.

Ansichtskomponenten werden beispielsweise von AngularJS mithilfe der folgenden Vorlage erstellt:

Code kopieren Der Code lautet wie folgt:

...

• 
  {{phone.name}}
  

  {{phone.snippet}}

  
  

Wir haben gerade die statisch codierte Telefonliste ersetzt, da wir hier die ngRepeat-Direktive verwenden und zwei AngularJS-Ausdrücke in geschweiften Klammern – {{phone.name}} und {{phone.snippet}} – den gleichen Effekt erzielen können .

1. Die ng-repeat="phone inphones"-Anweisung im

-Tag ist ein AngularJS-Iterator. Dieser Iterator weist AngularJS an, für jedes Telefon in der Liste ein

-Element zu erstellen, wobei das erste

-Tag als Vorlage dient.

2. Wie wir in Schritt 0 erfahren haben, kennzeichnen die geschweiften Klammern um phone.name und phone.snippet die Datenbindung. Anders als bei der Konstantenberechnung ist der Ausdruck hier tatsächlich eine Datenmodellreferenz unserer Anwendung, die wir im PhoneListCtrl-Controller festgelegt haben.

Modelle und Controller

Das Datenmodell wird im PhoneListCtrl-Controller initialisiert (dies ist nur eine Funktion, die ein Array enthält, und das im Array gespeicherte Objekt ist die Mobiltelefondatenliste):

app/js/controller.js:

Code kopieren Der Code lautet wie folgt:

Funktion PhoneListCtrl($scope) {
$scope.phones = [
{"name": "Nexus S",
„snippet“: „Schnell ist mit dem Nexus S jetzt noch schneller.“},
{"name": "Motorola XOOM™ mit Wi-Fi",
„snippet“: „Das Tablet der nächsten Generation.“},
{"name": "MOTOROLA XOOM™",
„snippet“: „Das Tablet der nächsten, nächsten Generation.“🎜> ];
}

Obwohl der Controller keine kontrollierende Rolle zu spielen scheint, spielt er hier eine entscheidende Rolle. Controller ermöglichen es uns, Datenbindungen zwischen Modellen und Ansichten herzustellen, indem sie ihnen den Kontext unseres Datenmodells geben. So verbinden wir die Präsentationsschicht, Daten und logische Komponenten:

1.PhoneListCtrl – Der Name der Controller-Methode (in der JS-Datei controllers.js) entspricht dem Wert der ngController-Direktive im

2. Die Daten des Telefons sind jetzt mit dem Bereich ($scope) verknüpft, der in unsere Controller-Funktion eingefügt wird. Beim Start der Anwendung wird ein Root-Bereich erstellt, und der Controller-Bereich ist ein typischer Nachfolger des Root-Bereichs. Der Geltungsbereich dieses Controllers gilt für alle Datenbindungen innerhalb des -Tags.

Die Scope-Theorie von AngularJS ist sehr wichtig: Ein Scope kann als Klebstoff für die Zusammenarbeit von Vorlagen, Modellen und Controllern betrachtet werden. AngularJS verwendet Bereiche sowie Informationen in Vorlagen, Datenmodellen und Controllern. Diese können helfen, das Modell und die Ansicht zu trennen, aber beide sind wirklich synchron! Alle Änderungen am Modell werden sofort in der Ansicht widergespiegelt; alle Änderungen an der Ansicht werden sofort im Modell widergespiegelt.

Weitere Informationen zum AngularJS-Geltungsbereich finden Sie im AngularJS-Geltungsbereichsdokument.

Testen

Der „AngularJS-Weg“ macht das Testen von Code während der Entwicklung sehr einfach. Werfen wir einen Blick auf den folgenden neu hinzugefügten Unit-Test für den Controller:

test/unit/controllersSpec.js:

Code kopieren Der Code lautet wie folgt:

beschreiben('PhoneCat-Controller', function() {

beschreiben('PhoneListCtrl', function(){

it('sollte ein "Telefon"-Modell mit 3 Telefonen erstellen', Funktion() {
var Scope = {},
ctrl = new PhoneListCtrl(scope);

expect(scope.phones.length).toBe(3);
});
});
});

Dieser Test überprüft, ob es drei Datensätze in unserem Mobiltelefon-Array gibt (Sie müssen dieses Testskript noch nicht herausfinden). Dieses Beispiel zeigt, wie einfach es ist, einen Unit-Test für AngularJS-Code zu erstellen. Da Tests ein wesentlicher Bestandteil der Softwareentwicklung sind, erleichtern wir die Erstellung von Tests in AngularJS, um Entwickler dazu zu ermutigen, mehr davon zu schreiben.

Beim Schreiben von Tests neigen AngularJS-Entwickler dazu, die Syntax im Jasmine Behavior-Driven Development (BBD)-Framework zu verwenden. Obwohl AngularJS Sie nicht zur Verwendung von Jasmine zwingt, werden alle unsere Tests im Tutorial mit Jasmine geschrieben. Relevantes Wissen erhalten Sie auf Jasmines offizieller Homepage oder im Jasmine Wiki.

AngularJS-basierte Projekte sind so vorkonfiguriert, dass sie den JsTestDriver zum Ausführen von Komponententests verwenden.

Sie können den Test folgendermaßen durchführen:

1. Geben Sie auf einem separaten Terminal das Verzeichnis „angular-phonecat“ ein und führen Sie ./scripts/test-server.sh aus, um den Test zu starten (bitte geben Sie .scriptstest-server.bat in die Windows-Befehlszeile ein, um das Skript auszuführen. gefolgt von Der Skriptbefehl wird auf ähnliche Weise ausgeführt);
2. Öffnen Sie ein neues Browserfenster und gehen Sie zu http://localhost:9876; 3. Wählen Sie „Diesen Browser im strengen Modus erfassen“.

Zu diesem Zeitpunkt können Sie Ihr Fenster beiseite legen und es vergessen. JsTestDriver führt den Test selbst aus und gibt die Ergebnisse in Ihrem Terminal aus.

4. Führen Sie zum Testen ./scripts/test.sh aus.

Sie sollten Ergebnisse ähnlich den folgenden sehen:

Code kopieren Der Code lautet wie folgt:

Chrome: Runner zurückgesetzt.
.
Insgesamt 1 Tests (Bestanden: 1; Fehlgeschlagen: 0; Fehler: 0) (2,00 ms)
Chrome 19.0.1084.36 Mac OS: 1 Tests ausführen (Bestanden: 1; Fehlgeschlagen: 0; Fehler 0) (2,00 ms)

Ja! Test bestanden! Oder auch nicht ... Hinweis: Wenn nach der Ausführung des Tests ein Fehler auftritt, schließen Sie den Browser und kehren Sie zum Terminal zurück, um das Skript zu schließen. Versuchen Sie dann die oben genannten Schritte erneut.

Üben

Fügen Sie eine weitere Datenbindung für index.html hinzu. Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

Gesamtzahl der Telefone: {{phones.length}}

Erstellen Sie eine neue Datenmodelleigenschaft und binden Sie sie an die Vorlage. Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

$scope.hello = "Hallo Welt!"

Aktualisieren Sie Ihren Browser, um sicherzustellen, dass „Hello, World!“ angezeigt wird Erstellen Sie eine einfache Tabelle mit einem Iterator:

Code kopieren Der Code lautet wie folgt:

Zeilennummer
{{i}}

Jetzt erhöhe ich den Datenmodellausdruck um 1:

Code kopieren Der Code lautet wie folgt:

Zeilennummer
{{i 1}}

Stellen Sie sicher, dass der Komponententest fehlschlägt, nachdem Sie toBe(3) in toBe(4) geändert haben, und führen Sie dann das Skript ./scripts/test.sh erneut aus

Zusammenfassung

Sie verfügen jetzt über eine dynamische Anwendung mit separaten Modellen, Ansichten und Controllern, die Sie jederzeit testen können. Jetzt können Sie mit Schritt 3 fortfahren, um Ihrer Anwendung eine Volltextsuchfunktion hinzuzufügen.