これまでのところ、3つのハードコーディングされたモバイルレコードデータセットを使用しています。これで、Angularjsをビルトインサービス$ httpを使用して、モバイルレコードデータのより大きなセットを取得します。 AngularJSの依存関係注入（DI）関数を使用して、このAngularJSサービスをPhoneListCtrlコントローラーに提供します。
作業ディレクトリをリセットしてください：
gitチェックアウト-fステップ5
ブラウザを更新すると、20枚の電話のリストが表示されます。
ステップ4とステップ5の最も重要な違いを以下に示します。 GitHubの完全な違いを見ることができます。
データ
プロジェクトのアプリ/電話/電話ファイルは、JSON形式で大きな携帯電話のリストを保存するデータセットです。
このファイルの例は次のとおりです。
[{"age"：13、 "id"： "motorola-defy-with-motoblur"、 "name"： "Motorola dafy/u2122 with motoblur/u2122"、 "snippet"： "あなたはすべての人生を投げる準備ができていますか？" ...}、...]コントローラ
Angularjs Service $ httpをコントローラーで使用して、WebサーバーにHTTPリクエストを開始して、App/Phones/Phones.jsonファイルからデータを取得します。 $ HTTPは、一部のWebアプリケーションの一般的な操作を処理できるAngularJSの多くの組み込みサービスの1つにすぎません。 AngularJは、これらのサービスが必要な場所にこれらのサービスを挿入できます。
サービスは、Angularjsの依存関係噴射DIサブシステムを通じて管理されます。依存関係噴射サービスは、Webアプリケーションを十分に構築し（プレゼンテーションレイヤー、データ、および制御のコンポーネントの分離など）、ゆるく結合します（コンポーネントはコンポーネント間の依存関係の問題を解決する必要はありません。これらはすべてDIサブシステムによって処理されます）。
App/JS/Controllers.js
function phoneListctrl（$ scope、$ http）{$ http.get（ 'phones/phones.json'）。成功（function（data）{$ scope.phones = data;}）; $ scope.orderprop = 'age';}$ httpは、WebサーバーへのHTTP Get Requestを開始し、電話/Phones.jsonを要求します（URLはindex.htmlファイルに関連していることに注意してください）。サーバーは、JSONファイルのデータで応答します。 （この応答は、バックエンドサーバーからリアルタイムで動的に生成される場合があります。しかし、ブラウザではすべて同じように見えます。簡単にするために、チュートリアルでJSONファイルを使用しました。）
$ httpサービスは、成功を使用して[オブジェクト応答] [ng。$ q]を返します。非同期応答が到着すると、このオブジェクト応答関数は、サーバー応答データを処理し、スコープ付き電話データモデルにデータを割り当てるために使用されます。 AngularJSがこのJSON応答を自動的に検出し、私たちのために解析されていることに気付きました！
AngularJSサービスを使用するには、このようなコントローラーコンストラクターのパラメーターとして必要なサービスの名前を宣言する必要があります。
function phoneListctrl（$ scope、$ http）{...}
コントローラーが構築されると、AngularJSの依存関係インジェクターがこれらのサービスをコントローラーに注入します。もちろん、依存関係インジェクターは、必要なサービスが存在する可能性のある推移的依存関係も処理します（通常、1つのサービスは他のサービスに依存します）。
インジェクターはそれらを使用して対応する依存関係を見つけるため、パラメーター名が非常に重要であることに注意してください。
'$'プレフィックス命名習慣
独自のサービスを作成することができ、実際にステップ11で学習します。命名習慣として、AngularJSビルトインサービス、スコープメソッド、およびその他のAngularJS APIはすべて、名前の前に「$」プレフィックスを使用します。 「$」プレフィックスを使用して独自のサービスとモデルに名前を付けないでください。そうしないと、名前の競合が発生する場合があります。
JS圧縮について
AngularJSは、コントローラーコンストラクターのパラメーター名を介して依存関係サービス名を導入するためです。そのため、PhoneListCtrlコントローラーのJSコードを圧縮する場合、そのすべてのパラメーターが同時に圧縮されます。現時点では、依存噴射システムはサービスを正しく識別しません。
圧縮によって引き起こされる問題を克服するには、コントローラー関数の$ injectプロパティにサービス識別子に依存する配列を割り当てます。
phoneListctrl。$ inject = ['$ scope'、 '$ http'];
別の方法を使用して、依存関係リストを指定し、圧縮の問題を回避することもできます - javaScriptアレイを使用してコントローラーを構築します。サービスを一連の文字列（依存関係の名前を表す）に注入するようにし、アレイの最後の要素はコントローラーのメソッド関数です。
var phoneListctrl = ['$ scope'、 '$ http'、function（$ scope、$ http）{ / * constructor body * /}];
上記の両方の方法は、AngularJが注入できる機能と完全に機能します。選択する方法は、プロジェクトのプログラミングスタイルに完全に依存します。配列メソッドを使用することをお勧めします。
テスト
test/unit/controllerspec.js：
現在、依存関係噴射を使用しており、コントローラーには多くの依存関係サービスも含まれているため、コントローラーのテストを構築するのは少し複雑です。新しい操作を使用し、$ HTTPを含むコンストラクターにいくつかの擬似実装を提供する必要があります。ただし、推奨される方法（およびさらに簡単な）は、AngularJSが次のシナリオで行うのと同じ方法を使用して、テスト環境でコントローラーを作成することです。
describe（ 'Phonecat Controllers'、function（）{describe（ 'phonelistctrl'、function（）{var scope、ctrl、$ httpbackend; beforeeach（indect（function（_ $ httpbackend_、$ rotscope、$ controller）{$ httpbackend = _ $ httpbackend_; $ httpbacked.expectget（ 'phones.json'）、{nexus s}、 'scope = $ rootscope。注：テスト環境にJasmineとAngular-Mock.jsをロードしたため、インジェクターを取得して構成するのに役立つ2つのヘルパーメソッド、モジュールとインジェクションがあります。
次の方法を使用して、テスト環境でコントローラーを作成します。
注入法を使用して、$ Rootscope、$ Controller、$ HTTPBackend ServiceインスタンスをJasmineの前に挿入します。これらのインスタンスはすべてインジェクターからのものですが、このインジェクターは各テスト内で再現されます。これにより、すべてのテストがよく知られている出発点から始まり、各テストが他のテストから独立していることが保証されます。
$ rootscope。$ new（）を呼び出して、コントローラーの新しいスコープを作成します。
PhoneListctrl関数と作成されたスコープは、注入された$コントローラー関数のパラメーターとして渡されます。
現在のコードは、$ HTTPサービスを使用してコントローラーの電話リストデータを取得する前に、PhonElistCtrlサブスコープを作成するため、コントローラーからのリクエストを待つためにテストスイートに指示する必要があります。これを行うことができます：
リクエストサービス$ httpbackendを前の機能に注入します。これはこのサービスの擬似バージョンです。そうすることで、製品環境でのすべてのXHRおよびJSONPリクエストを処理することができます。サービスの擬似バージョンにより、ネイティブのAPIやグローバル状態を考慮せずにテストを作成できます。テストの悪夢を構成することができます。
$ httpbackend.expectgetメソッドを使用して、$ httpbackendサービスを指示してHTTPリクエストを待ち、それに応答する方法を伝えます。 $ httpbackend.flushメソッドを呼び出すまで、応答は発行されないことに注意してください。
今、
それ（ 'XHRから取得した2つの電話で「電話」モデルを作成する必要があります'、function（）{expect（scope.phones）.tobeundefined（）; $ httpbackend.flush（）; expect（scope.phones）.toequal（[{name： 'nexus s'}、{name： 'motorola droid'）;ブラウザでは、$ httpbackend.flush（）を呼び出して（フラッシュ）リクエストキューをクリアします。これにより、$ httpサービス（約束とは何かについてはこちらを参照）によって返される約束が標準的な応答として解釈されます。
携帯電話のデータモデルがすでに範囲にあることを確認するために、いくつかのアサーションを設定しました。
最後に、OrderPropのデフォルト値が正しく設定されていることを確認します。
it（ 'OrderProp Modelのデフォルト値を設定する必要があります'、function（）{expect（scope.orderprop）.tobe（ 'age'）;}）;練習する
{{phones |を追加しますjson}} index.htmlの最後にバインディングし、JSON形式の携帯電話のリストを観察します。
PhoneListCtrlコントローラーでは、HTTP応答を前処理して、電話リストの最初の5つのみが表示されるようにします。 $ httpコールバック関数で次のコードを使用します。
$ scope.phones = data.splice（0、5）;
要約します
これで、AngularJSサービスを使用することがどれほど簡単か（これはAngularJSサービスの依存噴射メカニズムのおかげですべて）、ステップ6に移動すると、サムネイルと電話にリンクを追加します。
このウェブサイトへのご支援に感謝し、今後も関連記事を更新し続けてください！