連載
» 2015年11月06日 05時00分 UPDATE

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

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

[中村修太,クラスメソッド]
「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© 2017 ITmedia, Inc. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

RSSについて

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

メールマガジン登録

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