AngularJSの理解で欠かせないコントローラーとas記法、データバインディングの基本的な使い方：MEANスタックで始めるWebアプリ開発入門（7）（1/2 ページ）

MEANスタックを用いたWebアプリの開発方法について紹介していく連載。今回は、AngularJSのコントローラーやas記法の使い方に加え、さまざまなデータバインディングの行い方などについて解説する。

» 2015年11月06日 05時00分公開

[中村修太，クラスメソッド]

今回の主な内容

連載目次

　前回の「いまさら聞けないAngularJSの基礎知識と5つの主な特徴、インストール、簡単な使い方」では、AngularJSの概要について紹介しました。今回は引き続き、AngularJSについて解説していきます。

　なお、本記事を見て実際にサンプルを動かしたい場合は、以前の連載記事（第1回、第2回）を見て環境を作成しておきましょう。

AngularJSのコントローラー

　前回のサンプルでは、取りあえずHTMLだけ使用してAngularJSを動かしてみましたが、実際のアプリではコントローラーと共に使用することが多いです。ここではコントローラーの基本について説明します。

　AngularJSにおいてコントローラー（Controller）は、モデルとビューを操作するためのコンポーネントであり、ユーザーの操作に応じた動きやサーバー通信を行う場合などに使用します。このコントローラーの実態は、AngularJSのスコープオブジェクト（後述）を使用する、JavaScriptのオブジェクトです。

　では、シンプルなコントローラーの例を見てみましょう（※ここでは連載第6回で作成したsimple-angularプロジェクトを修正して使用します）。

表示するHTML――以前との違い

　まずは表示するHTML（index.html）を記述します。

<!DOCTYPE html>
<!-- 1 -->
<html ng-app="mySimpleApp">
  <head>
    <script src="bower_components/angular/angular.js"></script>
    <!-- 2 -->
    <script src="js/controller.js"></script>
  </head>
  <body>
    <!-- 3 -->
    <div ng-controller="MySimpleController">
      <p>{{message}}</p>
      <button ng-click="greet()">click</button>
    </div>
  </body>
</html>

index.html

　以前との違いは、次の通りです。

【1】htmlタグのng-appでモジュール名が指定されている

　前回、ng-appディレクティブは「AngularJSの適用範囲を指定する」と解説しました。そのときはng-appを指定しただけでしたが、上記のようにモジュール名を指定することもできます。ここでは、「mySimpleApp」という名前のモジュールをhtml以下に適用しています。

　AngularJSではモジュールとしてプログラムをある程度の規模にまとめることで、プログラムが再利用しやすくなったり、ユニットテストがしやすくなったりします。モジュール化は後述するangular.moduleを使うことで可能になります。

【2】controller.jsを読み込んでいる

　この後説明する、AngularJSのコントローラー用jsファイルを読み込んでいます。

【3】divタグでコントローラーを指定しており、その中でクリックイベントを指定している

　ng-controllerディレクティブで使用するコントローラーを指定し、ng-clickで、ボタンクリック時に定義された関数を実行します。そして、messageの表示が切り替わります。

コントローラーを定義したjsファイル――「$scope」でDI（依存性注入）

　コントローラーを定義したjsファイルを見てみましょう。

//モジュールの定義
var myApp = angular.module('mySimpleApp',[]);
//コントローラーの定義
myApp.controller('MySimpleController', ['$scope', function($scope) {
    $scope.message = 'initial message';
    $scope.greet = function() {
        $scope.message = 'hello!';
    };
}]);

js/controller.js

　ここでは最初にangular.module関数を使ってmySimpleAppモジュールを定義しています。

コラム　angular.moduleの「モジュールの作成」と「モジュール取得」という2種類の使い方

　ちなみに、angular.moduleは下記のように「モジュールの作成」と「モジュール取得」という2種類の使い方があるので注意してください。

// 第2引数に配列を指定した場合、
// モジュールを新しく作成(既存のものがあれば上書き)
var newMod = angular.module('simpleModule', []);
// 第2引数を指定しない場合、
// 既存のモジュールを取得
var existsMod = angular.module('simpleModule');

　モジュール作成後、controller関数を使うことでコントローラーを定義しています。第1引数はコントローラー名で、第2引数の配列ではアノテーションを使用してコントローラーに「$scope」をDI（依存性注入）しています（DIについては今後の連載で解説します）。

　$scopeとは、AngularJSで使用するオブジェクトの一つです。ここで定義した値や関数は、ディレクティブやhtmlで使用することができ、モデルの監視なども行うことができます。

　ここまで記述できたら、index.htmlをブラウザーで表示してみてください。ボタンをクリックすると、メッセージが切り替わります。

AngularJS 1.2以降の「as記法」でControllerの値を参照する

　以前のAngularJS（1.1系）では、Controllerで$scopeの設定を行い、Controllerを使用するhtmlから$scopeの関数や値を参照する方法しかありませんでした。しかしAngularJS 1.2以降では、ng-contollerディレクティブのas記法を使用して、$scopeを使わずにControllerへの参照をhtmlから行えるようになりました。

　as記法を使用して以前のサンプルを書き換えると、次のようになります。

　まずはcontroller.jsを見てみましょう。

var myApp = angular.module('mySimpleApp',[]);
 
myApp.controller('MySimpleController',function() {
    this.message = 'initial message';
    this.greet = function() {
        this.message = 'hello!';
    };
});

js/controller.js（※コメントは省略）

　先ほどのサンプルでは、controller関数に$scopeをDIし、$scopeオブジェクトに対して変数や関数を定義していましたが、ここでは$scopeを使っていません。

　次に、htmlを見てみます。

・
・
    <div ng-controller="MySimpleController as simple">
      <p>{{simple.message}}</p>
      <button ng-click="simple.greet()">click</button>
    </div>
・
・

index.html

　as記法は下記のように書きます。ここでは、MySimpleControllerを「simple」という参照名で使用できるように定義し、Controllerで定義した変数や関数を使用しています。

ng-controller="｛コントローラー名｝ as ｛参照名｝"

　これらの例はどちらも同じ動作となりますが、下記サイトで言及されているように、プロトタイプチェーンにまつわる問題を引き起こす可能性があるため、as記法の方が推奨されているようです。

参考

AngularJSの特徴の一つ「データバインディング」のさまざまな行い方

JavaScriptを中心としたWebアプリ開発の栄枯盛衰まとめ――LiveScriptからAngularJS／React.jsまで
＠ITが誕生した2000年頃はJavaScriptが不遇だった時代。そこから現在のような人気のプログラミング言語になるまでには、どのような歴史があったのか。15周年を迎えた＠ITの豊富なWeb開発関連記事とともに振り返る。
Socket.IOでセンサー＆MongoDB～AngularJSアプリ間の通信を行う
家電～Webアプリ間の双方向通信をSocket.IOで行うアプリについて、サーバー側のArduino連携やMongoDBへのデータ保存などと、クライアント側のAngularJSに分けて動作を解説します。
エンタープライズ開発現場が知っておきたいHTML5の4つの意義
Windows XP時代にエンタープライズ向けシステムのクライアント開発現場が抱えていた問題は、HTML5（Web標準）という一つ上のレイヤーからアプローチし解決する道が模索されています。本記事では、先月開催されたカンファレンス「Enterprise × HTML5 Web Application Conference 2014」から幾つかのセッションの内容をピックアップし、HTML5ソリューションの全体像を俯瞰し、上記解決の道がどこに向かおうとしているのかを探ってみます。
Struts後時代のJava EE／Javaモダン開発はどうあるべきか～JJUG CCC 2014 Springまとめリポート（前編）
Java EEにおいてJava 8はどこまで利用できるのか、Java開発でGit、CI、継続的デリバリは、どこまで有効なのか、Struts後時代のJava EE開発における有効なフレームワークなどをお伝えする。