AngularJSアプリケーション開発ガイド 第2章 AngularJSアプリケーションの構造 その3(モジュールを使った依存関係の管理)

AngularJSアプリケーション開発ガイド

モジュールを使った依存関係の管理

  • コントローラ:ビューのテンプレートに対して適切なデータと関数を公開する
  • モジュール:アプリケーションの機能ごとに依存関係をグループ化し、その依存先を自動的に取得
    • (依存性の注入、Dipendency Injection = DI)
  • サービス:依存先のこと。シングルトンオブジェクトで、アプリケーションの機能に必要な処理を提供
    • AngularJSが提供するサービスの例:$location, $route, $http

コントローラでサーバと通信するようなコードを書くと、以下のような問題が発生する

  • コントローラ毎に同じような処理が重複する => 保守の手間が増える
  • コントローラの責任の境界が不明確になる => コードが読みにくくなる
  • ユニットテストを行いづらくなる(サーバを利用したテストは遅い、モンキーパッチは複雑で不安定)

モジュールと依存性の注入を適用すれば、この問題が解決できる。

アプリケーションに固有の処理についてはすべて、自分で定義したサービスの中で行うべき。サービスはそれを必要としているすべてのコントローラの間で共有できる。サービスはコントローラ間でのやり取りや内部状態の共有にも適している。

AngularJSに用意されているサービスの名前は$で始まるので、自分で作成するサービスについては競合を避けるために$以外で始まる名前にすべき。

サービスはモジュールのオブジェクトに用意されているAPIを使って定義する。

関数 定義
provider カスタマイズ可能なサービスを、複雑なロジックで生成する
factory カスタマイズ不可能なサービスを、複雑なロジックで生成する
service カスタマイズ不可能なサービスを、単純なロジックで生成する

factory()を使ってItemsサービスを作るコード例は以下。

サービスは、以下のように利用する。

AngularJSはShoppingControllerを生成する際に、$scopeとItemsサービスを渡す。これは、パラメータ名のマッチングを通じて行われる。

サードパーティモジュールの読み込み

angular.module()の第2引数にモジュール名の配列を渡すことで、サードパーティモジュール等の依存関係を指定できる。

コメントを残す