blob: 2567cf68c92f5c5f2d9f54fffd8b94646dfa1811 (
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
47
48
49
50
51
52
53
54
|
@ngdoc overview
@name Developer Guide: Initializing Angular: Automatic Initialization
@description
For Angular to manage the DOM for your application, it needs to compile some or all of an HTML page. Angular does this initialization automatically when you load the angular.js script into your page and insert an `ng-app` directive (attribute) into one of the page's elements. For example, we can tell Angular to initialize the entire document:
<pre>
<!doctype html>
<html ng-app>
<head>
<script src="angular.js"></script>
</head>
<body>
I can add: {{ 1+2 }}.
</body>
</html>
</pre>
You can also tell Angular to manage only a portion of a page. You would want to do this if you are using some other framework to manage other parts of the page. You do this by placing the `ng-app` directive on one or more container elements in the document. For example:
<pre>
<div ng-app>
I can add: {{ 1+2 }}
</div>
</pre>
You can also ask `ng-app` to load additional {@link api/angular.module modules} containing services, directives or filers that you'll use on the page.
<pre>
<div ng-app="AwesomeModule">
...
</div>
</pre
From a high-level, here's what Angular does during the initialization process:
1. The browser loads the page, and then runs the Angular script. Angular then waits for the
`DOMContentLoaded` (or 'Load') event to attempt to initialize.
2. Angular looks for the `ng-app` directive. If found it compilies the DOM element containing `ng-app` and its children.
3. Angular creates a global variable `angular` and binds all Angular APIs to this object's fields.
## Related Topics
* {@link dev_guide.compiler Angular HTML Compiler}
* {@link dev_guide.bootstrap Initializing Angular}
* {@link dev_guide.bootstrap.manual_bootstrap Manual Initialization}
## Related API
{@link api/angular.module.ng.$compile Compiler API}
|
