AngularJSのmoduleについて
<本日のメニュー>
moduleとは？
moduleの作成
moduleの取得
moduleの依存関係
moduleの推奨セットアップ
moduleのメソッド
-----------------------------------------------------
moduleとは？
公式リファレンスによると
AngularJS でアプリケーションを構築する時最初に必要になるのがモジュールです。 モジュールはアプリケーションが必要としているパーツの情報を持ったオブジェクトです。 AngularJS ではアプリケーションに必要な機能は全てモジュールのメソッドを使って定義します。
だそう。とりあえず「オブジェクト」という認識で。
moduleの作成
モジュールを作成するには angular.module メソッドを使用。
たとえば、以下のように記述する。
var myModule = angular.module('MyModule', []);
第一引数はアプリケーションの名前。 上の例では'MyModule'がそれに当たる。
第二引数の配列には作成するモジュールが依存している外部モジュールの名前を列挙する。 上の例では [] に当たる。
依存するモジュールがひとつも存在しない場合でも第二引数を省略出来ない。
moduleの取得
作成時は第二引数を省略できないが、モジュールの取得には第二引数を省略する。
var myModule = angular.module('MyModule');
すでに存在するモジュール'MyModule'の取得は上記のように行う。
moduleの使い方
AngularJSは 「ng-app」 属性を持った要素を探し出し、属性値で指定されたモジュールをロードしてアプリケーションを開始する。
以下のように使いたいページに定義する。
<body ng-app="MyModule"> </body>
ちなみに、必ずしもbodyタグ内に記述しなければならないわけではない。
<html lang="en" ng-app="myModule">
このようにhtmlタグ内などでもOK!
他のタグの中で正常に動くかどうかは試していないので、今後の課題。
moduleの依存関係
モジュールは別のモジュールに定義された機能を利用することが出来る。
例えば
// sub.js
angular.module('Sub', []);
// myModule.js
angular.module('MyModule', ['Sub']);
MyModuleモジュールは自身に定義された機能以外に Sub モジュールに定義された機能も使用することが出来るようになる。Javaでいう継承みたいなもの？？
moduleの推奨セットアップ
以下のように、アプリケーションを複数のモジュールに分割することが推奨されている。
サービス宣言のための、serviceモジュール
// コントローラやディレクティブ、フィルタなどで共通して使われる値や関数を定義する場所
ディレクティブ宣言のための、directiveモジュール
// HTML に新たな振る舞いを与えたり DOM を変更したりする
フィルター宣言のための、filterモジュール
// データを加工し表示する
上記のモジュールに依存し、初期化コードを持つモジュール
// ??どんな役割か調べる！
特に大きなアプリケーションを作る際には分割した方が良い。
- Serviceモジュールとは
- Directiveモジュールとは
- Filterモジュールとは
- 初期化コードを持つモジュールとは
上記の内容については追い追い。
moduleのメソッド
以下の12つのメソッドが用意されている。
- providerメソッド
- factoryメソッド
- serviceメソッド
- valueメソッド
- constantメソッド
- decoratorメソッド
- animationメソッド
- filterメソッド
- controllerメソッド
- directiveメソッド
- configメソッド
- runメソッド
それぞれの詳細についても追い追い。
以上がAngularJSの概要。まとめると
■moduleはオブジェクト
■作成は以下のようにする
var myModule = angular.module('MyModule', []);
■moduleの取得は
var myModule = angular.module('MyModule');
■moduleを使うためには、bodyタグやhtmlタグのng-app属性にmodule名を指定する
以上
