AngularJSまとめ ~モジュール~

モジュールについていまいちわかっていなかったので調べました。

モジュール

AngularJSでは、モジュールという単位でコードを分割することができます。
以下、モジュールの特徴です。

• モジュールにはアプリケーションがどのように立ち上がるのか(モジュールの構成情報、アプリの初期化情報)を定義することができる
• モジュール固有のコントローラ、サービス、ディレクティブなどの、アプリを構成するコンポーネントを定義することができる
• モジュールの中で他モジュールを依存先として指定して、他モジュールを使用できる

大規模なアプリや複雑なアプリでは複数モジュールを使用してアプリを管理することがあります。
また、サードパーティのサービスはモジュールとして提供されているので、これらを依存先として定義して使用することができます。

モジュールは、アプリの機能毎(機能A、機能B、機能C...など)に分割することもできますし、コンポーネントの種類ごと(コントローラ、サービス、ディレクティブ...など)に分割することもできます。

モジュールの作成

モジュールを作成するためのメソッドとして、angular.moduleメソッドが用意されています。

moduleメソッド

module(name [,requires [,config]])

name : モジュール名(String)
requires : 依存先のモジュール(配列)
config : 構成の定義(関数)　※今回説明は割愛します

requires 、configは省略可能です。
myAppという名前のモジュールを作成したい場合は以下のようにします。

sample.js

var app = angular.module('myApp' , []);

これでmyAppモジュールが作成されます。
モジュールを新規作成する場合、依存するモジュールがなかったとしても[](requires)が必要となります。
[](requires)を省略した場合、すでに作成されたモジュールを取得しようとします。
モジュールが未作成の状態で[](requires)を省略したmoduleメソッドを使用すると、エラーが発生します。

sample.js

var app1 = angular.module('myApp' , []);
var app2 = angular.module('myApp');

よって、上記のapp1とapp2の中身は同じものが取得できます。

モジュールにはコンポーネントを定義できます。
すでに作成されたモジュールの取得は、一つのモジュールの宣言と、そのモジュールに対するコンポーネントの定義を別ファイルに分けたい、といった場合に有効となります。

依存モジュールの設定

moduleメソッドを使用して、依存するモジュールを設定することができます。
myAppモジュールで、ngMessagesモジュールを使用したい場合は、以下のようになります。

sample.js

var app = angular.module('myApp' , [’ngMessages’]);

ngMessagesモジュールはAngularJSの標準モジュールです。
AngularJS自体も複数のモジュールから構成されています(細かくモジュールを分割することで、不要なモジュールをインポートするする必要がなくなります)。
もちろん、自分で定義した別モジュールを依存先として設定することも可能です。

モジュールへの設定

アプリの構成部品(コンポーネント)をモジュールに登録することができます。
moduleメソッドの戻り値はModuleオブジェクトです。
Moduleオブジェクトの持つメソッドを使用して、コンポーネントを登録します。

myAppモジュールにmyControllerコントローラコンポーネントを登録する場合は、以下のようになります。

sample.js

angular.module('myApp' , [])
  .controller('myController', function(){
    // コントローラの定義
  });

以下、controllerメソッドの定義説明です。

controllerメソッド

controller(name, conrtoller)
name : コントローラ名(String)
conrtoller : コントローラのコンストラクタ(関数)

controllerメソッドも含み、Moduleオブジェクトのメソッドのほとんどは戻り値として自分自身(Moduleオブジェクト)を返します。そのため、以下のように複数のコンポーネントを一つの文で登録することも可能です。

sample.js

angular.module('myApp' , [])
  .controller('myController', function(){
    // コントローラの定義
  })
  .service('myService', function(){
    // サービスの定義
  });

以下、Moduleオブジェクトの主なメソッドです。

メソッド	定義する内容
animation	アニメーションを定義
controller	コントローラを定義
directive	カスタムディレクティブを定義
filter	フィルターを定義
service, factory, provider, value, constant	サービスを定義。どのようなサービスを作成するのかによって、メソッドを使い分ける
config	モジュールの構成情報を定義
run	アプリの初期化情報を定義