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から。