1.6.4AngularJSは、JavaScriptコードで定めたコントローラにより、データの扱いを定めることができます。本稿では、はじめの一歩として、コントローラで初期値をHTMLドキュメントに与えてみます。要素の属性を動的に変える」でデータバインディングのサンプルとして書いたコード002です。入力フィールドに書いたテキストがチェックボックスの右に表示され、チェックするとテキストに取り消し線が引かれます(図001)。この動きは変えずに、入力フィールドに加えるテキストと、チェックボックスのオン・オフの初期値を、JavaScriptコードで書くAngularJSのコントローラに定めてみましょう。JavaScriptでコントローラを定めるAngularJSのコントローラは、モジュールに定めます。そのモジュールを得るのがangular.module()関数です。第1引数にはモジュールの名前の文字列、第2引数は必要なモジュールの名前の文字列がエレメントに納められた配列を渡します。今回はとくにないので、配列は空にします。[])コントローラは、angular.module()関数が返すオブジェクト(angular.Module)に、controller()メソッドで加えます。第1引数はやはり文字列でコントローラの名前、第2引数には初期化のコンストラクタ関数を渡します。コンストラクタ関数)<script>要素に、JavaScriptコードをつぎのように書き加えます。controller()メソッドの関数本体でthis参照に定めたオブジェクト(todo)が、AngularJSで扱うHTMLドキュメントの要素から参照できます。オブジェクトにはふたつのプロパティ(textとdone)を与えました。モジュールとコントローラをHTMLドキュメントに定めるJavaScriptコードで定めたモジュールとコントローラは、HTMLドキュメントにディレクティブで加えます。モジュール名(todoApp)は、ng-appディレクティブにつぎのように値として与えます。ng-app="todoApp">つぎに、扱う対象となる親要素にng-controllerディレクティブで、コントローラ名を加えます。このとき、asの後に定めるプロパティを参照すると、コントローラのコンストラクタ関数で定めたプロパティが取り出せます。プロパティ"ng-controllerディレクティブは、つぎのように<div>要素に加えました。ng-modelディレクティプや{{}}に与える値は、ng-controllerディレクティブのasで定めたプロパティ(todoList)の参照から得ています。placeholder="やることを入力"></form></div>これで、コントローラ(TodoListController)からテキストとチェックボックスの初期値(todo.textとtodo.done)が与えられます(図002)。テキストの表示やスタイルのデータバインディングは、もとのまま残っています。HTMLドキュメントと<script>要素および<body>要素の中身は、以下のコード001にまとめました。サンプル001としてファイルをフレームに掲げます。DOMの参照を$scopeデータプロパティで定めるかつてのAngularJS(1.2まで)はng-controllerディレクティブでasは使わず、$scopeデータプロパティでDOMの参照を定めていました。このプロパティを用いると、前掲コード001はつぎのコード002のように書き替えられます。1のサンプルはこの書き方をしたものが多く見受けられます。2では$scopeプロパティが使えなくなりますので、thisキーワードとasで参照をやり取りする方がよいでしょう。