公式サンプルから学ぶAngularJS (1)

大層なタイトルをつけちゃいましたが、やってることは以下。

AngularJSの公式サイト（以下）のトップに乗っているサンプルを作りながら、AngularJSのチュートリアル的なことをしてみる。
英語:AngularJS — Superheroic JavaScript MVW Framework
日本語訳:AngularJS入門 | AngularJS 1.2 日本語リファレンス | js STUDIO

間違ったことを書いてもアレなので、大部分を抜粋させていただきました。

AngularJSは動的Webアプリケーション構築のためのフレームワーク
データバインディングと依存注入を通して大部分の余計なコードを排除できる。分かりやすく言うと、動的アプリケーションを作るための様々な苦労（＝JavaScriptでの大量なコード記述）を請け負ってくれるので、素早く機能開発を開始できる
CRUDアプリケーションとかに特に向いている。逆に少し複雑な事（AngularJSのルールから外れること）をしようとするととたんにコストがあがるため、ゲーム等のバリバリのアニメーションとかには向かない

では早速サンプルを作ってきます。

フォームに入力した値を、リアルタイムにDOM要素へ反映するサンプルです。

angular_1.html

テキストボックスの値を変更すると、同時に出力されているDOM要素が更新されます。

上記の指定だけで、AngularJSが
「フォームの部品(=UI)と表示データ(=モデル)の紐付けと、どちらかが変更された際の同期処理」
をしてくれます。
これは「双方向データバインディング」と呼ばれ、AngularJSの大きな特徴の１つです。

また、AngularJSはブラウザに様々な記法を提供します（ngApp、ngModel等）
これを提供する仕組みを「ディレクティブ」と呼びます。
この仕組みを使って、自分で新たに記法を定義することもできます。

※ 他のモジュールを追加で読み込むことで使用できるようになる記法もあります
→ AngularJSディレクティブ一覧 (ngRouteより下)

TODO管理を通して、要素の追加、読込、更新、削除を試すサンプルです。（バックエンドとの連携はなし）

angular_2.html

todo.js

todo.css

各UIからtodoの管理が行えます。

ここで大切なのは、todo.js内では、「データ(=モデル)をどうするか」しか定義していません。
「変更したデータをどう表示するか」については、AngularJSが全て請け負ってくれました。

という訳で、あっという間に要素の追加、読込、更新、削除を実現できてしまいました。
AngularJSが得意な分野の動的アプリケーションを作れば、相当な開発効率アップが見込める事が体感できたかと思います。

AngularJSの公式サイトにはあと2つのサンプルが紹介されています。
それらのサンプルについては、また今度。。。

2014/5/8 追記
公式サンプル3についても、作ってみました↓
公式サンプルから学ぶAngularJS (2) - 1010realのブログ ver2

とある角度から