はじめに _注意事項_

3418 ワード
document japanese JavaScript Angular JavaScript テキストリンク

このドキュメントは、@atusiによる。無許可のオレオレAngularJSドキュメントの和訳ドキュメントです。オリジナルは、Angularjs/guid/bootstrap になります。
なお、誤字脱字誤訳等々ある場合には、編集リクエスト をして下さい。ご協力ありがとうございます。m(__)m

markdownでは、原文をコメントアウト（非表示）にする方法がわからず非常に見難くなっています。どうすればいいのーー！！

関係各位：問題ある場合には、消しますのでmentionください。

概要

このページでは、Angularの初期化プロセスを解説します。また、手動で初期化する方法についても解説します。

Angular <script> Tag

おすすめのAngularを初期化する方法です、我々は、"automatic inializasion"と呼んでいます。

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

  • ページのボトムにスクリプトタグが有ります。ページの最後に記述することでHTMLの読み込み時間を妨げること無く、angular.jsファイルを読み込まれるます。

    • Chose: angular-[version].js は、可動可能なファイルです。開発やデバッグに適しています。
    • Choose: angular-[version].min.jsファイルは、コンパイル済みファイルです。プロダクジョンにはこちらを使用して下さい。
  • アプリケーションのタグ（root)にng-appの記述をします。これにより、angularは自動的にあなたのアプリケーションにbootstrapを走らせ利用可能になります。
<html ng-app>
  • もし、IEをハッピーにさせたいなら、昔ながらのng:をxml-namespaceに記述します。(This is here for historical reasons, and we no longer recommend use of ng:.)
<html xmlns:ng="http://angularjs.org">

自動初期化方法

Angularは、あなたのアプリケーションRootにng-app ディレクティブを見つけると、DOMContentLoadedイベントで自動的に初期されます。

  • ディレクティブに関連したモジュールがロードされる

  • アプリケーションインジェクターが作成される

  • DOMツリーが完成するとng-appディレクティブがRootに編集されます。これにより、あなたはAngularを通してDOMを自由に操ることが出来るようになります。

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

手動初期化方法

もし、あなたが初期化プロセスをより自由にコントロールしたいならば、手動で初期化することも可能です。例えば、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.bootstrap(document);
       });
    </script>
  </body>
</html>

このシーケンスは以下の手順になります。

  1. ページのコードがすべて読み込み終わると、一般的なドキュメントのRootを探しに行きます。

  2. api/angular.bootstrapがコールすることで、ドキュメントと双方向束縛されます。

Discussion