AngularJSのコントローラ#AngularJS入門その3

AngularJS入門

#JavaScript

#Angular

中村修太

2014.02.26

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

AngularJSのコントローラ

前回はとりあえずAngularJSを動かしてみました。今回からもう少し詳細に踏み込んで使ってみます。
今回はAngularJSのコントローラをつかってみましょう。

AngularJSにおいてコントローラ(Controller)とは、モデルとビューを操作するためのコンポーネントで、
実態はAngularJSのスコープオブジェクト($scope)を引数として使用する、JavaScriptのオブジェクトです。
では次に、コントローラのシンプルな例をみてみましょう。

ちなみに、今回使用した動作環境は以下のとおりです。
次のサンプルを動かすため、AngularJSが動作する環境をつくっておきましょう。
前回作成したangular-seedを使うと楽です。

OS : MacOS X 10.9
node.js : 0.10.24
Git : 1.8.3.4

scopeにプロパティの割り当て

<html ng-app="myApp">
<head>
    <script src="http://code.angularjs.org/1.2.13/angular.min.js"></script>
</head>
<body>
<script>
    var myApp = angular.module('myApp',[]);//←この記述は、いまは気にしない
    myApp.controller('MessageCtrl', ['$scope', function($scope) {
        $scope.message = 'set variable in Controller!';
    }]);
</script>
<div ng-controller="MessageCtrl">
    {{ message }}
</div>
</body>
</html>

htmlに表示している文字列を含んだmessageプロパティが$scopeに割り当てられています。 ng-controllerディレクティブを使用してコントローラーが要素に割り当てられると、
controller関数の第２引数に指定した関数を使用して、コントローラのオブジェクトをインスタンス化します。
ビューやモデルにアクセスするためのスコープ変数($scope)は、
コントローラのコンストラクタ関数へDIされることで、引数として使用することができるようになります。
そして、上記例では$scopeの初期状態の設定を行っています。
messageという名前のプロパティを$scopeに割り当て、文字列を設定しているのがわかります。
ちなみに、「$scope」という引数の名前は変更することができないので注意してください。

scopeに関数を追加

先程は$scopeにプロパティを追加しましたが、関数を定義することもできます。
定義した関数はhtmlから呼び出すことができます。
あたらしく「DoubleCtrl」という名前のコントローラを定義して使ってみましょう。
このコントローラはdoubleという関数をもっており、モデルに入力された数値を２倍にします。

・
・
<script>
    var myApp = angular.module('myApp',[]);
    myApp.controller('MessageCtrl', ['$scope', function($scope) {
        $scope.message = 'set variable in Controller!';
    }]);

    myApp.controller('DoubleCtrl', ['$scope', function($scope) {
        $scope.double = function(value) { return value * 2; };
    }]);

</script>

<div ng-controller="MessageCtrl">
    {{ message }}
</div>

<div ng-controller="DoubleCtrl">
    Two times <input ng-model="num"> equals {{ double(num) }}
</div>
・
・

DoubleCtrlではdoubleという名前の関数が定義されており、html内で呼び出されています。
引数はテキストフィールドに入力された値(num)で、ng-modelとして定義されています。 ng-modelは、双方向データバインディングをするためのディレクティブです。
このディレクティブを使用すると、入力フィールドとモデルを紐付けてValidationを行ったりもできます。
ちなみに、ng-modelを使用した時点ではnumという名前のプロパティは$scopeには存在しませんが、
ディレクティブによりnumプロパティが$scopeに追加されます。

実際に画面を開いて動かしてみてください。numフィールドに数値を入力すると、
２倍された数値が表示されます。

まとめ

今回はAngularJSのコントローラを使ってみました。
注意点として、コントローラには単一のビューに必要なロジックのみを記述し、
それ以外のロジックをあまり記述しないようにしてください。
つまり、コントローラは主にイベントのハンドリングと双方向バインディングを行い、
複雑なロジックは同じくAngularJSの機能である、「Service」や「Factory」を使用するようにしましょう。次回はそのService/Factoryについて解説します。