初心者
AngularJS
まとめ

AngularJSまとめ ~モジュール~

More than 1 year has passed since last update.

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


モジュール

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
アプリの初期化情報を定義