あなたが絶対に覚えておくべきフレームワーク、AngularJSのサワリ！

本稿はJavaEEのアーキテクチャを再興する。（まとめページ）の一部です。

AngularJSをご存知でしょうか？Webシステムのクライアント、つまりはWebブラウザ上で動作するJavaScriptのフレームワークです。
先日ご紹介したhogan.jsが、データから画面を作成する機能を持っていましたが、AngularJSはデータと画面を双方向で結びつけることができます。

入力が複雑なアプリケーションを作る場合はAngularJSのデータと画面を結びつける機能がとても有効に使えます。一度AngularJSを覚えてしまうと、AngularJSなしでWebアプリケーションを作るなんて考えられなくなってしまうことでしょう！

サンプル

本稿では、AngularJS+Javaで作ったTODOアプリを紹介します。ソースコードはgithub上に公開してあります。

説明

セットアップは簡単。AngularJSをダウンロードして設定するだけです。サンプルでは簡易に試すために、以下のコードで読み込んでいます。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.13/angular.min.js"></script>

読み込むファイルはこれだけ、簡単ですね。

AngularJSのキモはControllerです。幾つか実装方法はありますが、ここでは最も簡単に、関数をひとつ作るだけでControllerを作成しています。

index.htmlから抜粋

var TodoController = function($scope, $http) {
		$http.get('api/loadMemos').success(function(data, status, headers, config) {
			$scope.memos = data
		}).error(function(data, status, headers, config) {
			$scope.accessError = "error occur";
		});
		$scope.addMemo = function() {
			$scope.memos.push({});
		}
		$scope.save = function() {
		$http.put("api/putMemos", $scope.memos)
	}
}

クライアントサイドのJavaScriptはこれだけ！TodoControllerがコントローラです。初期化時に、api/loadMemosからデータをとってきて、画面に表示しています。
また、addMemoとsaveという関数を定義しています。
このコントローラをHTMLと関連付けています。関連付け方も簡単。HTMLにAttributeとして挿入するだけです。

index.htmlから抜粋

<div ng-controller="TodoController">
	<div ng-repeat="memo in memos">
		<input type="text" ng-model="memo.text">
	</div>
	<button ng-click="addMemo()">add</button>
	<br />
	<button ng-click="save()">save</button>
	<span style="color: red">{{accessError}}</span>
</div>

キモは、ng-XXXXXというAttributeです。ng-controllerでコントローラを指定、ng-modelで、どのデータと画面をひもづけるかを設定しています。ng-repeatのmemosは、javaScript中の$scope.memosを指しています。

触ってみると、ほんとうに簡単にインタラクティブなWebページを作成できます。ぜひお試しください。