AngularJSの起動

http://docs.angularjs.org/guide/bootstrap

概要
自動の初期化
手動の初期化

概要

このページでは、Angularの初期化プロセスと、必要な場合に手動で初期化するための方法について説明します。

Angularの<script>タグ

この例では、我々が自動初期化と呼ぶAngularを統合するための推奨するパス指定を示しています。

<!doctype html>
<html xmlns:ng="http://angularjs.org" ng-app>
  <body>
    ...
    <script src="angular.js">
  </body>
</html>

scriptタグをページのページの下部に配置しています。 HTML読み込みはangular.jsスクリプトの読み込みにブロックされるので、 scriptタグをページの最後に配置することで、アプリケーションの読み込み時間の向上に繋がります。最新のコードは、http://code.angularjs.orgから取得可能です。セキュリティホールをサイト上に晒すことになりかねないので、本環境のコードからこのURLに対して直接リンクしないで下さい。実験・開発のためのリンクであれば、問題ありません。
- angular-[version].js は、人にとって読みやすいファイルで、開発とデバッグに適しています。
- angular-[version].min.js は圧縮されており、人にとって分かりにくいファイルで、本環境での使用に適しています。
ng-appは、もしAngularをアプリケーション上で自動実行したい場合に、アプリケーションのルート、一般的には<html>タグ上に配置します。
```
<html ng-app>
```
もし、IE7をサポートするのであればid="ng-app"の追加が必要です。
```
<html ng-app id="ng-app">
```
もし、古い形式のディレクティブ文法「ng:」を使用するのであれば、html内にxml-[名前空間]を含め、 IEにとって都合の良い状態にします。(歴史的な観点から、:ngの使用はお勧めしません。)
```
<html xmlns:ng="http://angularjs.org">
```

自動の初期化

Angularは、DOMContentLoadedイベント上で、またはdocument.readyStateが'complete'に設定されていれば、 angular.jsスクリプトが評価された際に自動的に初期化を行います。(翻訳に自信なし) Angularは、アプリケーションのルートを指し示すng-appディレクティブを探します。もし、ng-appディレクティブが見つかれば、Angularは下記のことを行います。

ディレクティブに関連付けられているモジュールを読み込みます。
アプリケーションインジェクターを作成します。
コンパイルのルートとして、ng-appディレクティブを扱うDOMをコンパイルします。
これは、Angularアプリケーションとして取り扱うことを許可するDOMの部分を伝えることになります。

<!doctype html>
<html ng-app="optionalModuleName">
  <body>
    I can add: {{ 1+2 }}.
    <script src="angular.js"></script>
  </body>
</html>

手動の初期化

もし、初期化プロセス全体を自分で制御する必要がある場合は、代わりに手動でブートストラップメソッドを使用することが出来ます。手動での初期化が必要となる例としては、スクリプトローダーの使用を含める事が必要な場合、またはAngularがページをコンパイルする前に何らかの操作が必要な場合などが挙げられます。

下記は、Angularを手動で初期化する例になります。

<!doctype html>
<html xmlns:ng="http://angularjs.org">
  <body>
    Hello {{'World'}}!
    <script src="http://code.angularjs.org/angular.js"></script>
    <script>
       angular.element(document).ready(function() {
         angular.module('myApp', []);
         angular.bootstrap(document, ['myApp']);
       });
    </script>
  </body>
</html>

api/angular.bootstrap関数の第2パラメータとして、インジェクターにロードするアプリケーションモジュールの名前を提供していることに注意してください。また、angular.bootstrapは、その場でモジュールを作成しないことにも注意してください。パラメータとして渡すカスタムモジュールを先に作成しなければいけません。

下記は従うべきコードの一連のフローになります。

ページと全てのコードが読み込まれた後に、一般的にdocumentのルートに指定されるAngularJSアプリケーションのルート要素を見つけます。
api/angular.bootstrapが、要素をアプリケーションと双方向に紐付け、実行可能なものにコンパイルします。

このページは、ページトップのリンク先のAngularJS公式ドキュメント内のページを翻訳した内容を基に構成されています。下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

AngularJSの更新頻度が高いため、元のコンテンツと比べてドキュメントの情報が古くなっている可能性があります。
"訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。