Es ist Zeit, diesen Webseiten einige dynamische Funktionen zu geben - verwenden Sie AngularJs! Wir haben einen Test hinzugefügt, damit der Controller später hinzugefügt werden soll.
Für eine Anwendung gibt es viele Arten von Codearchitekturen. Für AngularJS-Anwendungen fördern wir die Verwendung des MVC-Modus (Modell-View-Controller), Code und separate Bedenken zu entkoppeln. In diesem Sinne verwenden wir AngularJs, um unserer Anwendung einige Modelle, Ansichten und Controller hinzuzufügen.
Bitte setzen Sie das Arbeitsverzeichnis zurück:
Die Codekopie lautet wie folgt:
Git Checkout -f Schritt -2
Unsere App hat jetzt eine Liste von drei Telefonen.
Die wichtigsten Unterschiede zwischen Schritt 1 und Schritt 2 sind unten aufgeführt. Sie können zu Github gehen, um den vollständigen Unterschied zu erkennen.
Ansichten und Vorlagen
In AngularJS ist eine Ansicht eine Zuordnung, nachdem das Modell durch HTML ** -Vorlagen gerendert wurde. Dies bedeutet, dass AngularJS unabhängig davon, wann sich das Modell ändert, die Anschlusspunkte in Echtzeit aktualisieren und die Ansicht aktualisieren.
Beispielsweise wird die Ansichtskomponente von AngularJS unter Verwendung der folgenden Vorlage erstellt:
Die Codekopie lautet wie folgt:
<html ng-App>
<kopf>
...
<script src = "lib/angular/angular.js"> </script>
<script src = "js/Controller.js"> </script>
</head>
<Body ng-controller = "PhonelistCtrl">
<ul>
<li ng-repeat = "Telefon in Telefonen">
{{Telefon.name}}
<p> {{Telefon.snippet}} </p>
</li>
</ul>
</body>
</html>
Wir haben gerade die staatlich codierte Mobiltelefonliste ersetzt, da wir mithilfe der NGrepeat -Anweisung und zwei AngularJs -Ausdrücke, die in Curly -Graces eingewickelt sind - {{Telefon.name}} und {{Telefon.snippet}}, erzielen können.
1. Die Anweisung ng-Repeat = "Telefon in Telefonen" im <li> -Tag ist ein AngularJS-Iterator. Dieser Iterator fordert AngularJs an, das erste <li> -Tag als Vorlage zu verwenden, um ein <li> -Element für jedes Telefon in der Liste zu erstellen.
2. Wie wir in Schritt 0 erfuhren, haben Curly -Zahnspangen, die am Telefon eingewickelt wurden. NAME und Telefon.snippet Identifizieren Sie die Datenbindung. Im Gegensatz zu konstanten Berechnungen ist der Ausdruck hier tatsächlich eine Datenmodellreferenz, die wir angewendet haben, und wir haben diese im PhonelistCtrl -Controller festgelegt.
Modelle und Controller
Das Datenmodell wird im PhonelistCtrl -Controller initialisiert (hier ist nur eine Funktion, die ein Array enthält, und die im Array gespeicherten Objekte sind mobile Datenliste):
App/JS/Controller.js:
Die Codekopie lautet wie folgt:
Funktion phonelistCtrl ($ scope) {
$ scope.phones = [
{"Name": "Nexus S",
"Snippet": "schnell wurde mit Nexus S. schneller."},
{"Name": "Motorola Xoom ™ mit Wi-Fi",
"Snippet": "Das nächste Tablet der nächsten Generation."},
{"Name": "Motorola Xoom ™",
"Snippet": "Das nächste Tablet der nächsten Generation."}
];
}
Obwohl der Controller keine sehr wichtige Rolle zu spielen scheint, spielt er hier eine entscheidende Rolle. Angesichts des Kontextes unseres Datenmodells ermöglicht der Controller die Datenbindung zwischen dem Modell und der Ansicht. So verknüpfen wir die Präsentationsschicht, Daten und Logikkomponenten:
1.. PhonelistCtrl - Der Name der Controller -Methode (in der JS -Datei -Controller.js) entspricht dem Wert der NgController -Anweisung im <body> -Tag.
2. Die Daten des Mobiltelefons sind nun mit dem in unsere Controller -Funktion eingeführten Umfang ($ Scope) verbunden. Wenn die Anwendung beginnt, wird ein Wurzelbereich erstellt und der Controller -Bereich ist ein typischer Nachfolger für den Wurzelbereich. Der Umfang dieses Controllers gilt für Datenbindungen in allen <Body ng-controller = "PhonelistCtrl"> Tags.
AngularJS 'Zieltheorie ist sehr wichtig: Ein Umfang kann als Bauer für Vorlagen, Modelle und Controller angesehen werden, um zusammenzuarbeiten. AngularJS verwendet Bereiche sowie Informationen, Datenmodelle und Controller in Vorlagen. Diese können helfen, das Modell und die Sichtweise zu trennen, aber sie sind in der Tat synchronisiert! Alle Änderungen am Modell werden sofort in der Ansicht widerspiegelt. Alle Änderungen an der Ansicht werden im Modell sofort reflektiert.
Für ein eingehenderes Verständnis des AngularJS-Bereichs finden Sie in der AngularJS-Umfangsdokumentation.
prüfen
Die "AngularJS -Methode" macht es sehr einfach, den Code während der Entwicklung zu testen. Werfen wir einen Blick auf den folgenden Unit -Test, der neu für den Controller hinzugefügt wurde:
Test/Einheit/ControllersSpec.js:
Die Codekopie lautet wie folgt:
beschreiben ('Phonecat Controller', function () {
beschreiben ('phonelistCtrl', function () {
IT ('sollte "Telefone" -Modell mit 3 Telefonen erstellen, function () {
var scope = {},
ctrl = neuer PhonelistCtrl (Umfang);
erwarten (scope.phones.length) .tobe (3);
});
});
});
Dieser Test überprüft, dass in unserem Handy -Array drei Datensätze vorhanden sind (mussten dieses Testskript vorerst nicht verstehen). Dieses Beispiel zeigt, wie einfach es ist, einen Unit -Test für AngularJS -Code zu erstellen. Da das Testen ein wesentlicher Bestandteil der Softwareentwicklung ist, machen wir es einfach, Tests in AngularJs zu erstellen, um Entwickler zu ermutigen, mehr davon zu schreiben.
Beim Schreiben von Tests neigen AngularJS-Entwickler dazu, Syntax im Jasminverhaltens-BBD-Framework (BBD) zu verwenden. Obwohl AngularJS Sie nicht dazu zwingt, Jasmine zu verwenden, sind alle Tests, die wir im Tutorial durchführen, in Jasmine geschrieben. Sie können relevantes Wissen über die offizielle Homepage von Jasmine oder über das Jasmine -Wiki erhalten.
AngularJS-basierte Projekte sind vorkonfiguriert, um JStestDriver zu verwenden, um Unit-Tests durchzuführen.
Sie können den Test so ausführen:
1. Geben Sie in einem separaten Terminal das Angular-Phonecat-Verzeichnis ein und führen Sie ./Scripts/test-server.sh aus, um den Test zu starten (bitte geben Sie ./Scripts/test-server.bat in der Befehlszeile Windows ein, um das Skript auszuführen, und die Skriptbefehle im folgenden Weg).
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 in Ruhe lassen und es vergessen. JStestDriver wird den Test abschließen und die Ergebnisse an Ihr Terminal ausgeben.
V.
Sie sollten ähnliche Ergebnisse wie folgt sehen:
Die Codekopie lautet wie folgt:
Chrome: Runner Reset.
.
Insgesamt 1 Tests (bestanden: 1; Fehler: 0; Fehler: 0) (2,00 ms)
Chrome 19.0.1084.36 MAC OS: Führen Sie 1 Tests aus (bestanden: 1; Fehler: 0; Fehler 0) (2,00 ms)
Ja! Der Test wurde abgelaufen! Oder nein ... Hinweis: Wenn nach dem Ausführen des Tests ein Fehler auftritt, schließen Sie den Browser und kehren Sie zum Terminal zurück und schließen Sie das Skript und wiederholen Sie dann die obigen Schritte.
üben
Fügen Sie eine weitere Datenbindung für Index.html hinzu. Zum Beispiel:
Die Codekopie lautet wie folgt:
<p> Gesamtzahl der Telefone: {{Telefone.length}} </p>
Erstellen Sie eine neue Datenmodelleigenschaft und binden Sie sie an die Vorlage. Zum Beispiel:
Die Codekopie lautet wie folgt:
$ scope.hello = "Hallo, Welt!"
Aktualisieren Sie Ihren Browser und stellen Sie "Hallo, Welt!" erscheint
Erstellen Sie eine einfache Tabelle mit einem Iterator:
Die Codekopie lautet wie folgt:
<tabelle>
<tr> <Th> Zeilennummer </th> </tr>
<tr ng-repeat = "i in [0, 1, 2, 3, 4, 5, 6, 7]"> <td> {{i}} </td> </tr>
</table>
Lassen Sie nun das i des Datenmodell -Expression um 1 erhöhen:
Die Codekopie lautet wie folgt:
<tabelle>
<tr> <Th> Zeilennummer </th> </tr>
<tr ng-repeat = "i in [0, 1, 2, 3, 4, 5, 6, 7]"> <td> {{i+1}} </td> </tr>
</table>
Stellen Sie sicher
Zusammenfassen
Sie haben jetzt eine dynamische Anwendung von Modell, Ansicht, Controller -Trennung und testen immer. Jetzt können Sie zu Schritt 3 gehen, um der Anwendung eine Volltext-Suchfunktion hinzuzufügen.