とある角度から

お腹いっぱいたべられる幸せ

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

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

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

AngularJSとは?

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

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


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

サンプルその1「The Basics」

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

ソース

angular_1.html

  • a. まずは、AngularJSを読み込みます
  • b. AngularJSを適用する要素に、ng-app属性を追加します。(今回は文書全体に適用)
  • c. テキストボックスに対し、ng-model="変数名"な属性を追加します。
  • d. {{変数名}}でモデル内の変数を出力します。
動作イメージ

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

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

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

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


サンプルその2「Add Some Control」

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

ソース

angular_2.html

  • a. todo.jsを読み込みます。todo.jsには、コントローラ(TodoCtrl関数)が定義されています。
  • b. コントローラにより制御を行う要素に、ng-controller属性を追加します。
  • c1-4. コントローラ内で$scopeに定義したプロパティやメソッドを参照して、各挙動を定義していきます。

todo.js

  • a1-4. $scopeにプロパティやメソッドを定義します。これらは、ng-controller属性を追加した要素内から参照できます。

todo.css

動作イメージ

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

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

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

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

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

広告を非表示にする