Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした