はじめに _注意事項_ 

このドキュメントは、[@atusi](http://twitter.com/atusi "@atusi")による。無許可のオレオレAngularJSドキュメントの和訳ドキュメントです。オリジナルは、[Angularjs/guid/bootstrap](http://docs.angularjs.org/guide/bootstrap "Qiita") になります。
なお、誤字脱字誤訳等々ある場合には、[編集リクエスト](http://blog.qiita.com/post/40808687185/patch-request-release) をして下さい。ご協力ありがとうございます。m(__)m

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

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

<!--
# Overview
This page explains the Angular initialization process and how you can manually initialize Angular if necessary.
-->

# 概要

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

# Angular \<script\> Tag

<!--
This example shows the recommended path for integrating Angular with what we call automatic initialization.
-->

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

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

<!--
- Place the script tag at the bottom of the page. Placing script tags at the end of the page improves app load time because the HTML loading is not blocked by loading of the angular.js script. You can get the latest bits from http://code.angularjs.org. Please don't link your production code to this URL, as it will expose a security hole on your site. For experimental development linking to our site is fine.

 - Choose: angular-[version].js for a human-readable file, suitable for development and debugging.

 - Choose: angular-[version].min.js for a compressed and obfuscated file, suitable for use in production.
-->

- ページのボトムにスクリプトタグが有ります。ページの最後に記述することでHTMLの読み込み時間を妨げること無く、angular.jsファイルを読み込まれるます。
  - Chose: angular-[version].js は、可動可能なファイルです。開発やデバッグに適しています。

  - Choose: angular-[version].min.jsファイルは、コンパイル済みファイルです。プロダクジョンにはこちらを使用して下さい。


<!--
- Place ng-app to the root of your application, typically on the <html> tag if you want angular to auto-bootstrap your application.
-->

- アプリケーションの<html>タグ（root)にng-appの記述をします。これにより、angularは自動的にあなたのアプリケーションにbootstrapを走らせ利用可能になります。

```
<html ng-app>
```

<!--
- If you choose to use the old style directive syntax ng: then include xml-namespace in html to make IE happy. (This is here for historical reasons, and we no longer recommend use of ng:.)
-->
- もし、IEをハッピーにさせたいなら、昔ながらのng:をxml-namespaceに記述します。(This is here for historical reasons, and we no longer recommend use of ng:.)

```
<html xmlns:ng="http://angularjs.org">
```

<!--
# Automatic Initialization
-->
# 自動初期化方法
<!--
Angular initializes automatically upon DOMContentLoaded event, at which point Angular looks for the ng-app directive which designates your application root. If the ng-app directive is found then Angular will:

- load the module associated with the directive.

- create the application injector

- compile the DOM treating the ng-app directive as the root of the compilation. This allows you to tell it to treat only a portion of the DOM as an Angular application.
-->

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>
```

<!--
# Manual Initialization
-->
# 手動初期化方法
<!--
If you need to have more control over the initialization process, you can use a manual bootstrapping method instead. Examples of when you'd need to do this include using script loaders or the need to perform an operation before Angular compiles a page.

Here is an example of manually initializing Angular. The example is equivalent to using the ng-app directive.
-->

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

<!--
This is the sequence that your code should follow:

1. After the page and all of the code is loaded, find the root of the HTML template, which is typically the root of the document.

1. Call api/angular.bootstrap to compile the template into an executable, bi-directionally bound application.
-->

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

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

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


# Discussion