ほげにっき

hogedigoの日記

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全体を指定することも出来るし、一部分に指定することも出来る。

<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


起動プロセス

  1. DIに使用されるinjectorが作成される
  2. injectorが、モデルのコンテキストとなるroot scopeを作成する
  3. AngularがngAppルート要素から始まるDOMをコンパイルし、その過程で見つかった全てのディレクティブとバインディングを処理する


Angularアプリケーションが一度起動されたら、モデルを変更しうるブラウザーのイベント(マウスクリック、key press、HTTP responseなど)を待機する。イベントを検知したらモデルに変更があるかチェックし、変更が見つかれば全ての影響のあるバインディングを更新し、ビューの表示に反映させる。(ここらへんがMVCだ)

angular-seedについて

このチュートリアルで使用するファイルは、angular-seed projectから作成されている。angular-seed projectは最近のAngularライブラリーと、テストライブラリー、スクリプト、シンプルな(典型的なWEBアプリ用設定済み)サンプルアプリケーションを含んでいる。

実験

index.htmlに新しい式を追加して四則演算結果を表示してみよう。

<p>1 + 2 = {{ 1 + 2 }}</p>


とりあえず今日はここまで。次はstep1 - 静的テンプレート