<!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' + '!'}}

波括弧２個で囲って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アプリ用設定済み）サンプルアプリケーションを含んでいる。

実験

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

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

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

ほげにっき

hogedigoの日記

2013年05月20日のツイート

AngularJSチュートリアルやってメモメモ

目次

AngularJSチュートリアルやってメモメモ（前置き）

AngularJSチュートリアルやってメモメモ（step0 - とりあえず動かしてみる）

コードの説明。

AngularJS アプリケーションの起動プロセス

angular-seedについて

実験