モジュールを使った依存関係の管理
- コントローラ：ビューのテンプレートに対して適切なデータと関数を公開する
- モジュール：アプリケーションの機能ごとに依存関係をグループ化し、その依存先を自動的に取得
- （依存性の注入、Dipendency Injection = DI）
- サービス：依存先のこと。シングルトンオブジェクトで、アプリケーションの機能に必要な処理を提供
- AngularJSが提供するサービスの例：$location, $route, $http
コントローラでサーバと通信するようなコードを書くと、以下のような問題が発生する
- コントローラ毎に同じような処理が重複する => 保守の手間が増える
- コントローラの責任の境界が不明確になる => コードが読みにくくなる
- ユニットテストを行いづらくなる（サーバを利用したテストは遅い、モンキーパッチは複雑で不安定）
モジュールと依存性の注入を適用すれば、この問題が解決できる。
アプリケーションに固有の処理についてはすべて、自分で定義したサービスの中で行うべき。サービスはそれを必要としているすべてのコントローラの間で共有できる。サービスはコントローラ間でのやり取りや内部状態の共有にも適している。
AngularJSに用意されているサービスの名前は$で始まるので、自分で作成するサービスについては競合を避けるために$以外で始まる名前にすべき。
サービスはモジュールのオブジェクトに用意されているAPIを使って定義する。
| 関数 | 定義 |
|---|---|
| provider | カスタマイズ可能なサービスを、複雑なロジックで生成する |
| factory | カスタマイズ不可能なサービスを、複雑なロジックで生成する |
| service | カスタマイズ不可能なサービスを、単純なロジックで生成する |
factory()を使ってItemsサービスを作るコード例は以下。
var shoppingModule = angular.module("ShoppingModule", []);
shoppingModule.factory("Items", function () {
var items = {};
items.query = function () {
// サーバからデータを取得
return data;
}
return items;
});
サービスは、以下のように利用する。
function ShoppingController($scope, Items) {
$scope.items = Items.query();
}
AngularJSはShoppingControllerを生成する際に、$scopeとItemsサービスを渡す。これは、パラメータ名のマッチングを通じて行われる。
サードパーティモジュールの読み込み
angular.module()の第2引数にモジュール名の配列を渡すことで、サードパーティモジュール等の依存関係を指定できる。
var appMod = angular.module("app", ["ThirdPartyModule"]);