aboutsummaryrefslogtreecommitdiffstats
path: root/docs/content/guide/bootstrap.ngdoc
diff options
context:
space:
mode:
Diffstat (limited to 'docs/content/guide/bootstrap.ngdoc')
-rw-r--r--docs/content/guide/bootstrap.ngdoc108
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.