mirror of
https://github.com/zhigang1992/angular.js.git
synced 2026-04-05 22:35:14 +08:00
docs(guide/bootstrap): add note about ngApp and manual bootstrap
This commit is contained in:
committed by
Brian Ford
parent
8d4d437e8c
commit
245de33c00
@@ -7,6 +7,7 @@
|
||||
This page explains the Angular initialization process and how you can manually initialize Angular
|
||||
if necessary.
|
||||
|
||||
|
||||
## Angular `<script>` Tag
|
||||
|
||||
This example shows the recommended path for integrating Angular with what we call automatic
|
||||
@@ -79,7 +80,6 @@ If the {@link ng.directive:ngApp `ng-app`} directive is found then Angular will:
|
||||
|
||||
## 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.
|
||||
@@ -88,24 +88,37 @@ Here is an example of manually initializing Angular:
|
||||
|
||||
```html
|
||||
<!doctype html>
|
||||
<html xmlns:ng="http://angularjs.org">
|
||||
<body>
|
||||
Hello {{'World'}}!
|
||||
<script src="http://code.angularjs.org/angular.js"></script>
|
||||
<script>
|
||||
angular.element(document).ready(function() {
|
||||
angular.module('myApp', []);
|
||||
angular.bootstrap(document, ['myApp']);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
<html>
|
||||
<body>
|
||||
Hello {{'World'}}!
|
||||
<script src="http://code.angularjs.org/angular.js"></script>
|
||||
|
||||
<script>
|
||||
angular.module('myApp', [])
|
||||
.controller('MyController', ['$scope', function ($scope) {
|
||||
$scope.greetMe = 'World';
|
||||
}]);
|
||||
|
||||
angular.element(document).ready(function() {
|
||||
angular.module('myApp', []);
|
||||
angular.bootstrap(document, ['myApp']);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Note that we have provided the name of our application module to be loaded into the injector as the second
|
||||
Note that we provided the name of our application module to be loaded into the injector as the second
|
||||
parameter of the {@link angular.bootstrap} function. Notice that `angular.bootstrap` will not create modules
|
||||
on the fly. You must create any custom {@link guide/module modules} before you pass them as a parameter.
|
||||
|
||||
You should call `angular.bootstrap()` *after* you've loaded or defined your modules.
|
||||
You cannot add controllers, services, directives, etc after an application bootstraps.
|
||||
|
||||
<div class="alert alert-warning">
|
||||
**Note:** You should not use the ng-app directive when manually bootstrapping your app.
|
||||
</div>
|
||||
|
||||
This is the sequence that your code should follow:
|
||||
|
||||
1. After the page and all of the code is loaded, find the root element of your AngularJS
|
||||
@@ -114,6 +127,7 @@ This is the sequence that your code should follow:
|
||||
2. Call {@link angular.bootstrap} to {@link compiler compile} the element into an
|
||||
executable, bi-directionally bound application.
|
||||
|
||||
|
||||
## Deferred Bootstrap
|
||||
|
||||
This feature enables tools like Batarang and test runners to
|
||||
|
||||
Reference in New Issue
Block a user