AngularJS概要と基礎の基礎#AngularJS入門その2

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

AngularJS概要

前回はAngularJSを学ぶ際に参考になるサイトの紹介をしました。
それらを見ればいくらでも書いてあるのですが、今回はAngularJSについての解説や基本的な機能等の解説をします。

Angular JSとは

前回もいったように、AngularJSはWebアプリケーションのためのMVC(MVW)フレームワークです。
※MVW:Model-View-Whatever
AngularJSでは次にあるような、いくつかの特徴をもっています。

Angular JSの持つ機能

1.テンプレート言語としてHTMLを使用する
AngularJSは、HTMLファイルを使用します。その中で「Directive」という仕組みを利用し、
HTMLの属性や要素に対して特殊な振る舞いを適用します。
Directiveとは、HTMLの属性と要素を独自に拡張した新しいマークアップです。
ngMolde, ngAppといった組み込みのDirective、ユーザー独自のDirectiveを作成することができます。

Angularがアプリケーションを起動するとき、HTMLコンパイラはDOM要素内を探索し、
Directive要素を探します。Directiveが見つかると、DOM要素とリンクされます。
HTMLコンパイラとは、Angularがブラウザに対して任意のHTML文法を伝えるための方法です。
Angularは対象のHTMLをコンパイルし、HTML要素や属性に振る舞いを紐付け、
新しい要素/属性を作ります。

[コンパイル]
DOMツリーを辿って、DirectiveのためにDOM要素をつなぎ合わせる過程です。
詳しくはこのあたりを参照してください。

2.データバインディング
AngularJSはリアルタイムでの双方向データバインディングを行います。
次のサンプルを見てみましょう。このサンプルでは、「{{}}」を使用し、データバインディングを行っています。
(ガイドより)

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
  </head>
  <body>
    <div ng-init="qty=1;cost=2">
      <b>Invoice:</b>
      <div>
        Quantity: <input type="number" ng-model="qty" required >
      </div>
      <div>
        Costs: <input type="number" ng-model="cost" required >
      </div>
      <div>
        <b>Total:</b> {{qty * cost | currency}}
      </div>
    </div>
  </body>
</html>

AngularJSにおいて、上記のようなファイルをテンプレートと呼びます。
scriptタグでAngularJSを読み込んでますので、
アクセス時にAngularJSに関連するマークアップ(Directive)が処理されます。

サンプルでは、html属性に「ng-app」というDirectiveが指定されています。
これは、アプリケーションが初期化される際に、指定された属性をルートとして自動的にDirectiveとリンクします。
これにより、後述する「{{qty * cost | currency}}」という式が処理されるわけです。
そのため、サンプルでngAppが指定されていなかった場合には「{{・・・}}」の式は処理されません。
なお、今回はhtmlに指定していますが、ngAppはどの属性に指定しても構いません。

input要素指定「ng-model」というDirectiveは、入力フィールドの値を変数へ格納します。
ここでは「qty」と「cost」という変数に格納し、別の場所で使用していますね。
また、「ng-init」Directiveを使用することで、変数の初期化を行っています。

costとqtyを計算した結果を表示する箇所(Total)では、「{{・・・}}」を使用しています。
AngularJSのコンパイラは、html内で「{{・・・}}」を見つけると、中の値を評価します。
(これらの変数はグローバル変数ではありません)

また、パイプ(|)で記述された、式の右部分にある箇所はフィルタと呼ばれます。
このサンプルでは、フィルタを使用してqty * contの値をcurrencyフォーマットで金額として出力しています。

3.DI(依存性注入)が使用可能
AngurarJSのモジュール同士の依存関係を簡単に構築することができます。
Java等でDIコンテナ(AngularJSではDIコンテナのことをインジェクターといいます)を
使用したことがある人は馴染みのある機能ですね。
次の例をみてください。

//service.js
var myApp = angular.module('myService', []);
myApp.service('greetService', function() {
    this.sayHello = function() {
        return "Hello, World!"
    };
});


//controller.js
var myApp = angular.module('myControll', ["myService"]);
myApp.controller('MyCtrl', ['$scope','greetService', function($scope,greetService){
    $scope.greet = function() {
        console.log(greetService.sayHello());
    };
}]);

service.jsではmyServiceという名前でモジュールを定義し、greetServiceというサービスを定義しています。
controller.js(myControllモジュール)ではmyServiceモジュールに依存しており、greetServiceの関数を使用しています。
このように、簡単に他のモジュールとの依存関係を記述することができます。

ここではAngularJSの基本的な機能である、ディレクティブ/データバインディング/DIについて簡単に紹介しました。
では最後に、Angular JSを動かすためのひな形を作成してみましょう。

angular-seedを使用した環境構築方法

今回使用した動作環境は以下のとおりです。

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

htmlを1つ作ってangular.jsを読みこめばAngularJSは動作するのですが、
angular-seedというAngularJSアプリのひな形がありますので、Githubから取得しましょう。

% git clone https://github.com/angular/angular-seed
% cd angular-seed 

angular-seedのscriptsディレクトリにはjsファイルがありますので、nodeで実行すればWebサーバが起動します。

% node scripts/web-server.js                                             
Http Server running at http://localhost:8000/

テスト用のスクリプト(test-all.sh)も用意されており、モジュールの追加/修正も容易です。
これをベースにAngularJSをさわっていきましょう。

まとめ

今回はAngularJSの基本的な機能解説とangular-seedでのひな形作成について解説しました。
次回はもう少し具体的な機能を解説する予定です。

参考サイトなど