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

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

» 2015年11月06日 05時00分 公開
[中村修太，クラスメソッド]
「MEANスタックで始めるWebアプリ開発入門」のインデックス

連載目次

　前回の「いまさら聞けない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記法の方が推奨されているようです。

　　　　　　 1|2 次のページへ

Copyright © ITmedia, Inc. All Rights Reserved.

＠IT

@ITについて

RSSについて

アイティメディアIDについて

メールマガジン登録

＠ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。