これまでのところ、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に移動すると、サムネイルと電話にリンクを追加します。
このウェブサイトへのご支援に感謝し、今後も関連記事を更新し続けてください!