AngularJSのモジュールの概要 | VPSサーバーでWebサイト公開　備忘録　~Linux、MySQLからAJAXまで

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

１）モジュールの概要

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

２）モジュールの定義

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

３）モジュールをHTMLに適用

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

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

関連記事の目次

AngularJS

AngularJSの特徴、仕組み

ビルトインディレクティブ

サービス

カスタムディレクティブ

WordPressで使用