Hopiu/angular.js
1
0
Fork 0
mirror of https://github.com/Hopiu/angular.js.git synced 2026-03-17 07:40:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Rewrite of Automatic Initialization doc

Browse source 
Added examples, explained the reasons why you initialize the whole app
or parts of the page.
This commit is contained in:
Brad Green 2012-03-27 08:27:42 -07:00
parent a08cbc02e7
commit 2ce0485e6f
1 changed files with 20 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
docs/content/guide/dev_guide.bootstrap.auto_bootstrap.ngdoc
View file

@ -2,8 +2,7 @@
@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:
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>
@ -17,30 +16,36 @@ with `ng-app` directive:
</html>
</pre>
From a high-level view, this is what happens during angular's automatic initialization process:
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:
1. The browser loads the page, and then runs the angular script. Angular waits for the
`DOMContentLoaded` (or 'Load') event to attempt to bootstrap.
<pre>
<div ng-app>
I can add: {{ 1+2 }}
</div>
</pre>
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}.
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
## Initialization Options
From a high-level, here's what Angular does during the initialization process:
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.
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.
## Global Angular Object
2. Angular looks for the `ng-app` directive. If found it compilies the DOM element containing `ng-app` and its children.
The angular script creates a single global variable `angular` in the global namespace. All angular
APIs are bound to fields of this global object.
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}