AngularJS入門（２）〜AngularJSで送信フォームの作成でモジュールの活用

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

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

セレクトボックスの作成

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

HTMLコード

<select name="city" id="city" ng-model="user.city" ng-options="city.val as city.title for city in citys">
 <option value="">選択してください。</option>
</select>

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

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

AngularJSコード

angular.module('myApp',[])
.controller('MyController',['$scope',function($scope){
  $scope.citys = [
    {val:'東京都',title:'東京都'},{val:'神奈川県',title:'神奈川県'},{val:'埼玉県',title:'埼玉県'},{val:'千葉県',title:'千葉県'},
  ]
}])

AngularJSで送信フォームデモ

モジュール化について

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

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

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

コントローラー

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

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

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

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

AngularJS入門（１）〜AngularJSで送信フォームの作成でviewの活用