77This page explains the Angular initialization process and how you can manually initialize Angular
88if necessary.
99
10+
1011## Angular `<script>` Tag
1112
1213This 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-
8383If you need to have more control over the initialization process, you can use a manual
8484bootstrapping method instead. Examples of when you'd need to do this include using script loaders
8585or 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
106112parameter of the {@link angular.bootstrap} function. Notice that `angular.bootstrap` will not create modules
107113on 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+
109122This 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
119133This feature enables tools like Batarang and test runners to
0 commit comments