AngularJSチュートリアルやってメモメモ(step0 - とりあえず動かしてみる)
今回やるのはこちら↓
0 - Bootstrapping
以下コマンドでワーキングコピーがstep0のサンプルになる。ローカルにある編集は破棄されるので注意。
git checkout -f step-0
下記コマンドでnode.jsのhttp serverを起動。
./scripts/web-server.js
ブラウザでhttp://localhost:8000/app/index.htmlにアクセス。「Nothing here yet!」とだけ表示されればOK。
このサンプルですでにangularが使われている。
app/index.html↓
<!doctype html> <html lang="en" ng-app> <head> <meta charset="utf-8"> <title>My HTML File</title> <link rel="stylesheet" href="css/app.css"> <link rel="stylesheet" href="css/bootstrap.css"> <script src="lib/angular/angular.js"></script> </head> <body> <p>Nothing here {{'yet' + '!'}}</p> </body> </html>
コードの説明。
- ngAppディレクティブ
<html ng-app>
ng-app属性はAngularに対して、Angularが扱うべきアプリケーションの範囲(ルート要素)を示す。ngAppディレクティブと呼ぶ。上記の様にhtml全体を指定することも出来るし、一部分に指定することも出来る。
- AngularJS スクリプト読み込み
<script src="lib/angular/angular.js">
このコードはangluar.jsをダウンロードして、HTMLページが全てロードされた後に実行されるコールバックを登録する。コールバックが実行されると、AngularはngAppディレクティブを探して、それが定義されている要素をルートとするAngularアプリケーションを実行する。
- 式によるバインディング
Nothing here {{'yet' + '!'}}
波括弧2個で囲ってjavascriptライクなバインディング式を記述することができる。式はAngularによって評価され結果がDOMに挿入される。サンプルでは「yet」と「!」が文字列結合されて「Nothing here yet!」と出力されている。
結果の挿入は初回だけでなく、式評価が変更される度にずっと更新され続ける(次のstepで説明)。
Angular式のガイド↓
http://docs.angularjs.org/guide/expression
AngularJS アプリケーションの起動プロセス
まず、起動にはngAppディレクティブを使用した簡単な方法と、マニュアルで行う方法があるらしい。詳しくはhttp://docs.angularjs.org/guide/bootstrap
起動プロセス
- DIに使用されるinjectorが作成される
- injectorが、モデルのコンテキストとなるroot scopeを作成する
- AngularがngAppルート要素から始まるDOMをコンパイルし、その過程で見つかった全てのディレクティブとバインディングを処理する
Angularアプリケーションが一度起動されたら、モデルを変更しうるブラウザーのイベント(マウスクリック、key press、HTTP responseなど)を待機する。イベントを検知したらモデルに変更があるかチェックし、変更が見つかれば全ての影響のあるバインディングを更新し、ビューの表示に反映させる。(ここらへんがMVCだ)
angular-seedについて
このチュートリアルで使用するファイルは、angular-seed projectから作成されている。angular-seed projectは最近のAngularライブラリーと、テストライブラリー、スクリプト、シンプルな(典型的なWEBアプリ用設定済み)サンプルアプリケーションを含んでいる。