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を１つ作って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/
