このステップでは、レイアウトテンプレートを作成し、ルーティング関数を介して複数のビューを使用してアプリケーションを構築する方法を学習します。
作業ディレクトリをリセットしてください：
gitチェックアウト-fステップ7
App/index.htmlに移動すると、app/index.html＃/電話にリダイレクトされ、同じ電話リストがブラウザに表示されることに注意してください。モバイルリンクをクリックすると、携帯電話の詳細リストも表示されます。
ステップ6とステップ7の最も重要な違いを以下に示します。 GitHubの完全な違いを見ることができます。
マルチビュー、ルーティング、レイアウトテンプレート
私たちのアプリケーションはゆっくりと発展し、より複雑になりつつあります。ステップ7の前に、アプリケーションはユーザーにシンプルなインターフェイス（すべての電話のリスト）を提供し、すべてのテンプレートコードはindex.htmlファイルにあります。次のステップは、リストに各携帯電話の詳細を表示するページを追加することです。
詳細ビューを追加するために、index.htmlを展開して両方のビューのテンプレートコードを同時に含めることができますが、これによりすぐに大きなトラブルが発生します。代わりに、index.htmlテンプレートを「レイアウトテンプレート」に変換する必要があります。これは、すべてのビューを適用するための一般的なテンプレートです。その後、他の「ローカルレイアウトテンプレート」が現在の「ルーティング」に従って記入され、ユーザーに表示する完全なビューを形成します。
AngularJSに適用されるルートは、$ Routeサービスのプロバイダーである$ RouteProviderを介して宣言されます。このサービスを使用すると、コントローラーの簡単な統合、テンプレート、および現在のブラウザのURLを簡単に統合できます。この機能を適用することにより、Deep Linksを実装できます。これにより、ブラウザ履歴（バックバックまたはフォワードナビゲーション）とブックマークを使用できます。
依存関係注射（DI）、インジェクター、サービスプロバイダーについて
前のものから学んだように、依存関係注射はAngularJSの中核的な特徴であるため、この男がどのように機能するかについて少し知っておく必要があります。
アプリケーションブーツの場合、AngularJSはインジェクターを作成します。これは、アプリケーション後に注入されたすべてのサービスが必要になります。このインジェクター自体は、$ httpと$ルートが何をするかを知りません。実際、モジュール定義中に構成されていない限り、これらのサービスの存在はまったくわかりません。インジェクターの唯一の責任は、指定されたサービスモジュールをロードし、これらのモジュールに定義されたすべてのサービスプロバイダーを登録し、必要に応じて指定された関数に依存関係を注入することです。これらの依存関係は、プロバイダー「怠zy」（必要に応じてロードされます）によってインスタンス化されます。
プロバイダーは、サービスインスタンスを提供（作成）し、APIインターフェイスを外部から提供するオブジェクトです。サービスの作成とランタイムの動作を制御するために使用できます。 $ routeサービスの場合、$ routeproviderは外の世界にAPIインターフェイスを提供し、APIインターフェイスを介してアプリケーションのルーティングルールを定義できます。
AngularJSモジュールは、アプリケーションからグローバルな状態を削除し、インジェクターを構成する方法を提供する2つの問題を解決します。 AMDまたはrequire.js（Angularjsではない2つのライブラリ）とは異なり、AngularJSモジュールは、スクリプトの読み込み順序と怠zyなスクリプトの読み込みの問題を解決しようとしません。これらの目標は、AngularJが解決する必要がある問題とは何の関係もないため、これらのモジュールはそれぞれの目標を達成するために共存できます。
アプリモジュール
app/js/app.js
Angular.module（ 'Phonecat'、[]）。 config（['$ routeprovider'、function（$ routeprovider）{$ routeprovider。 Phonedetailctrl}）。アプリケーション用のルーティングを構成するには、アプリケーション用のモジュールを作成する必要があります。このモジュールのPhonecatを呼び出します。configapiを使用して、$ routeproviderを構成関数に挿入し、$ routeprovider.を使用してルーティングルールを定義することを要求します。
インジェクターの構成フェーズでは、プロバイダーも同時に注入することもできますが、インジェクターが作成され、サービスインスタンスが開始されると、外の世界によって取得されなくなります。
ルーティングルールは次のように定義されています
URLマップセグメントが /電話の場合、携帯電話リストビューが表示されます。このビューを構築するために、AngularJSはPhone-List.htmlテンプレートとPhoneListctrlコントローラーを使用します。
URLマップセグメントが /電話 /：PhoneIDの場合、電話の詳細ビューが表示されます。ここ：PhoneIDはURLの可変部分です。電話の詳細なビューを作成するために、AngularJSは電話detail.htmlテンプレートとPhonedetailctrlコントローラーを使用します。
前に作成したPhoneListCtrlコントローラーを再利用し、同時に電話の詳細なビューに新しいPhonedetailctrlコントローラーを追加し、App/JS/Controllers.jsファイルに保存します。
$ route.otherwise（{redirectto： ' /phones'}）ステートメントにより、ブラウザーアドレスがルーティングルールのいずれかに一致できない場合、リダイレクト /電話がトリガーされます。
2番目のルート宣言：PhoneIDパラメーターの使用。 $ルートサービスは、ルーティング宣言 /電話 /：PhoneIDを現在のURLと一致するテンプレートとして使用します。以下で宣言されたすべての変数（ここでは、変数は電話）が抽出され、$ RouteParamsオブジェクトに保存されます。
アプリケーションが新しく作成されたモジュールをガイドするためには、NGAPP指令の値に関するモジュールの名前を指定する必要があります。
app/index.html
<！doctype html> <html lang = "en" ng-app = "phonecat"> ...
コントローラ
App/JS/Controllers.js
... function phonedetailctrl（$ scope、$ routeparams）{$ scope.phoneid = $ routeparams.phoneid;} // phonedetailctrl。$ inject = ['$ scope'、 '$ routeparams'];テンプレート
$ルートサービスは通常、NGVIEWディレクティブで使用されます。 NGVIEW指令の役割は、現在のルートのレイアウトテンプレートに対応するビューテンプレートをロードすることです。
app/index.html
<html lang = "en" ng-app = "phonecat"> <head> ... <スクリプトsrc = "lib/angular/angular.js"> </scrip> <script src = "js/app.js"> </script> <script src = "js/controllers.js"> ng-view> </div> </body> </html>
index.htmlテンプレートのコードのほとんどを削除し、ng-view属性を持つ<div>コンテナのみを配置したことに注意してください。削除したコードは、PhoneList.htmlテンプレートに配置されます。
App/partials/phone-list.html
<div> <div> <div> <！ - サイドバーコンテンツ - >検索：<入力ng-model = "query"> sort by：<select ng-model = "orderprop"> <option value = "name"> alphabetical </option> <option値= "age"> newest </option> </select> <div> <> <> <> <> <> <フィルター：Query |。注文by "> <a href ="＃/phones/{{phone.id}} "> <img ng-src ="> </a> <a href = "＃/phones/{{phone.id}} <p> {{phone.snippet}} </p> </li> </ul> </div> </div> </div>同時に、携帯電話の詳細ビューにプレースホルダーテンプレートを追加します。
App/Partials/Phone-Detail.html
TBD：{{PhoneId}}の詳細ビュー
レイアウトテンプレートがPhoneListctrlまたはPhonedetailctrlコントローラープロパティを追加していないことに注意してください！
テスト
すべてが十分に統合されていることを自動的に確認するには、いくつかのエンドツーエンドのテストを作成し、異なるURLに移動し、正しいビューがレンダリングされていることを確認する必要があります。
... it（ 'index.htmlをindex.html＃/phones'にリダイレクトする必要があります '、function（）{browser（）。navigateto（' ..//// index.html '）; browser（）。navigateto（ '..// index.html＃/nexus-s'）;ブラウザを更新して、エンドツーエンドテストを再度実行できるか、AngularJSサーバーで実行することができます。
練習する
{{OrderProp}}バインディングをindex.htmlに追加してみてください。これは、OrderPropモデルがPhoneListCtrl管理の範囲の下でのみ表示されるためです。これは<Div ng-view>要素に関連しています。電話list.htmlテンプレートに同じバインディングを追加すると、想像されたようにバインディングがレンダリングされます。
要約します
ルートを設定し、携帯電話リストビューを実装した後、携帯電話の詳細ビューを実装するためにステップ8に進むことができます。
上記は、AngularJSルーティングとマルチビュー情報を整理することであり、将来的に関連する知識を追加し続けます。このサイトへのご支援ありがとうございます！