このステップでは、サムネイルと電話リストへのリンクを追加しますが、これらのリンクはまだ機能しません。次に、これらのリンクを使用して、カテゴリに携帯電話に追加情報を表示します。
作業ディレクトリをリセットしてください：
gitチェックアウト-fステップ6
これで、リスト内の携帯電話の写真とリンクを見ることができるはずです。
ステップ5とステップ6の最も重要な違いを以下に示します。 GitHubの完全な違いを見ることができます。
データ
Phones.jsonファイルには、各電話への一意の識別子と画像リンクが含まれることに注意してください。これらのURLは、アプリ/IMG/電話/ディレクトリを指しています。
app/phones/phones.json（サンプルフラグメント）
[{... "id"： "Motorola-defy-with-motoblur"、 "imageurl"： "img/phones/motorola-defy-with-motoblur.0.jpg"、 "name"： "Motorola defy/u2122 Motoblur/u2122"、...}、...]テンプレート
app/index.html
... <ul> <li ng-repeat = "電話の電話|フィルター：query | orderby：orderprop"> <a href = "＃/phones/{{phone.id}}}"> <img ng-src = "{{phone.imageurl}}"> </a> <a a href = "＃/phones/{{phone.id}}"> {{phone.name}} </a> <p> {{phone.snippet}} </p> </li> </ul> ...これらのリンクは、将来の各電話の詳細ページを指します。ただし、これらのリンクを生成するために、HREF属性ですでによく知っているダブルブラケットデータバインディングを使用します。ステップ2では、{{phone.name}}バインディングを要素コンテンツとして追加しました。このステップでは、要素属性に{{phone.id}}バインディングを使用します。
また、各レコードに携帯電話の写真を追加し、<IMG> SRC属性タグの代わりにNGSRCディレクティブを使用するだけです。通常のSRC属性をBIND（<IMG SRC = "{{Phone.ImageUrl}}">）にのみ使用する場合、ブラウザはAngularjs {{expression}}タグを直接解釈し、違法なurlhttp：// localhost：// app/{phone.imageurl}にリクエストを開始します。ブラウザがページをロードすると、画像のロードも要求するため、AngularJSはページがロードされたときにのみコンパイルを起動します - ブラウザが画像{{phone.imageurl}}をロードするように要求している場合のみ、まだコンパイルされていません！この状況はこのNGSRC指令を使用して回避され、ブラウザはNGSRCディレクティブを使用して、違法住所へのリクエストを防止します。
テスト
test/e2e/sinarios.js
... it（ '電話固有のリンクをレンダリングする必要があります'、function（）{input（ 'query'）。enter（ 'nexus'）; element（ '。Phoneslia'）。click（）; expect（browser（）。locial（）。url（））。新しいエンドツーエンドテストを追加して、アプリがモバイルビューの正しいリンクを生成することを確認し、上記が実装です。
ブラウザを更新し、エンドツーエンドのテスターを使用して実行中のテストを観察できるか、AngularJSサーバーで実行することができます。
練習する
NG-SRC指令を通常のSRC属性に変更します。 FireBug、Chrome Web Inspector、またはサーバーのアクセスログなどのツールを使用して、アプリケーションが違法リクエストを /app/%7b%7bphone.imageurl%7d%7d（or /app/ {phone.imageurl}}に送信することがわかります。
この問題は、IMGタグに遭遇したときにまだコンパイルされていないURLアドレスにブラウザがすぐにリクエストを送信するためです。 AngularJSは、ページがロードされて正しい画像URLアドレスを取得する後にのみ式のコンパイルを開始します。
要約します
電話の写真とリンクを追加したので、ステップ7に移動して、AngularJSレイアウトテンプレートと、AngularJがアプリケーションに複数のビューを簡単に提供する方法について学びます。
上記は、AngularJSリンクと画像テンプレートに関する情報の編集です。将来、関連する知識を追加し続けます。このサイトへのご支援ありがとうございます！