AngularJS TIPS
AngularJSでモジュールを定義するには？
コード規模が大きくなればモジュール化が必要になる。AngularJS専用として提供される「モジュール」の基礎を解説する。
Webアプリにおけるクライアントサイドの比重が高まるにつれて、当然ながらコード規模もいや増しています。そして、ある程度以上の規模のアプリを開発する際には、コードを目的／用途に応じて束ねるためのモジュール化は必須です。
従来、JavaScriptではオブジェクト、もしくは関数オブジェクトを利用して、モジュール（のようなもの）を定義していました。しかし、あくまで専用の仕組みではありませんので、使い勝手も悪く、コードの可読性を損なう原因ともなっていました。
そこでAngularJSでは、専用の仕組みとしてモジュールを提供しています。AngularJSで作成するコードは、原則として全てモジュールの配下で管理すべきです。
モジュールの基本
モジュールを作成するのは、angular.moduleメソッドの役割です。
まずは、具体的なコードを見てみましょう。以下は、新規のモジュールとしてmyAppを作成し、その配下にmyControllerコントローラーを登録する例です。
|
<!DOCTYPE html>
<!--2myAppモジュールを関連付け-->
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body ng-controller="myController">
<div>{{msg}}</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script>
// 1myAppモジュールを作成
var app = angular.module('myApp', []);
// 3myAppモジュールにmyControllerコントローラーを登録
app.controller('myController', function($scope) {
$scope.msg = 'Hello, AngularJS!';
});
</script>
</body>
</html>
|
まず、新規のモジュールを作成するmoduleメソッドの構文です（1）。
［構文］moduleメソッド
angular.module(name [,requires] [,config])
- name： モジュール名（
string） - requires： 依存するモジュール（
Array<string>） - config： モジュールの構成情報を設定する関数（
Function*1）
- *1 構成関数については、後日別稿で解説しますので、本稿では割愛します。
モジュールを新規作成する場合、引数requiresは必須である点に注意してください。というのも、moduleメソッドは引数requiresを省略した場合、引数nameをキーに既存のモジュールを取得しようとするためです。依存するモジュールがない場合、サンプルのように空の配列（[]）を明示的に渡します。
この例では、myAppモジュールは作成するまで存在しないので、[]を削除すると、サンプルが正しく動作しないことも確認してみましょう*2。
モジュールを利用した場合、ng-app属性にもモジュール名を明記しなければならない点にも注意してください（2）。
- *2 同名のモジュールを繰り返し作成した場合、古いモジュールは上書きされます。
作成したモジュール（＝Moduleオブジェクト）に対しては、以下のメソッドを利用することで、コントローラー／サービスをはじめ、アプリを構成する部品を登録できます（詳細は後日解説の予定）。
- animation
- config
- constant
- controller
- directive
- factory
- filter
- provider
- service
- value
本稿ではcontrollerメソッドを利用して、新規のコントローラーを作成しています（3）。コントローラーの作成方法については別稿「コントローラーを定義するには？」で解説していますので、ここではまず、アプリの構成部品はModuleオブジェクトのメソッドで、全てモジュールの配下に登録する、と理解しておいてください。
モジュールと構成部品をまとめて登録する
moduleメソッドはもちろん、Moduleオブジェクトの登録メソッドは全て、戻り値としてModuleオブジェクトを返します。この性質を利用することで、以下のようにモジュールと、その配下の構成部品を、1つの文でまとめて定義することもできます。
|
angular.module('myApp', [])
.controller('myController', function($scope) {
･･････controllerの定義･･････
})
.value('myValue', function() {
･･････valueの定義･･････
});
|
モジュールを変数appに格納する代わりに、メソッドチェーンでモジュール作成～部品登録の処理を連結しているのです。
モジュールの依存関係を設定する
より複雑なアプリになってきた場合、アプリを複数のモジュールで管理するような状況も出てきます。そのような場合、あるモジュールから別のモジュールの構成部品を利用するには、モジュールの依存関係を設定しなければなりません。先ほど説明したmoduleメソッドの第2引数requiresです。引数requiresには、[モジュール名, ...] の配列形式で指定します。
例えば以下のコードでは、モジュール間が以下のような依存関係にあります。
- メインモジュール（
myApp）はmySubモジュールに依存する mySubモジュールは、ngCookies／ngSanitizeモジュールに依存する
|
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<!--myController2コントローラーを適用-->
<body ng-controller="myController2">
<div>{{msg}}</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-cookies.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-sanitize.min.js"></script>
<script>
// mySubモジュールの配下にmyController2コントローラーを登録
angular.module('mySub', [ 'ngCookies', 'ngSanitize' ])
.controller('myController2', function($scope) {
$scope.msg = 'Thank you, AngularJS!';
});
// myAppモジュールはmySubモジュールに依存
angular.module('myApp', [ 'mySub' ])
.controller('myController', function($scope) {
$scope.msg = 'Hello, AngularJS!';
});
</script>
</body>
</html>
</html>
|
これによって、myAppモジュールからmySubモジュール（myController2コントローラー）を、mySubモジュールからはngCookies／ngSanitizeモジュールを、それぞれ利用できるようになります。
接頭辞「ng」で始まるモジュールは、AngularJSの標準モジュールです。AngularJSそのものが複数のモジュールから構成されているのです。以下に、主なモジュールと対応する.jsファイルをまとめます。AngularJSでは、モジュール単位で.jsファイルも分離されていますので、ngモジュール以外を利用する場合には、追加で対応する.jsファイルをインポートしなければなりません。個々のモジュールについては、あらためて関連するTIPSで解説の予定です。
| モジュール名 | ライブラリ | 概要 |
|---|---|---|
| ng | angular.min.js | AngularJSのコア機能 |
| ngAnimate | angular-animate.js | アニメーション機能 |
| ngAria | angular-aria.min.js | アクセシビリティに関わるARIA（Accessible Rich Internet Applications）属性の付与 |
| ngCookies | angular-cookies.min.js | クッキーの読み書き |
| ngMessages | angular-messages.js | メッセージの制御 |
| ngMock | angular-mocks.js | ユニットテストのためのモックを提供 |
| ngMockE2E | angular-mocks.js | インテグレーションテスト（＝結合テスト）のためのモックを提供 |
| ngResource | angular-resource.js | サーバーサイドへのRESTfulなアクセスをサポート |
| ngRoute | angular-route.js | ルーティング機能 |
| ngSanitize | angular-sanitize.js | サニタイジング機能 |
| ngTouch | angular-touch.js | タッチスクリーンにおけるタッチ／スワイプなどをサポート |
ただし、ngモジュールはコアとなるモジュールですので、明示的な依存関係の宣言は不要です。
API：angular.module カテゴリ：ng（コアモジュール） > function（関数）
API：angular.Module カテゴリ：ng（コアモジュール） > type（型）
API：ngApp（ng-app） カテゴリ：ng（コアモジュール） > directive（ディレクティブ）
API：ng（コアモジュール）カテゴリ：モジュール（Modules）
API：ngAnimate カテゴリ：モジュール（Modules）
API：ngAria カテゴリ：モジュール（Modules）
API：ngCookies カテゴリ：モジュール（Modules）
API：ngMessages カテゴリ：モジュール（Modules）
API：ngMock カテゴリ：モジュール（Modules）
API：ngMockE2E カテゴリ：モジュール（Modules）
API：ngResource カテゴリ：モジュール（Modules）
API：ngRoute カテゴリ：モジュール（Modules）
API：ngSanitize カテゴリ：モジュール（Modules）
API：ngTouch カテゴリ：モジュール（Modules）
※以下では、本稿の前後を合わせて5回分（第1回～第5回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
1. AngularJSを利用するには？
クライアントサイド開発でも、本格的なアプリケーションフレームワークを利用しよう。世界中で人気爆発中のAngularJSの基本機能を目的別リファレンスの形式でまとめる連載スタート。
2. 【現在、表示中】≫ AngularJSでモジュールを定義するには？
コード規模が大きくなればモジュール化が必要になる。AngularJS専用として提供される「モジュール」の基礎を解説する。
3. AngularJSでコントローラーを定義するには？
AngularJSアプリの最も基本的な構成要素である「コントローラー」の基礎として、コントローラー経由でスコープを準備し、テンプレートに反映させる方法を説明する。
5. モデルをテキストボックスなどのフォーム要素にバインドするには？（ng-model）
ビューの変更をモデルに反映させ、逆にモデルの変更をビューに反映させる、AngularJSの双方向データバインディングの基本を解説する。デフォルト値の設定方法も説明。
