いまさら聞けないAngularJSの基礎知識と5つの主な特徴、インストール、簡単な使い方：MEANスタックで始めるWebアプリ開発入門（6）（1/2 ページ）

MEANスタックを用いたWebアプリの開発方法について紹介していく連載。今回は、JavaScriptのMVWフレームワークAngularJSの概要、セットアップ方法、基本的な使い方、AngularJS 2.0での変更点などを解説する。

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

印刷

通知 連載「％」の新着をメールで通知

鬮ｫ遨ゑｽｹ譎｢�ｽ�ｽPost

Shareシェア

はてなブックマーク

SharePocket Button

MEANスタックの「A」の部分、AngularJS

今回の主な内容

• AngularJSとは
• AngularJSの五つの主な特徴
  • HTMLテンプレート機能
  • 双方向データバインディング
  • DI（依存性注入）によるモジュール管理機能
  • ルーティング機能
  • Ajax通信機能
• AngularJSのインストールと簡単な使い方
  • AngularJSの適用範囲を指定する「ng-app」ディレクティブ
  • モデルの初期値を設定する「ng-init」ディレクティブ
  • 入力要素に対してモデルとのバインディングを行う「ng-model」ディレクティブ
• AngularJS 2.0で、どう変わるのか
• 次回はAngularJSについて、さらに詳細に

連載目次

　前回記事、「いまさら聞けないMongoDBの基礎知識とインストール、CRUD操作の基本、モデリングツールMongooseの使い方」では、ハイパフォーマンスなNoSQLデータベース「MongoDB」の概要と、Node.jsからMongoDBにアクセスするモジュール「mongoose」の使い方の基本を紹介しました。今回は、MEANスタックの「A」部分、AngularJSの基本について解説します。

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

AngularJSとは

　MEANスタックではフロント側のフレームワークとして、AngularJSを使用します。AngularJSとは、グーグルとユーザーコミュニティによって開発されているオープンソースソフトウエアのJavaScriptフレームワークです。2012年にバージョン1.0がリリースされ、2015年9月現在は1.4.4が最新版になっています。

AngularJS

　公式サイトでは、「AngularJSは、MVWフレームワークである」と定義しています。「MVW」とは、「Model-View-Whatever」の略語で、「Model」「View」「その他何でも」という意味です。データバインディングやDI（依存性注入）などを使用でき、複雑なWebアプリのフロントエンドも効率よくシンプルに実装できます。

　フレームワークには対象とするアプリの種類によってそれぞれ向き不向きがありますが、AngularJSはマスターメンテナンスのようなCRUD系アプリ、業務系アプリといった、各機能が独立した画面として存在し、フォームを使ってデータの送受信を行うようなアプリに向いているといわれています。

　逆に、ゲームのように変化するデータが多量で速度重視になるアプリや、シングルページアプリケーション（AjaxやWebSocket通信を使用し、画面遷移しないWebアプリ）もあまり向いていないと筆者は考えます。

AngularJSの五つの主な特徴

　AngularJSはフルスタックフレームワークであるという特徴を持っています。ですで、クライアントサイドを実装する上で必要な機能はそろっています。

　AngularJSは下記のような機能を持っています。

1. HTMLテンプレート機能
2. 双方向データバインディング
3. DI（依存性注入）によるモジュール管理機能
4. ルーティング機能
5. Ajax通信機能

　では、これらの機能について簡単に解説しましょう。詳細については、次回解説します。

HTMLテンプレート機能

　AngularJSでは、テンプレート言語にHTMLを使用し、制御構造やUIコンポーネントはカスタム属性として使用します。また、「エクスプレッション構文」（「{{」と「}}」でくくる式）を使用してロジックを記述することも可能です。

<!-- エクスプレッション構文 -->
<h1>{{ title }}</h1>
<!-- ロジックの記述も可能 -->
<h2>{{ price + count }}</h2>

双方向データバインディング

　これもAngularJSを代表する機能です。下記のようにモデルとinputフィールドをバインドすることで、JavaScriptによるモデルの変更とユーザーの入力によるフィールドの変更が双方向になります。

<!--  双方向データバインディング -->
<input type="text" ng-model="message">
<div>{{message}}</div>

DI（依存性注入）によるモジュール管理機能

　「DI（依存性注入）」という言葉は、SpringやSeaser2で有名になったので、Java経験者であればなじみがあると思います。これは、「オブジェクトに必要な情報を外部設定する手法」です（参考「DI：依存性の注入とは何か？」）。

　AngularJSでは、下記のように依存性を持たせることができます。

var myApp = angular.module('myApp', ["myServiceModule"]);
//$scopeとmyServiceをDIする
myApp.controller('MyController', ['$scope','myService', 
  function($scope,myService){
    $scope.greet = function() {
        //myServiceの関数を使用できる
        $scope.message = myService.sayHello();
    };
  }
]);

ルーティング機能

　AngularJS 1.3以前は、「ngRoute」というモジュールを使用してルーティング設定することが多かったのですが、最新版の1.4リリースに併せて「ngNewRouter」というモジュールがリリースされました。このモジュールを使用すると、下記のようにルーティング定義を行うことができます。

angular.module('app', ['ngNewRouter'])
  .controller('AppController', ['$router', AppController]);
//ルーティング定義
AppController.$routeConfig([
  {path: '/', component: 'home' }
]);
//コントローラー定義
function AppController ($router) {
  ……
}

• 参考：New Router

Ajax通信機能

　JavaScriptで行うサーバーとの通信といえば、XMLHttpRequestを使った非同期処理です。AngularJSはサーバーとのデータ送受信に使用するためのモジュールを持っています。次のように、「$http」モジュールを使用して通信を行います。

var myApp = angular.module('myApp');
myApp.controller('MyController', ['$scope','$http', function($scope,$http){
    $scope.execute = function() {
      $http({method: 'GET', url: '/someUrl'}).
        success(function(data, status, headers, config) {
          // 正常に処理が終了した際に非同期で実行
        }).
        error(function(data, status, headers, config) {
          // エラーが発生した際に非同期で実行
        });
    };
}]);

　レスポンスコードが「2xx」の場合にはsuccessが実装され、それ以外の場合にはerrorが実行されます。

• 参考サイト
  • AngularJS公式
  • js.studio:
  • angular ninja