このステップでは、アプリがデータを取得する方法を改善します。
作業ディレクトリをリセットしてください：
gitチェックアウト-fステップ11
アプリケーションの最後の改善点は、RESTFULクライアントを表すカスタムサービスを定義することです。このクライアントを使用すると、基礎となる$ HTTPサービス（API、HTTPメソッド、およびURL）を気にせずにXHRリクエストを簡単に送信できます。
ステップ9とステップ10の最も重要な違いを以下に示します。 GitHubの完全な違いを見ることができます。
テンプレート
カスタマイズされたサービスはApp/JS/Servicesで定義されているため、このファイルをレイアウトテンプレートに導入する必要があります。さらに、ngresourceモジュールとその中に$リソースサービスを含むangularjs-resource.jsファイルもロードする必要があります。後で使用します：
app/index.html
... <スクリプトsrc = "js/services.js"> </script> <script src = "lib/angular/angular-resource.js"> </script> ...
仕える
App/JS/Services.js
Angular.module（ 'Phonecatservices'、['ngresource']）。 Factory（ 'phone'、function（$ resource）{return $ resource（ 'phones/：phoneId.json'、{}、{query：{method： 'get'、params：{phoneId： 'phones'}、isarray：true}}）;}）;モジュールAPIを使用して、ファクトリメソッドを介してカスタムサービスを登録します。サービス名の電話と工場の機能を渡します。工場の関数とコントローラーのコンストラクターは類似しており、どちらも関数パラメーターを介して依存関係サービスを宣言します。電話サービスは、$リソースサービスに依存することを宣言しています。
$ Resource Serviceを使用すると、わずか数行のコードでRestfulクライアントを作成できます。当社のアプリケーションは、このクライアントを使用して、基礎となる$ httpサービスを置き換えます。
app/js/app.js
... Angular.Module（ 'Phonecat'、['Phonecatfilters'、 'Phonecatservices']）...
Phonecat依存関係アレイにPhonecatservicesを追加する必要があります。
コントローラ
基礎となる$ httpサービスをリファクタリングし、新しいサービス電話に配置することにより、サブコントローラー（PhoneListctrlおよびPhonedetailctrl）を大幅に簡素化できます。 AngularJSの$リソースは、$ HTTPよりもRestfulデータソースとの対話に適しています。そして今、私たちはコントローラーコードが何をしているのかを理解しやすくなります。
App/JS/Controllers.js
... function phoneListctrl（$ scope、phone）{$ scope.phones = phone.query（）; $ SCOPE.ORDERPROP = 'AGE';} // PhoneListctrl。$ inject = ['$ scope'、 'phone']; function phonedetailctrl（$ scope、$ routeparams、phone）{$ scope.phone = phone.get（{phoneId：$ routeparams.phone）、$ scope（chone）{$ scope.mainimagurl; }）; $ scope.setimage = function（imageurl）{$ scope.mainimageurl = imageurl; }} // phonedetailctrl。$ inject = ['$ scope'、 '$ routeparams'、 'phone'];PhoneListctrlでは、次のことに注意してください。
$ http.get（ 'phones/phones.json'）。成功（function（data）{$ scope.phones = data;}）;変更：
$ scope.phones = phone.query（）;
この簡単なステートメントを使用して、すべての携帯電話を照会します。
注意する必要があるもう1つのことは、上記のコードで、電話サービス方法を呼び出すとき、コールバック関数に合格しないことです。これは同期的に返されるようですが、まったくそうではありません。同期的に返されるのは「未来」です。オブジェクトであり、XHRがそれに応じて戻ってきたときにデータで満たされます。 AngularJSのデータ結合を考えると、将来を使用してテンプレートに結合できます。その後、データが到着すると自動的に更新されます。
時には、将来のオブジェクトとデータバインディングのみに依存するだけで、私たちのニーズを満たすのに十分ではないため、これらの場合、サーバーの応答を処理するためにコールバック関数を追加する必要があります。 Phonedetailctrlコントローラーは、コールバック関数にmainimageurlを設定することによる説明です。
テスト
ユニットテストを変更して、新しいサービスがHTTPリクエストを開始し、予想どおりに処理することを確認します。このテストでは、コントローラーがサービスで正しく動作するかどうかも確認します。
$リソースサービスは、更新を追加してリソースを削除することで得られたオブジェクトを強化します。 To -Equal Matcherを使用する場合、テスト値が応答と正確に同等ではないため、テストは失敗します。この問題を解決するには、最近定義されたToequaldatajasmineマッチャーを使用する必要があります。 Toequaldata Matcherが2つのオブジェクトを比較すると、オブジェクトのプロパティのみを考慮し、すべての方法を無視します。
test/unit/controllersspec.js：
（ 'Phonecat Controllers'、function（）{beforeeach（function（）{this.addmatchers（{toequaldata：function（expection）{return angular.equals（this.actual、expected）;}}）;}）; beforeeach（module（ 'phonecatservices'））; $ httpbackend（function（_ $ httpbackend_、$ rotscope、$ controller）{$ httpbackend_; $ httpbackend.expectget（ 'phones/phones.json'）。 $ rootscope。$ new（）; scope.phones）スコープ、$ httpbackend、ctrl、xyzphonedata = function（）{name： 'phone xyz'、画像：['image/url1.png'、 'image/url2.png']}}; _ $ httpbacked.expectget（xyz.json '） function（）{scope.phone）。./scripts/test.shを実行してテストを実行すると、次の出力が表示されます。
クロム：ランナーリセット......合計4テスト（合格：4;失敗：0;エラー：0）（3.00ミリ秒）クロム19.0.1084.36 Mac OS：4テストを実行する（合格：4;失敗：0;エラー0）（3.00ミリ秒）（3.00ミリ秒）
要約します
完成！かなり短い時間でWebアプリケーションを作成しました。最後の章では、次に何をすべきかについて言及します。
上記は、Angularjs resとカスタマイズされたサービスを整理する情報です。今後も関連情報を追加し続けます。誰もがAngularjsを学ぶのに役立つことを願っています！