Overview

This page explains the Angular initialization process and how you can manually initialize Angular if necessary.

Angular `<script>` Tag

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

<!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.
Place ng-app to the root of your application, typically on the <html> tag if you want angular to auto-bootstrap your application.
```
<html ng-app>
```
If IE7 support is required add id="ng-app"
```
<html ng-app id="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:.)
```
<html xmlns:ng="http://angularjs.org">
```

Automatic Initialization

Angular initializes automatically upon DOMContentLoaded event or when the angular.js script is evaluated if at that time document.readyState is set to 'complete'. At this 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.

<!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:

<!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, ['optionalModuleName']);
       });
    </script>
  </body>
</html>

Note that we have provided the name of our application module to be loaded into the injector as the second parameter of the api/angular.bootstrap function. This example is equivalent to using the ng-app directive, with ng-app="optionalModuleName", as in the automatic initialization example above.

This is the sequence that your code should follow:

After the page and all of the code is loaded, find the root element of your AngularJS application, which is typically the root of the document.
Call api/angular.bootstrap to compile the element into an executable, bi-directionally bound application.

Overview

Angular <script> Tag

Automatic Initialization

Manual Initialization

Angular `<script>` Tag