aboutsummaryrefslogtreecommitdiffstats
path: root/docs/content/guide/dev_guide.bootstrap.auto_bootstrap.ngdoc
blob: ff14a703fc54f842a5370270b46995b65ad1d33a (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
@ngdoc overview
@name Developer Guide: Initializing Angular: Automatic Initialization
@description

Angular initializes automatically when you load the angular script into your page that contains an element
with `ng:app` directive:

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

From a high-level view, this is what happens during angular's automatic initialization process:

1. The browser loads the page, and then runs the angular script. Angular waits for the
`DOMContentLoaded` (or 'Load') event to attempt to bootstrap.

2. Angular looks for the `ng:app` directive. If found it then proceeds to compile the DOM element and its children.
Optionally the `ng:app` may specify a {@link api/angular.module module} to load before the compilation. For details on
how the compiler works, see {@link dev_guide.compiler Angular HTML Compiler}.


## Initialization Options

The reason why `ng:app` exists is because angular should not assume that the entire HTML
document should be processed just because the `angular.js` script is included. In order to compile
only a part of the document set the `ng:app` on the root element of this portion.

## Global Angular Object

The angular script creates a single global variable `angular` in the global namespace. All angular
APIs are bound to fields of this global object.


## Related Topics

* {@link dev_guide.bootstrap Initializing Angular}
* {@link dev_guide.bootstrap.manual_bootstrap Manual Initialization}

## Related API

{@link api/angular.module.ng.$compile Compiler API}