本稿は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ページを作成できます。ぜひお試しください。

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

サンプル