AngularJS TIPS
AngularJSでコントローラーを定義するには？
AngularJSアプリの最も基本的な構成要素である「コントローラー」の基礎として、コントローラー経由でスコープを準備し、テンプレートに反映させる方法を説明する。
AngularJSアプリの重要な構成要素として、コントローラーとスコープがあります。
スコープ（$scope）とは、テンプレート（HTML）とJavaScriptによるモデルとを橋渡しするためのオブジェクト。AngularJSの世界では、テンプレートで利用する値や挙動*1はスコープを介して引き渡すのが、まず基本です。
そして、コントローラーとは、このスコープを準備するための仕組みです。その性質上、コントローラーはAngularJSアプリの最も基本的な構成要素といってもよいでしょう。
本稿では、コントローラー経由でスコープを準備し、テンプレートに反映させる例を見ていきます。
- *1 具体的にはイベントリスナーです。詳細については、別稿「AngularJS： イベントリスナーを登録するには？」で解説しています。
コントローラーの基本
以下は、コントローラーで準備したメッセージ（＝msgプロパティ）の値を、ページに反映させる、ごく基本的な例です。
|
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body>
<!--コントローラーを適用2-->
<div ng-controller="myController">
{{msg}}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script>
// myAppモジュールを新規に作成
angular.module('myApp', []);
// myAppモジュールにmyControllerコントローラーを登録1
angular.module('myApp')
.controller('myController', function($scope) {
$scope.msg = 'Hello, AngularJS!';
});
</script>
</body>
</html>
|
コントローラーを作成するには、Moduleオブジェクトのcontrollerメソッドを利用します（1）。サンプルでは、myControllerという名前のコントローラーを作成しています。
［構文］controllerメソッド
controller(name, constructor)
- name： コントローラー名
- constructor： コントローラーのコンストラクター関数
コンストラクター関数（＝controllerメソッドの引数constructor）の引数に渡している$scopeがスコープオブジェクトです。あとは、コンストラクターの中で「$scope.プロパティ名 = 値」の形式で値を設定することで、スコープに値を登録できます。
テンプレートの中で利用するコントローラーは、ng-controller属性で明示的に特定の要素に関連付ける必要があります（2）。ここでは<div>要素にmyControllerコントローラーをひも付けていますが、もちろん、ページ全体に対してmyControllerコントローラーを適用するならば、<body>要素に対してng-controller属性を付与しても構いません。
スコープオブジェクトのプロパティには、エクスプレッション構文で{{ プロパティ名 }}とすることでページに反映できます。
補足：moduleメソッドの第2引数
サンプルの太字部分は、以下のように書いても同じ意味です。
|
var app = angular.module('myApp', []);
app.controller('myController', function($scope) { ... });
|
リスト02では、moduleメソッドの戻り値（＝Moduleオブジェクト）をいったん変数appに代入した上で、controllerメソッドを呼び出しています。
しかし、リスト01ではmoduleメソッドを2回呼び出しています。このようなコードが可能であるのは、moduleメソッドで第2引数を省略した場合、指定されたモジュールを（新規作成するのではなく）既存のものから検索して取得する、という性質があるためです。
アプリが大きくなってくると、モジュールの作成とコントローラーを登録するためのコードを別々のファイルで管理するようなケースも出てきます。そのような場合に、リスト01のような書き方を覚えておくと便利です。
処理対象：{{プロパティ名}} カテゴリ：式（Expressions）
API：ngController（ng-controller） カテゴリ：ng（コアモジュール） > directive（ディレクティブ）
API：angular.module カテゴリ：ng（コアモジュール） > function（関数）
API：angular.Module カテゴリ：ng（コアモジュール） > type（型）
API：$controllerProvider カテゴリ：ng（コアモジュール） > provider（プロバイダー）
※以下では、本稿の前後を合わせて5回分（第1回～第5回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
1. AngularJSを利用するには？
クライアントサイド開発でも、本格的なアプリケーションフレームワークを利用しよう。世界中で人気爆発中のAngularJSの基本機能を目的別リファレンスの形式でまとめる連載スタート。
3. 【現在、表示中】≫ AngularJSでコントローラーを定義するには？
AngularJSアプリの最も基本的な構成要素である「コントローラー」の基礎として、コントローラー経由でスコープを準備し、テンプレートに反映させる方法を説明する。
5. モデルをテキストボックスなどのフォーム要素にバインドするには？（ng-model）
ビューの変更をモデルに反映させ、逆にモデルの変更をビューに反映させる、AngularJSの双方向データバインディングの基本を解説する。デフォルト値の設定方法も説明。
