この記事は公開されてから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を１つ作ってangular.jsを読みこめばAngularJSは動作するのですが、 angular-seedというAngularJSアプリのひな形がありますので、Githubから取得しましょう。
% git clone https://github.com/angular/angular-seed
% cd angular-seedangular-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/
186
