Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 47384bc

Browse files
trusktrbtford
authored andcommitted
docs(guide/bootstrap): add note about ngApp and manual bootstrap
1 parent 50eb3b2 commit 47384bc

File tree

1 file changed

+27
-13
lines changed

1 file changed

+27
-13
lines changed

docs/content/guide/bootstrap.ngdoc

Lines changed: 27 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
This page explains the Angular initialization process and how you can manually initialize Angular
88
if necessary.
99

10+
1011
## Angular `<script>` Tag
1112

1213
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:
7980

8081
## Manual Initialization
8182

82-
8383
If you need to have more control over the initialization process, you can use a manual
8484
bootstrapping method instead. Examples of when you'd need to do this include using script loaders
8585
or the need to perform an operation before Angular compiles a page.
@@ -88,24 +88,37 @@ Here is an example of manually initializing Angular:
8888

8989
```html
9090
<!doctype html>
91-
<html xmlns:ng="http://angularjs.org">
92-
<body>
93-
Hello {{'World'}}!
94-
<script src="http://code.angularjs.org/angular.js"></script>
95-
<script>
96-
angular.element(document).ready(function() {
97-
angular.module('myApp', []);
98-
angular.bootstrap(document, ['myApp']);
99-
});
100-
</script>
101-
</body>
91+
<html>
92+
<body>
93+
Hello {{'World'}}!
94+
<script src="http://code.angularjs.org/angular.js"></script>
95+
96+
<script>
97+
angular.module('myApp', [])
98+
.controller('MyController', ['$scope', function ($scope) {
99+
$scope.greetMe = 'World';
100+
}]);
101+
102+
angular.element(document).ready(function() {
103+
angular.module('myApp', []);
104+
angular.bootstrap(document, ['myApp']);
105+
});
106+
</script>
107+
</body>
102108
</html>
103109
```
104110

105-
Note that we have provided the name of our application module to be loaded into the injector as the second
111+
Note that we provided the name of our application module to be loaded into the injector as the second
106112
parameter of the {@link angular.bootstrap} function. Notice that `angular.bootstrap` will not create modules
107113
on the fly. You must create any custom {@link guide/module modules} before you pass them as a parameter.
108114

115+
You should call `angular.bootstrap()` *after* you've loaded or defined your modules.
116+
You cannot add controllers, services, directives, etc after an application bootstraps.
117+
118+
<div class="alert alert-warning">
119+
**Note:** You should not use the ng-app directive when manually bootstrapping your app.
120+
</div>
121+
109122
This is the sequence that your code should follow:
110123

111124
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:
114127
2. Call {@link angular.bootstrap} to {@link compiler compile} the element into an
115128
executable, bi-directionally bound application.
116129

130+
117131
## Deferred Bootstrap
118132

119133
This feature enables tools like Batarang and test runners to

0 commit comments

Comments
 (0)