2012-02-25 00:14:44 +00:00
|
|
|
@ngdoc overview
|
|
|
|
|
@name Developer Guide: Bootstrap
|
|
|
|
|
@description
|
|
|
|
|
|
|
|
|
|
# Overview
|
|
|
|
|
|
|
|
|
|
This page explains the Angular initialization process and how you can manually initialize Angular
|
|
|
|
|
if necessary.
|
|
|
|
|
|
2013-06-12 19:40:07 +00:00
|
|
|
## Angular `<script>` Tag
|
2012-02-25 00:14:44 +00:00
|
|
|
|
|
|
|
|
This example shows the recommended path for integrating Angular with what we call automatic
|
|
|
|
|
initialization.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<pre>
|
|
|
|
|
<!doctype html>
|
|
|
|
|
<html xmlns:ng="http://angularjs.org" ng-app>
|
|
|
|
|
<body>
|
|
|
|
|
...
|
|
|
|
|
<script src="angular.js">
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
</pre>
|
|
|
|
|
|
2012-08-05 19:16:37 +00:00
|
|
|
* Place the `script` tag at the bottom of the page. Placing script tags at the end of the page
|
2012-08-08 14:12:54 +00:00
|
|
|
improves app load time because the HTML loading is not blocked by loading of the `angular.js`
|
2012-02-25 00:14:44 +00:00
|
|
|
script. You can get the latest bits from {@link http://code.angularjs.org}. Please don't link
|
|
|
|
|
your production code to this URL, as it will expose a security hole on your site. For
|
|
|
|
|
experimental development linking to our site is fine.
|
|
|
|
|
* Choose: `angular-[version].js` for a human-readable file, suitable for development and
|
|
|
|
|
debugging.
|
|
|
|
|
* Choose: `angular-[version].min.js` for a compressed and obfuscated file, suitable for use in
|
|
|
|
|
production.
|
|
|
|
|
* Place `ng-app` to the root of your application, typically on the `<html>` tag if you want
|
2012-08-05 19:16:37 +00:00
|
|
|
angular to auto-bootstrap your application.
|
2012-02-25 00:14:44 +00:00
|
|
|
|
|
|
|
|
<html ng-app>
|
|
|
|
|
|
2013-04-11 00:46:57 +00:00
|
|
|
* If IE7 support is required add `id="ng-app"`
|
|
|
|
|
|
|
|
|
|
<html ng-app id="ng-app">
|
|
|
|
|
|
2012-07-12 02:27:13 +00:00
|
|
|
* If you choose to use the old style directive syntax `ng:` then include xml-namespace in `html`
|
2012-08-05 19:16:37 +00:00
|
|
|
to make IE happy. (This is here for historical reasons, and we no longer recommend use of
|
2012-02-25 00:14:44 +00:00
|
|
|
`ng:`.)
|
2012-06-12 06:49:24 +00:00
|
|
|
|
2012-02-25 00:14:44 +00:00
|
|
|
<html xmlns:ng="http://angularjs.org">
|
2012-06-12 06:49:24 +00:00
|
|
|
|
|
|
|
|
|
2012-02-25 00:14:44 +00:00
|
|
|
|
2013-06-12 19:40:07 +00:00
|
|
|
## Automatic Initialization
|
2012-02-25 00:14:44 +00:00
|
|
|
|
2012-07-12 02:27:13 +00:00
|
|
|
Angular initializes automatically upon `DOMContentLoaded` event, at which point Angular looks for
|
2012-06-12 06:49:24 +00:00
|
|
|
the {@link api/ng.directive:ngApp `ng-app`} directive which
|
2012-07-12 02:27:13 +00:00
|
|
|
designates your application root. If the {@link
|
2012-06-12 06:49:24 +00:00
|
|
|
api/ng.directive:ngApp `ng-app`} directive is found then Angular
|
2012-02-25 00:14:44 +00:00
|
|
|
will:
|
|
|
|
|
|
|
|
|
|
* load the {@link guide/module module} associated with the directive.
|
2012-06-12 06:49:24 +00:00
|
|
|
* create the application {@link api/AUTO.$injector injector}
|
|
|
|
|
* compile the DOM treating the {@link api/ng.directive:ngApp
|
2012-02-25 00:14:44 +00:00
|
|
|
`ng-app`} directive as the root of the compilation. This allows you to tell it to treat only a
|
|
|
|
|
portion of the DOM as an Angular application.
|
|
|
|
|
|
2012-06-12 06:49:24 +00:00
|
|
|
|
2012-02-25 00:14:44 +00:00
|
|
|
<pre>
|
|
|
|
|
<!doctype html>
|
|
|
|
|
<html ng-app="optionalModuleName">
|
|
|
|
|
<body>
|
|
|
|
|
I can add: {{ 1+2 }}.
|
|
|
|
|
<script src="angular.js"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
</pre>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2013-06-12 19:40:07 +00:00
|
|
|
## Manual Initialization
|
2012-02-25 00:14:44 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
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
|
2012-07-12 02:27:13 +00:00
|
|
|
or the need to perform an operation before Angular compiles a page.
|
2012-02-25 00:14:44 +00:00
|
|
|
|
2013-06-12 19:40:07 +00:00
|
|
|
Here is an example of manually initializing Angular:
|
2012-02-25 00:14:44 +00:00
|
|
|
|
|
|
|
|
<pre>
|
|
|
|
|
<!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() {
|
2013-08-24 01:50:08 +00:00
|
|
|
angular.module('myApp', []);
|
|
|
|
|
angular.bootstrap(document, ['myApp']);
|
2012-02-25 00:14:44 +00:00
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
</pre>
|
|
|
|
|
|
2013-06-12 19:40:07 +00:00
|
|
|
Note that we have provided the name of our application module to be loaded into the injector as the second
|
2013-08-24 01:50:08 +00:00
|
|
|
parameter of the {@link api/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.
|
2013-06-12 19:40:07 +00:00
|
|
|
|
2012-07-12 02:27:13 +00:00
|
|
|
This is the sequence that your code should follow:
|
2012-02-25 00:14:44 +00:00
|
|
|
|
2013-06-12 19:40:07 +00:00
|
|
|
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.
|
2012-02-25 00:14:44 +00:00
|
|
|
|
2013-06-12 19:40:07 +00:00
|
|
|
2. Call {@link api/angular.bootstrap} to {@link compiler compile} the element into an
|
2012-02-25 00:14:44 +00:00
|
|
|
executable, bi-directionally bound application.
|
