このステップでは、電話リストでユーザーが電話をクリックすると表示される電話の詳細ビューを実装します。
作業ディレクトリをリセットしてください：
gitチェックアウト-fステップ8
これで、リスト内の電話をクリックすると、電話の詳細情報ページが表示されます。
携帯電話の詳細ビューを実装するために、$ httpを使用してデータを取得します。また、電話detail.htmlビューテンプレートも追加します。
ステップ7とステップ8の最も重要な違いを以下に示します。 GitHubの完全な違いを見ることができます。
データ
Phones.jsonに加えて、App/ Phones/ Directoryには、各携帯電話情報のJSONファイルも含まれています。
app/phones/nexus-s.json（サンプルフラグメント）
{"additionalfeatures"： "contour display、near field communications（nfc）、..."、 "android"：{"os"： "android 2.3"、 "ui"： "android"}、... "images"：["img/phones/nexus-s.0.jpg"、 "img/nexus-s.1.jpg" " 「IMG/電話/Nexus-S.2.jpg "、" img/phones/nexus-s.3.jpg "]、" storage "：{" flash "：" 16384mb "、" ram "：" 512mb "}}}これらの各ファイルは、同じデータ構造を使用して電話の異なるプロパティを記述します。このデータは、電話の詳細ビューに表示されます。
コントローラ
$ HTTPサービスを使用してデータを取得してPhoneListCtrlを拡張します。これは、前の電話リストコントローラーが動作するのと同じです。
App/JS/Controllers.js
function Phonedetailctrl（$ scope、$ routeparams、$ http）{$ http.get（ 'phones/' + $ routeparams.phoneid + '.json'）。 '$ http'];HTTPリクエストのURLを構築するには、$ Route Serviceが提供する現在のルートから$ routeParams.PhoneIDを抽出する必要があります。
テンプレート
電話detail.htmlファイルの元のTBDプレースホルダーラインは、携帯電話の詳細情報を構成するリストとバインディングに置き換えられました。ここでは、AngularJSの{{expression}}タグを使用して、データモデルをビューでレンダリングすることに注意してください。
App/Partials/Phone-Detail.html
<img ng-src = "{{phone.images [0]}}}"> <h1> {{phone.name}} </h1> <p> {{phone.description}} </p> <ul> <li ng-repeat = "img in phone.images"> <img ng-src = "{{{{{{{{{{{{{{{img} </li> </ul> <ul> <li> <li> <span>可用性とネットワーク</span> <dt>可用性</dt> <dd ng-repeat = "電話での可用性"> {{availability}}} </dd> </dl> </li> <dd> {{phone.additionalfeatures}} </dd> </li> </ul>テスト
ステップ5でPhoneListctrlのために書いたものと非常によく似た新しいユニットテストを書きましょう。
test/unit/controllersspec.js
...説明（ 'Phonedetailctrl'、function（）{var scope、$ httpbackend、ctrl; beforeeach（inject（_ $ httpbackend_、$ rootscope、$ routeparams、$ controller）{$ httpbackend = _ $ httbbackend_; $ httpbackget（ 'phones/json'）。 {scope.phone）.tobeundefined（）;./scripts/test.shスクリプトを実行して、テストを実行するには、次の出力が表示されます。
クロム：ランナーリセット....合計3テスト（合格：3;失敗：0;エラー：0）（5.00ミリ秒）Chrome 19.0.1084.36 Mac OS：3テストを実行する（合格：3;失敗：0;エラー0）（5.00ミリ秒）
同時に、エンドツーエンドのテストも追加し、Nexusの電話の詳細ページを指し、ページのヘッドが「Nexus s」であることを確認しました。
test/e2e/sinarios.js
...説明（ '電話の詳細ビュー'、function（）{beforeeach（function（）{browser（）。navigateto（ '..// app/index.html＃/phones/nexus-s'）;}）; itブラウザを更新して、エンドツーエンドテストを再度実行できるか、AngularJSサーバーで実行することができます。
練習する
AngularJSエンドツーエンドテストAPIを使用してテストを作成して、Nexusの詳細ページに表示される4つのサムネイルを確認します。
要約します
携帯電話の詳細ページの準備が整ったので、ステップ9では、ディスプレイフィルターの書き方を学びます。
上記は、より多くのAngularJSテンプレートに関する情報です。今後も関連情報を追加し続けます。このサイトへのご支援ありがとうございます！