The sky is the limit

ハイブリッドアプリ開発、人工知能(機械学習など)に関する備忘録 たまに宇宙のことも語る【AngularJS、Monaca、Cordova、OnsenUI】

【AngularJS】moduleとはなにか【モジュール】

AngularJSのmoduleについて

 

f:id:duo-taro100:20160218004611p:plain

 

<本日のメニュー>

moduleとは?

moduleの作成  

moduleの取得 

moduleの依存関係  

moduleの推奨セットアップ   

moduleのメソッド

-----------------------------------------------------

 

f:id:duo-taro100:20160322234907p:plain

moduleとは?

公式リファレンスによると

AngularJS でアプリケーションを構築する時最初に必要になるのがモジュールです。

モジュールはアプリケーションが必要としているパーツの情報を持ったオブジェクトです。

AngularJS ではアプリケーションに必要な機能は全てモジュールのメソッドを使って定義します。

だそう。とりあえず「オブジェクト」という認識で。

 

moduleの作成

モジュールを作成するには angular.module メソッドを使用。

たとえば、以下のように記述する。

var myModule = angular.module('MyModule', []);

第一引数はアプリケーションの名前。 上の例では'MyModule'がそれに当たる。

第二引数の配列には作成するモジュールが依存している外部モジュールの名前を列挙する。 上の例では [] に当たる。
依存するモジュールがひとつも存在しない場合でも第二引数を省略出来ない。

 

moduleの取得

作成時は第二引数を省略できないが、モジュールの取得には第二引数を省略する。 

var myModule = angular.module('MyModule');

すでに存在するモジュール'MyModule'の取得は上記のように行う。

 

moduleの使い方

AngularJSは 「ng-app」 属性を持った要素を探し出し、属性値で指定されたモジュールをロードしてアプリケーションを開始する。

以下のように使いたいページに定義する。

<body ng-app="MyModule">
</body>

ちなみに、必ずしもbodyタグ内に記述しなければならないわけではない。 

<html lang="en" ng-app="myModule">

このようにhtmlタグ内などでもOK!
他のタグの中で正常に動くかどうかは試していないので、今後の課題。

 

moduleの依存関係

モジュールは別のモジュールに定義された機能を利用することが出来る。
例えば 

// sub.js
angular.module('Sub', []);
// myModule.js
angular.module('MyModule', ['Sub']);

MyModuleモジュールは自身に定義された機能以外に Sub モジュールに定義された機能も使用することが出来るようになる。Javaでいう継承みたいなもの??

 

moduleの推奨セットアップ

以下のように、アプリケーションを複数のモジュールに分割することが推奨されている。 

サービス宣言のための、serviceモジュール  
      // コントローラやディレクティブ、フィルタなどで共通して使われる値や関数を定義する場所
ディレクティブ宣言のための、directiveモジュール  
      // HTML に新たな振る舞いを与えたり DOM を変更したりする
フィルター宣言のための、filterモジュール  
      // データを加工し表示する
上記のモジュールに依存し、初期化コードを持つモジュール  
      // ??どんな役割か調べる!

特に大きなアプリケーションを作る際には分割した方が良い。

  • Serviceモジュールとは
  • Directiveモジュールとは
  • Filterモジュールとは
  • 初期化コードを持つモジュールとは

上記の内容については追い追い。

 

moduleのメソッド

以下の12つのメソッドが用意されている。
- providerメソッド
- factoryメソッド
- serviceメソッド
- valueメソッド
- constantメソッド
- decoratorメソッド
- animationメソッド
- filterメソッド
- controllerメソッド
- directiveメソッド
- configメソッド
- runメソッド 

それぞれの詳細についても追い追い。

 

以上がAngularJSの概要。まとめると

 

■moduleはオブジェクト

■作成は以下のようにする

var myModule = angular.module('MyModule', []);

■moduleの取得は

var myModule = angular.module('MyModule');

 

■moduleを使うためには、bodyタグやhtmlタグのng-app属性にmodule名を指定する

 

f:id:duo-taro100:20160218005701p:plain

 

以上