AngularJSのモジュールの概要

AngularJSアプリの最上位のコンポーネントであるAngularJSのモジュールについて概要を簡単にまとめました。

1)モジュールの概要


 
・関連するコードをモジュールとしてパッケージ。
 
・モジュール固有のコントローラ、サービス、ファクトリ、ディレクティブを定義出来る。
 
・モジュールをインスタンス化する際に依存性を指定して、他のモジュールを利用できる。
 
・コントローラ、サービス、ディレクティブはモジュールを介して動作するので、HTMLでAngularJSアプリを利用する場合は、ng-appディレクティブを使ってモジュール名を指定する。
 

2)モジュールの定義


 
書式
angular.module(‘モジュール名’, [依存するモジュール名を指定した配列]);
 
依存するモジュールが存在しない場合でもangular.module(“myApp”, [])のように記述し、引数を指定する。
 
※2番目の引数を指定しない場合は、新しく定義するのではなく、既存のモジュールを探してロードする。この場合は、この宣言文より前に既存のモジュールをロードしておく必要がある。
 

3)モジュールをHTMLに適用


 
ng-appディレクティブを使って定義したモジュールをHTML文書のどの範囲に適用するか指定します。
 
HTML文書全体に適用する場合は、<html ng-app=”myApp”>や<body ng-app=”myApp”>のように指定します。
 
body内のある範囲に限定して適用する場合は、<div ng-app=”myApp”>のように指定する事も出来ます。
 

4)モジュールを使って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)
 
アニメーションの機能をサポート。

関連記事の目次

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です