docs(guide/bootstrap): clarify manual bootstrapping

This commit is contained in:
Pete Bacon Darwin 2013-06-12 20:40:07 +01:00
parent 1fac36e2cb
commit 7eb15c46a2

View file

@ -7,8 +7,7 @@
This page explains the Angular initialization process and how you can manually initialize Angular
if necessary.
# Angular `<script>` Tag
## Angular `<script>` Tag
This example shows the recommended path for integrating Angular with what we call automatic
initialization.
@ -50,7 +49,7 @@ initialization.
# Automatic Initialization
## Automatic Initialization
Angular initializes automatically upon `DOMContentLoaded` event, at which point Angular looks for
the {@link api/ng.directive:ngApp `ng-app`} directive which
@ -77,16 +76,14 @@ will:
# Manual Initialization
## 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 Angular compiles a page.
Here is an example of manually initializing Angular. The example is equivalent to using the {@link
api/ng.directive:ngApp ng-app} directive.
Here is an example of manually initializing Angular:
<pre>
<!doctype html>
@ -96,17 +93,22 @@ api/ng.directive:ngApp ng-app} directive.
<script src="http://code.angularjs.org/angular.js"></script>
<script>
angular.element(document).ready(function() {
angular.bootstrap(document);
angular.bootstrap(document, ['optionalModuleName']);
});
</script>
</body>
</html>
</pre>
Note that we have provided the name of our application module to be loaded into the injector as the second
parameter of the {@link api/angular.bootstrap} function. This example is equivalent to using the
{@link api/ng.directive:ngApp ng-app} directive, with `ng-app="optionalModuleName"`, as in the automatic
initialization example above.
This is the sequence that your code should follow:
1. After the page and all of the code is loaded, find the root of the HTML template, which is
typically the root of the document.
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 api/angular.bootstrap} to {@link compiler compile} the template into an
2. Call {@link api/angular.bootstrap} to {@link compiler compile} the element into an
executable, bi-directionally bound application.