AngularJS概要と基礎の基礎#AngularJS入門その2
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でのひな形作成について解説しました。 次回はもう少し具体的な機能を解説する予定です。
参考サイトなど
- AngularJS公式: http://angularjs.org/
- angular-seed: https://github.com/angular/angular-seed
- 本blogでAngularJSタグのついた記事: https://dev.classmethod.jp/tag/angularjs/