diff options
Diffstat (limited to 'docs/content/guide/bootstrap.ngdoc')
| -rw-r--r-- | docs/content/guide/bootstrap.ngdoc | 108 |
1 files changed, 108 insertions, 0 deletions
diff --git a/docs/content/guide/bootstrap.ngdoc b/docs/content/guide/bootstrap.ngdoc new file mode 100644 index 00000000..bd888b2d --- /dev/null +++ b/docs/content/guide/bootstrap.ngdoc @@ -0,0 +1,108 @@ +@ngdoc overview +@name Developer Guide: Bootstrap +@description + +# Overview + +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 +initialization. + + +<pre> +<!doctype html> +<html xmlns:ng="http://angularjs.org" ng-app> + <body> + ... + <script src="angular.js"> + </body> +</html> +</pre> + + * Place the `script` tag at the buttom of the page. Placing script tags at the end of the page + impreves app load time becouse the HTML loading is not blocked by loading of the `angular.js` + 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 + anugular to auto-bootstrap your application. + + <html ng-app> + + * If you chose to use the old style directive syntax `ng:` then include xml-namespace in `html` + to make IE happy. (This is here for historical resons, and we no longer recomend use of + `ng:`.) + + <html xmlns:ng="http://angularjs.org"> + + + +# Automatic Initialization + +Angular initializes automatically upon `DOMContentLoaded` event, at which point angular looks for +the {@link api/angular.module.ng.$compileProvider.directive.ng:app `ng-app`} directive which +designates your application root. If {@link +api/angular.module.ng.$compileProvider.directive.ng:app `ng-app`} directive is found then Angular +will: + + * load the {@link guide/module module} associated with the directive. + * create the application {@link api/angular.module.AUTO.$injector injector} + * compile the DOM treating the {@link api/angular.module.ng.$compileProvider.directive.ng:app + `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. + + +<pre> +<!doctype html> +<html ng-app="optionalModuleName"> + <body> + I can add: {{ 1+2 }}. + <script src="angular.js"></script> + </body> +</html> +</pre> + + + +# 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 the Angular compiles a page. + + +Here is an example of manually initializing Angular. The example is equivalent to using the {@link +api/angular.module.ng.$compileProvider.directive.ng:app ng:app} directive. + +<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() { + angular.bootstrap(document); + }); + </script> + </body> +</html> +</pre> + +This sequence that your code should follow: + + 1. After the page and all of the code is loaded, find the root of the HTML template, which is + typically the root of the document. + + 2. Call {@link api/angular.bootstrap} to {@link compiler compile} the template into an + executable, bi-directionally bound application. |
