AngularJSアプリの最上位のコンポーネントであるAngularJSのモジュールについて概要を簡単にまとめました。
１）モジュールの概要
・関連するコードをモジュールとしてパッケージ。
・モジュール固有のコントローラ、サービス、ファクトリ、ディレクティブを定義出来る。
・モジュールをインスタンス化する際に依存性を指定して、他のモジュールを利用できる。
・コントローラ、サービス、ディレクティブはモジュールを介して動作するので、HTMLでAngularJSアプリを利用する場合は、ng-appディレクティブを使ってモジュール名を指定する。
２）モジュールの定義
○構文
angular.module(‘モジュール名’, [依存するモジュール名を指定した配列]);
依存するモジュールが存在しない場合でもangular.module(“myApp”, [])のように記述し、引数を指定する。
※２番目の引数を指定しない場合は、新しく定義するのではなく、既存のモジュールを探してロードする。この場合は、この宣言文より前に既存のモジュールをロードしておく必要がある。
３）モジュールをHTMLに適用
ng-appディレクティブを使って定義したモジュールをHTML文書のどの範囲に適用するか指定します。
HTML文書全体に適用する場合は、<html ng-app=”myApp”>や<body ng-app=”myApp”>のように指定します。
body内のある範囲に限定して適用する場合は、<div ng-app=”myApp”>のように指定する事も出来ます。
４）モジュールを使ってAngularJSコンポーネントを定義
angular.moduleメソッドを実行するとModuleオブジェクトがリターンされます。このModuleオブジェクトを使って下記コンポーネントを定義できます。
○config(callback)
・モジュールを設定する関数を登録。
・モジュールがロードされるされるときに実行される。
○run(callback)
・すべてのモジュールがロード、設定された後に呼び出される関数を定義。
○provider(name, type)、factory(name, provider)、service(name, constructor)
・サービスを定義して生成。
○constant(key, value)、value(name, value)
・定数をリターンするサービスを定義。
・constantはモジュールのconfig関数にもインジェクトできる。
○controller(name, constructor)
・コントローラを定義して生成。
○directive(name, factory)
・カスタムディレクティブを定義。
・標準のHTMLタグを拡張できる。
○filter(name, factory)
・フィルターを定義。
・ユーザーに表示するデータをフォーマット。
○animation(name, factory)
・アニメーションの機能をサポート。 関連記事の目次