docs/content/guide/bootstrap.ngdoc

@ngdoc overview
@name  Bootstrap
@sortOrder 350
@description

# Bootstrap

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


## AngularJS `<script>` Tag

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


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

  1. 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.
  2. Place `ng-app` to the root of your application, typically on the `<html>` tag if you want
    AngularJS to auto-bootstrap your application.

        <html ng-app>

  3. If you choose to use the old style directive syntax `ng:` then include xml-namespace in `html`
    when running the page in the XHTML mode. (This is here for historical reasons, and we no longer
    recommend use of `ng:`.)

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


## Automatic Initialization

<img class="pull-right" style="padding-left: 3em;" src="img/guide/concepts-startup.png">

AngularJS 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 AngularJS looks
for the {@link ng.directive:ngApp `ngApp`} directive which designates your application root.
If the {@link ng.directive:ngApp `ngApp`} directive is found then AngularJS will:

  * load the {@link guide/module module} associated with the directive.
  * create the application {@link auto.$injector injector}
  * compile the DOM treating the {@link ng.directive:ngApp
    `ngApp`} directive as the root of the compilation. This allows you to tell it to treat only a
    portion of the DOM as an AngularJS application.


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

As a best practice, consider adding an `ng-strict-di` directive on the same element as
`ng-app`:


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

This will ensure that all services in your application are properly annotated.
See the {@link guide/di#using-strict-dependency-injection dependency injection strict mode} docs
for more.


## 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 AngularJS compiles a page.

Here is an example of manually initializing AngularJS:

```html
<!doctype html>
<html>
<body>
  <div ng-controller="MyController">
    Hello {{greetMe}}!
  </div>
  <script src="http://code.angularjs.org/snapshot/angular.js"></script>

  <script>
    angular.module('myApp', [])
      .controller('MyController', ['$scope', function ($scope) {
        $scope.greetMe = 'World';
      }]);

    angular.element(function() {
      angular.bootstrap(document, ['myApp']);
    });
  </script>
</body>
</html>
```

Note that we provided the name of our application module to be loaded into the injector as the second
parameter of the {@link angular.bootstrap} function. Notice that `angular.bootstrap` will not create modules
on the fly. You must create any custom {@link guide/module modules} before you pass them as a parameter.

You should call `angular.bootstrap()` *after* you've loaded or defined your modules.
You cannot add controllers, services, directives, etc after an application bootstraps.

<div class="alert alert-warning">
**Note:** You should not use the ng-app directive when manually bootstrapping your app.
</div>

This is the sequence that your code should follow:

  1. 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.

  2. Call {@link angular.bootstrap} to {@link compiler compile} the element into an
  executable, bi-directionally bound application.

## Things to keep in mind

There are a few things to keep in mind regardless of automatic or manual bootstrapping:

- While it's possible to bootstrap more than one AngularJS application per page, we don't actively
  test against this scenario. It's possible that you'll run into problems, especially with complex apps, so
  caution is advised.
- Do not bootstrap your app on an element with a directive that uses {@link ng.$compile#transclusion transclusion}, such as
  {@link ng.ngIf `ngIf`}, {@link ng.ngInclude `ngInclude`} and {@link ngRoute.ngView `ngView`}.
  Doing this misplaces the app {@link ng.$rootElement `$rootElement`} and the app's {@link auto.$injector injector},
  causing animations to stop working and making the injector inaccessible from outside the app.

## Deferred Bootstrap

This feature enables tools like [Batarang](https://github.com/angular/angularjs-batarang) and test runners
to hook into angular's bootstrap process and sneak in more modules
into the DI registry which can replace or augment DI services for
the purpose of instrumentation or mocking out heavy dependencies.

If `window.name` contains prefix `NG_DEFER_BOOTSTRAP!` when
{@link angular.bootstrap} is called, the bootstrap process will be paused
until `angular.resumeBootstrap()` is called.

`angular.resumeBootstrap()` takes an optional array of modules that
should be added to the original list of modules that the app was
about to be bootstrapped with.