AngularJSアプリケーション開発ガイド 第7章 その他の便利な機能 その2

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

AngularJSのモジュールのメソッド

AngularJSにはmainメソッドはない。代わりに存在するのが、モジュール。モジュールを使うと、アプリケーションの依存先や起動の手順を宣言的に指定できる。このようなアプローチが取られている理由は以下。

  • 宣言的であること。記述も理解も容易。
  • モジュール性が高いこと。開発者にコンポーネントや依存先の明確な定義を迫る。
  • テストが容易である。ユニットテストとシナリオテストが容易に実施できる。

サービス、ディレクティブ、フィルタのそれぞれについて個別にモジュールを定義することが推奨される。メインのモジュールでは、他のモジュールを依存先として指定する。こうすることで、モジュールが適度なサイズの完結したコードになり、管理やテストが用意になる。

読み込みと依存先の指定

モジュールの読み込みは、configとrunの2段階で行われる。

configブロック:すべてのプロバイダーを読み込み登録する。

runブロック:アプリケーションを起動する。

便利なメソッド

メソッド 説明
config モジュールの読み込み中に必要な処理を登録する
constant アプリケーション全体で有効な定数を宣言する
controller コントローラのセットアップを行う
directive ディレクティブを作成する
filter フィルタを作成する
run DIがセットアップされた後で、かつユーザーがアプリケーションを利用できるようになる前に行いたい処理を指定する
value アプリケーションに何らかの値を注入する

$on, $emit, $broadcastを使ったスコープ間の通信

AngularJSのスコープには階層的な入れ子構造が見られる。1つのAngularJSアプリケーションごとに、メインとなる$rootScopeが1つ用意される。他の$scopeはすべて、子のスコープを継承するか入れ子状に包含される。

$scope同士が互いに変数を共有せず、プロトタイプによる継承関係も持たない場合に、$scopeの間でやり取りを行うには、$scopeの中で発生するイベントを利用する。

// スコープに特定のイベントを監視させる
scope.$on('planetDestroyed', function(event, galaxy, planet) {
    scope.alertNearByPlanets(galaxy, planet);
});

// 親スコープと通信する
scope.$emit('planetDestroyed', scope.myGalaxy, scope.myPlanet);

// 子スコープと通信する
scope.$broadcast('selfDestructSystem', targetSystem);

// 小スコープ側でイベントを検知する
scope.$on('selfDestructSystem', function(event, targetSystem) {
    if (scope.mySystem === targetSystem) {
        scope.selfDestruct();
    }
});

イベントオブジェクトのプロパティとメソッドは以下。

名前 意味
event.targetScope イベントが発生あるいは一斉通知された元の$scope
event.currentScope 現在このイベントを処理している$scope
event.name イベントの名前
event.stopPropagation() イベントの以降の伝播を止める
event.preventDefault() defaultPreventedにtrueをセットする
event.defaultPrevented preventDefautが呼び出されている場合はtrue

次回は7.4 cookieから。

コメントをどうぞ

コメントを残す