In diesem Schritt werden Sie Miniaturansichten und einige Links zur Telefonliste hinzufügen, diese Links funktionieren jedoch noch nicht. Als nächstes verwenden Sie diese Links, um zusätzliche Informationen auf Ihrem Telefon in Kategorien anzuzeigen.
Bitte setzen Sie das Arbeitsverzeichnis zurück:
Git Checkout -f Schritt 6
Jetzt sollten Sie die Bilder und Links Ihres Telefons in der Liste sehen können.
Die wichtigsten Unterschiede zwischen Schritt 5 und Schritt 6 sind unten aufgeführt. Sie können den vollständigen Unterschied im GitHub sehen.
Daten
Beachten Sie, dass die Datei von Phones.json jetzt eine eindeutige Bezeichner und einen Bildlink zu jedem Telefon enthält. Diese URLs verweisen nun auf die App/IMG/Telefone/Verzeichnis.
App/Telefone/Telefone.json (Beispielfragment)
[{... "ID": "Motorola-Defy-with-Motoblur", "ImageUrl": "IMG/Telefone/Motorola-Defy-With-Motoblur.0.jpg", "Name": "Motorola Defy/U2122 mit Motoblur/U212222",}, ...]Vorlage
app/index.html
... <ul> <li ng-repeat = "Telefon in Telefonen | Filter: Abfrage | orderBy: orderProp"> <a href = "#/{{{Telefon.id}}"> <img ng-src = "{{{{Telefon.Imageurl}}}"> </a> <a a <aa-src = "{{{{tela.imageurl}}}"> </a> <aa> <aa> <a <aa. href = "#/fone/{{mely.id}}"> {{Telefon.name}} </a> <p> {{Telefon.snippet}} </p> </li> </ul> ...Diese Links zeigen in Zukunft auf die Detail -Seite jedes Telefons. Um diese Links zu generieren, verwenden wir jedoch die Doppelsperrdatenbindung, mit der wir bereits im HREF-Attribut vertraut sind. In Schritt 2 haben wir die Bindung {{Telefon.name}} als Elementinhalt hinzugefügt. In diesem Schritt verwenden wir die Bindung von {{Telefon.id}} im Elementattribut.
Wir fügen auch Mobiltelefonbildern zu jedem Datensatz hinzu. Verwenden Sie einfach die NGSRC -Anweisung anstelle des <img> SRC -Attribut -Tags. If we only use a normal src attribute to bind (<img src="{{phone.imageUrl}}">), the browser will directly interpret the AngularJS {{ expression}} tag and initiate a request to the illegal urlhttp://localhost:8000/app/{{phone.imageUrl}}. Da der Browser die Seite lädt, wird auch angefordert, das Bild zu laden, und AngularJS startet nur die Kompilierung, wenn die Seite geladen wird. Wenn der Browser das Bild {{Telefon.imageurl}} noch nicht kompiliert wurde! Diese Situation wird mit dieser NGSRC -Richtlinie vermieden, und der Browser wird die NGSRC -Richtlinie verwenden, um eine Anfrage an eine illegale Adresse zu verhindern.
prüfen
test/e2e/szenarien.js
... IT ('sollte Telefonspezifische Links rendern', function () {input ('query'). Enter ('Nexus'); Element ('. Telefone li a'). click (); erwartete (browser (). location (). url ()). tobe ('/telefones/nexus-s');});Wir haben einen neuen End-to-End-Test hinzugefügt, um zu überprüfen, ob die App den richtigen Link für die mobile Ansicht generiert, und ob oben ist unsere Implementierung.
Sie können jetzt Ihren Browser aktualisieren und einen End-to-End-Tester verwenden, um die ausgeführten Tests zu beobachten, oder Sie können sie auf einem AngularJS-Server ausführen.
üben
Ändern Sie die NG-SRC-Direktive in das normale SRC-Attribut. Mit Tools wie Firebug, Chrome Web Inspector oder direkt auf das Zugriffsprotokoll des Servers wird festgestellt, dass Ihre Anwendung eine illegale Anfrage an /app/%7b%7bphone.imageurl%7D%7D (oder /app/ <Mone.imageurl}}) sendet.
Dieses Problem liegt daran, dass der Browser sofort eine Anfrage an die URL -Adresse sendet, die bei der Begegnung des IMG -Tags noch nicht kompiliert wurde. AngularJs beginnt erst nach dem Laden der Seite zu kompilieren, um die richtige Bild -URL -Adresse zu erhalten.
Zusammenfassen
Nachdem Sie Ihre Telefonbilder und -Links hinzugefügt haben, werden wir zu Schritt 7 über AngularJS -Layout -Vorlagen erfahren und wie AngularJs problemlos mehrere Ansichten für Ihre Anwendung bieten können.
Das obige ist eine Zusammenstellung der Informationen zu AngularJS -Links und Bildvorlagen. Wir werden in Zukunft weiterhin relevantes Wissen hinzufügen. Vielen Dank für Ihre Unterstützung für diese Seite!