7
7
This page explains the Angular initialization process and how you can manually initialize Angular
8
8
if necessary.
9
9
10
+
10
11
## Angular `<script>` Tag
11
12
12
13
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:
79
80
80
81
## Manual Initialization
81
82
82
-
83
83
If you need to have more control over the initialization process, you can use a manual
84
84
bootstrapping method instead. Examples of when you'd need to do this include using script loaders
85
85
or the need to perform an operation before Angular compiles a page.
@@ -88,24 +88,37 @@ Here is an example of manually initializing Angular:
88
88
89
89
```html
90
90
<!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>
102
108
</html>
103
109
```
104
110
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
106
112
parameter of the {@link angular.bootstrap} function. Notice that `angular.bootstrap` will not create modules
107
113
on the fly. You must create any custom {@link guide/module modules} before you pass them as a parameter.
108
114
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
+
109
122
This is the sequence that your code should follow:
110
123
111
124
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:
114
127
2. Call {@link angular.bootstrap} to {@link compiler compile} the element into an
115
128
executable, bi-directionally bound application.
116
129
130
+
117
131
## Deferred Bootstrap
118
132
119
133
This feature enables tools like Batarang and test runners to
0 commit comments