AngularJS: 0 – Bootstrapping の意訳

phonecat アプリケーションをビルドする準備はすでに整っています。このステップでは、いくつかの重要なソースコードのファイルについて詳しくなること、angular-seed をつかってバンドルされた開発サーバの立ち上げとブラウザ上で動作させる方法について学びます。

1. angular-phonecat ディレクトリで以下のコマンドを実行します

git checkout -f step-0

これによりチュートリアルのステップ0にリセットされます。

これからステップの番号ごとにどうようのことをします。ディレクトリで行った変更は全て失われます。

ブラウザで動作を確認するには、どちらかに従って下さい。

  • node.js の場合

ターミナルで新しくタブかウィンドウを開いて、.scripts/web-server.js を実行してサーバを起動してください。ブラウザで http://localhost:8000/app/index.html を開く

  • 他の http サーバの場合

サーバの設定を angular-phonecat ディレクトリを公開するように設定します。ブラウザで http://localhost:[port-number]/[context-path]/app/index.html を開く

ブラウザにページが表示されます。面白くない画面ですが、コレで大丈夫です。”Nothing here yet!” の表示は以下のコードによって表示されているものです。このコードは次に進むための Angular 要素を含んでいます。

コードはなにをしている?

  • ng-app ディレクティブ
 <html ng-app>

ng-app 属性は Angular がルート要素として扱うための Angular ディレクティブです。
html 全体もしくは一部を Angular アプリケーションとして扱いたい場合、アプリケーション開発者に Angular との対話を提供します。

  • AngularJS スクリプトタグ
<script src="lib/angular/angular.js">

このコードは angular.js スクリプトをダウンロードし、HTML が完全に読み込まれたらブラウザが実行するコールバックを登録します。コールバックが実行されると、Angular は ng-app ディレクティブを探します。ディレクティブが見つかったら、ng-app ディレクティブ上の ルートの DOM 要素でアプリケーションが実行されます。

  • 二重鉤付カッコによるバインディング
Nothing here {{'yet' + '!'}}`

この行は、Angular のテンプレート機能のデモンストレーションです。二重の鉤付カッコで囲まれた部分は、バインディングを使った ‘yet’ + ‘!’ の式です。

バインディングを Angular に伝えると、式が評価され、結果を DOM に反映させます。一度きりの反映よりも、次のステップでやるような、式の評価の結果が変わるとバインディングに反映されつづけるほうがいいでしょう。

Angular 式はグローバルコンテクスト( windowオブジェクト )のスコープではなく、Angular のカレントのモデルスコープによって評価される javascript のようなコードスニペットです。

すると、Angular に処理されることで、html は “Nothing here yet!” というテキストを含むのです。

AngularJS のブートストラップ

AngularJS アプリケーションのブートストラップは自動的に ngApp ディレクティブを使うのでとても簡単に、ほとんどのケースに適しています。発展したケースの場合、スクリプトローダを使うような場合は imperative / manual の方法を利用してアプリケーションをブートできます。

ブートストラップ時に、三つの重要なことが起きています。

  1. アプリケーションに依存する injection のために injector が生成されます。
  2. injector はアプリケーションのモデルのコンテクストになるルートスコープを生成します。
  3. Angular  は ngApp のルート要素で始まる DOM をコンパイルし、ディレクティブとバインディングの処理を行います。

一度アプリケーションがブートしたら、モデルの変更のようなブラウザのイベント(マウスクリック、キータイプ、HTTP レスポンス)の発生を待ちます。イベントが発生すると、Angular はそれがモデルの変更の原因か、変更を検知し、バインディングの更新によってそれらが伝えられます。

アプリケーションの構造は今のところシンプルです。テンプレートは一つのディレクティブと静的なバインディングでモデルは空だ。これを変更していこう!

これら全部のファイルはなんなの?

ワーキングディレクトリにあるファイルのほとんどは新しい Angular プロジェクトの立ち上げに使われる典型的な angular-seed プロジェクトから来ています。この seed プロジェクトは最新版の Angular、テストライブラリ、スクリプト、シンプルな例示アプリ、一般的なウェブアプリの初期設定を含みます。

チュートリアルの目的は、angular-seed を以下のように変更する事です。

  • 例示アプリの削除
  • 電話画像の app/img/phones/ への追加
  • 電話データファイルの app/phones/ への追加
  • その他素材の app/css/ と app/img/ への追加

やってみよう

新しいちょっとした計算の式を index.html へ追加してみてください。

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

まとめ

ステップ1 へ進み、ウェブアプリにコンテンツを追加しましょう。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする