前回のAngularJS入門(1)ではviewのみでできることでした。けれどもそれだけでは不足する機能があります。
例えばセレクトボックスのoption部分をスクリプトで作成すると汎用性が上がってくるかもしれません。基本的にはスクリプト部分はviewで記述しないのがMVCの考え方です。

今回はコントロールの記述の基本的な方法をselectメニューを作ることで学習します。
前回までのサンプルデモ

セレクトボックスの作成

AngularJSではselect要素に配列から動的にoption要素を作成する機能があります。それはディレクティブというもので「ng-option」属性を使います。
AngularJSのDirectiveについてはこちら参照
デフォルト表示されるoption要素のみHTML側で記述しておきます。なお、value値は「value=””」のように空にしておきます。

HTMLコード

ng-option = “選択値 as ラベル for 要素 in 配列”

次にスクリプトの記述です。
まず、モジュールを作成します。今回は「myApp」と言う名前のモジュールを作成しました。モジュールを作成したらviewの方にも、そのモジュール名を付けておく必要があります。今回はhtmlタグの中に「ng-app=”myApp”」としています。

モジュールを作成したらcontroller()メソッドでコントローラを作成します。controllerではDependency Injection(依存性の注入)を使って$scopeオブジェクトを読み込んでいます。
controller()メソッドの第2引数は配列の型をした奇妙な引数となっていますが、これはminify化した時に問題が起こるための対策です。
AngularJSにおけるminify化の問題点を参考
その後、$scope.citysプロパティの値を配列とオブジェクト(連想配列)で作成します。この配列部分がHTML側のselectメニューのoptionになります。

AngularJSコード

AngularJSで送信フォームデモ

モジュール化について

一般的にはモジュールとはいくつかの部品的機能を集め、まとまりのある機能を持った部品のことをいいます。
AngularJSのモジュールは、まずモジュールの構成情報やアプリの初期化情報を定義するのに使用されます。
また、モジュールのコントローラ、サービス、ディレクティブなどの、アプリを構成するコンポーネントを定義するのに使われます。
さらに他のモジュールを依存先として指定して、そのモジュールを使用することができます。他のモジュールを依存先として指定する場合は第2引数に配列型で記述します。もし依存先がない場合はこれを省略するのではなく、空の配列「[]」を指定します。

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

module(name [,requires [,config]])
name : モジュール名(String)
requires : 依存先のモジュール(配列)
config : 構成の定義(関数) ※今回説明は割愛します

Moduleオブジェクトの主なメソッドです。

メソッド 定義する内容
animation アニメーションを定義
controller コントローラを定義
directive カスタムディレクティブを定義
filter フィルターを定義
service, factory, provider, value, constant サービスを定義。どのようなサービスを作成するのかによって、メソッドを使い分ける
config モジュールの構成情報を定義
run アプリの初期化情報を定義

コントローラー

モジュールのメソッドの一つにcontrollerがあります。
controllerはmodelとviewの間に位置する橋渡しのような役目を担っているものです。

コントローラーのポイントはスコープオブジェクトです。

.controller.(‘コントローラ名’, [‘依存サービス’, function(依存サービス){
// ここにコードを書いていく
}]);

スコープはビューとコントローラの間に立って、モデルをビューにバインディングしたり、ビューから発生したイベントを受け取って何かしら振る舞う、といった役割を持ちます。$scopeはそれを実際に行なうためのオブジェクトです。

$scopeはDependency Injection(依存性の注入)と呼ばれる関数(コンストラクターを含む)にオブジェクトを渡す手法が取られています。

AngularJS入門(1)〜AngularJSで送信フォームの作成でviewの活用

カテゴリー: JavaScriptlecture