AngularJS Tutorial をやってみた（Step-0 -> Step-2）

AngularJS

http://docs.angularjs.org/tutorial

Step-0

<html ng-app>

ngApp ディレクティブを表す。
上の例だと html 要素がアプリケーションのルート要素と見なされる。
html ページ全体をアプリケーションとすることもできるし、ページの一部をアプリケーションとすることもできる。

<script src="lib/angular/angular.js">

angular.js をダウンロードし、コールバックを登録する。
このコールバックは html ページのロード完了時に実行される。
コールバックは ngApp ディレクティブを探してアプリケーションをブートする。

Nothing here {{'yet' + '!'}}

{{ }} はバインディングを表す。
式を評価した結果を挿入してくれる。
1回きりではなく、式の評価値が変わるたびに更新される。

Step-1

2種類の携帯電話についての情報が書かれたページがある。
ここに静的な HTML を追加してみる。

<p>Total number of phones: 2</p>

Step-2 では AngularJS を使って同じことを動的に実現する方法を学ぶ。

Step-2

Angular アプリケーションでは Model-View-Controller デザインパターンを推奨している。

ビューとテンプレート

ビューとは HTML テンプレートによるモデルの射影。
モデルが変わるたびに Angular が適切なバインディング箇所をリフレッシュしてくれることで、ビューが更新される。

  <ul>
    <li ng-repeat="phone in phones">
      {{phone.name}}
      <p>{{phone.snippet}}</p>
    </li>
  </ul>

ハードコーディングされていた電話リストを ngRepeat ディレクティブと2つの Angular 式 {{phone.name}} と {{phone.snippet}} で置き換えた。
<li> タグの中の ng-repeat="phone in phones" は Angular Repeater。
Repeater -> Angular「<li> タグをテンプレートとして、リストの全ての phone に対して <li> 要素を生成して！」

モデルとコントローラ

データモデル（シンプルな配列）は PhoneListCtrl コントローラの中でインスタンス化されている。
コントローラは $scope という引数を取るシンプルなコンストラクタ。

var phonecatApp = angular.module('phonecatApp', []);
 
phonecatApp.controller('PhoneListCtrl', function ($scope) {
  $scope.phones = [
    {'name': 'Nexus S',
     'snippet': 'Fast just got faster with Nexus S.'},
    {'name': 'Motorola XOOM&#8482; with Wi-Fi',
     'snippet': 'The Next, Next Generation tablet.'},
    {'name': 'MOTOROLA XOOM&#8482;',
     'snippet': 'The Next, Next Generation tablet.'}
  ];
});

PhoneListCtrl コントローラを宣言して、AngularJS モジュールに登録した。
ng-app ディレクティブは phonecatApp モジュールを指定していたが、これは Angular アプリケーションをブートした時にロードするモジュール。

コントローラはデータモデルにコンテキストを提供することで、モデルとビューとのデータバインディングを可能にする。
HTML 中の ngController ディレクティブは JavaScript 中の PhoneListCtrl を参照していた。
PhoneListCtrl は phone データを $scope にアタッチする。$scope は root スコープの子孫で、root スコープはアプリケーションが定義された時に作られる。$scope は タグの中にあるすべてのバインディングを利用できる。

スコープ

Angular のスコープの概念は重要。スコープはテンプレートとモデルとコントローラが協働するための接着剤のようなもの。
Angular はスコープとデータモデルとコントローラを使って、モデルとビューを切り離しつつ同期している。
モデルへの変更はビューに反映されるし、ビューへの変更もまたモデルに反映される。

テスト

Angular デベロッパーはテストを書くとき Jasmine's Behavior-driven Development (BDD) フレームワークのシンタックスを好む。
http://pivotal.github.io/jasmine/

angular-seed プロジェクトは全てのユニットテストを Karma を使って実行するように設計されている。
http://karma-runner.github.io/0.10/index.html

Jasmine も Karma も初めて聞いた。
テストを実行したら Chrome が起動してテスト結果が表示された。
ソースコードやテストスクリプトを書き換えたら自動で再実行してくれた。
なんて便利！

step-3 ではテキスト検索を学ぶ。


思ったこと

新しいアプリケーションを作りたいと思ったら、angular-seed プロジェクトをもらってきてそこから構築すればよいとのこと。
angular-seed プロジェクトがひな形を提供してくれる。
MVC パターンで開発することを想定しているので、見通しのよい開発ができそう。
テンプレートが見やすく、デザイナさんが見ても何が起こるのか何となく理解できそう。

まとめてみる

Model
データ。コントローラの中（のスコープの中）でインスタンス化される。
View
テンプレートをバインディングやら何やら（ng-repeat とか）によって実体化したもの。
Controller
モデルとビューをくっつける仲介人。スコープを持つ。