In diesem Schritt implementieren Sie die Ansicht für Telefondetails, die angezeigt werden, wenn der Benutzer auf ein Telefon in der Telefonliste klickt.
Bitte setzen Sie das Arbeitsverzeichnis zurück:
Git Checkout -f Schritt 8
Wenn Sie nun in der Liste auf ein Telefon klicken, wird die detaillierte Informationsseite des Telefons angezeigt.
Um die Ansicht der Mobiltelefondetails zu implementieren, werden wir $ HTTP verwenden, um die Daten zu erhalten, und wir werden auch eine telefondetails.html-Ansichtsansicht hinzufügen.
Die wichtigsten Unterschiede zwischen Schritt 7 und Schritt 8 sind unten aufgeführt. Sie können den vollständigen Unterschied im GitHub sehen.
Daten
Zusätzlich zu Telefonen.json enthält die App/ Telefone/ Verzeichnis auch die JSON -Datei für jede Mobiltelefoninformation.
App/Telefone/Nexus-s.json (Beispielfragment)
{"Zusätzliche Features": "Konturanzeige, Nahfeldkommunikation (NFC), ...", "Android": {"os": "Android 2.3", "ui": "Android"}, ... "Bilder": ["img/phones/nexus-s.0.jpg", img/phones/nexus-s.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1. "IMG/Telefones/Nexus-S.2.jpg", "IMG/Telefone/Nexus-S.3.jpg"], "Speicher": {"Flash": "16384mb", "RAM": "512mb"}}Jede dieser Dateien beschreibt unterschiedliche Eigenschaften eines Telefons mit derselben Datenstruktur. Wir zeigen diese Daten in der Ansicht der Telefondetails an.
Regler
Wir verwenden den $ HTTP -Dienst, um Daten zu erhalten, um unsere PhonelistCtrl zu erweitern. Dies ist genauso wie der vorherige Telefonlistencontroller funktioniert.
App/JS/Controller.js
Funktion PhonedetailCtrl ($ scope, $ routeParams, $ http) {$ http.get ('Telefone/' + $ routesParams.phoneId + '.json'). '$ http'];Um die URL der HTTP -Anfrage zu errichten, müssen wir $ utrouteParams.phoneId aus der aktuellen Route extrahieren, die vom $ Route -Dienst bereitgestellt wird.
Vorlage
Die ursprüngliche TBD-Platzhalterlinie in der Datei Telefondetail.html wurde durch die Liste und die Bindung ersetzt, die die detaillierten Informationen des Telefons darstellt. Beachten Sie, dass wir hier AngularJSs {{Ausdruck}} -Tags und nGrepeat verwenden, um das Datenmodell in der Ansicht zu rendern.
app/partials/Telefondetail.html
<img ng-src = "{{mely.images [0]}}"> <h1> {{Telefon.name}} </h1> <p> {{Telefon.Description}} </p> <ul> <li ng-rrepeat = "img in tely.images"> <img ng ng-src </li> </ul> <ul> <li> <Pan> Verfügbarkeit und Netzwerke </span> <dl> <dt> Verfügbarkeit </dt> <dd ng-repeat = "Verfügbarkeit in Telefon <dd> {{Telefon.additionalFeatures}} </dd> </li> </ul>prüfen
Schreiben wir einen neuen Unit -Test, der dem, den wir für PhonelistCtrl in Schritt 5 geschrieben haben, sehr ähnlich ist.
Test/Einheit/ControllersSpec.js
... beschreiben ('phonedetailCtrl', function () {var scope, $ httpbackend, ctrl; voran (inject (function (_ $ httpbackend_, $ rootScope, $ routesParams, $ controller) {$ httpbackend = _ $ httpbackend_; $ httpback.expecget ('Telefone/xyz.json'). {erwartete (scope.phone) .tobeundedined ();Führen Sie das Skript ./Scripts/test.sh aus, um den Test auszuführen. Sie sollten die folgende Ausgabe sehen:
Chrom: Runner Reset .... Total 3 Tests (bestanden: 3; Fehler: 0; Fehler: 0) (5,00 ms) Chrom 19.0.1084.36 MAC OS: Führen Sie 3 Tests aus (bestanden: 3; Fehler: 0; Fehler 0) (5,00 ms)
Gleichzeitig haben wir auch einen End-to-End-Test hinzugefügt, der auf die Seite "Nexus S Phone Details" hinweist und überprüft, ob der Kopf der Seite "Nexus S" ist.
test/e2e/szenarien.js
... beschreiben ('Telefondetailansicht', function () {voran (function () {browser (). navigateto ('../../ app/index.html#/phones/nexus-s');}); it ('sollte Nexus-S-Seite', function () {erwarten ('binding (' Telefon.name ').Sie können jetzt Ihren Browser aktualisieren und den End-to-End-Test erneut ausführen oder auf dem AngularJS-Server ausführen.
üben
Schreiben Sie einen Test mit der ANGularJS End-to-End-Test-API, um die vier Miniaturansichten zu überprüfen, die wir auf der Seite "Details" Nexus S angezeigt haben.
Zusammenfassen
Nachdem die Seite "Handy -Details" fertig ist, lernen wir in Schritt 9, wie Sie einen Anzeigefilter schreiben.
Das obige sind die Informationen zu mehr AngularJS -Vorlagen. Wir werden in Zukunft weiterhin relevante Informationen hinzufügen. Vielen Dank für Ihre Unterstützung für diese Seite!