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)
・アニメーションの機能をサポート。

関連記事の目次

コメントを残す

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