2011-06-06 15:50:35 +00:00
|
|
|
@ngdoc overview
|
2011-10-13 05:50:35 +00:00
|
|
|
@name Developer Guide: Initializing Angular: Automatic Initialization
|
2011-06-06 15:50:35 +00:00
|
|
|
@description
|
|
|
|
|
|
2012-01-07 02:10:47 +00:00
|
|
|
Angular initializes automatically when you load the angular script into your page that contains an element
|
|
|
|
|
with `ng:app` directive:
|
|
|
|
|
|
2012-01-17 19:00:25 +00:00
|
|
|
<pre>
|
|
|
|
|
<!doctype html>
|
|
|
|
|
<html ng:app>
|
|
|
|
|
<head>
|
|
|
|
|
<script src="angular.js"></script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
I can add: {{ 1+2 }}.
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
</pre>
|
2011-06-06 15:50:35 +00:00
|
|
|
|
|
|
|
|
From a high-level view, this is what happens during angular's automatic initialization process:
|
|
|
|
|
|
2012-01-07 02:10:47 +00:00
|
|
|
1. The browser loads the page, and then runs the angular script. Angular waits for the
|
|
|
|
|
`DOMContentLoaded` (or 'Load') event to attempt to bootstrap.
|
2011-06-06 15:50:35 +00:00
|
|
|
|
2012-01-07 02:10:47 +00:00
|
|
|
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}.
|
2011-06-06 15:50:35 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
## Initialization Options
|
|
|
|
|
|
2012-01-07 02:10:47 +00:00
|
|
|
The reason why `ng:app` exists is because angular should not assume that the entire HTML
|
2011-06-06 15:50:35 +00:00
|
|
|
document should be processed just because the `angular.js` script is included. In order to compile
|
2012-01-07 02:10:47 +00:00
|
|
|
only a part of the document set the `ng:app` on the root element of this portion.
|
2011-06-06 15:50:35 +00:00
|
|
|
|
|
|
|
|
## 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
|
|
|
|
|
|
2011-11-12 01:15:22 +00:00
|
|
|
{@link api/angular.module.ng.$compile Compiler API}
|
