aboutsummaryrefslogtreecommitdiffstats
path: root/docs/content/guide/dev_guide.bootstrap.auto_bootstrap.ngdoc
diff options
context:
space:
mode:
Diffstat (limited to 'docs/content/guide/dev_guide.bootstrap.auto_bootstrap.ngdoc')
-rw-r--r--docs/content/guide/dev_guide.bootstrap.auto_bootstrap.ngdoc130
1 files changed, 130 insertions, 0 deletions
diff --git a/docs/content/guide/dev_guide.bootstrap.auto_bootstrap.ngdoc b/docs/content/guide/dev_guide.bootstrap.auto_bootstrap.ngdoc
new file mode 100644
index 00000000..1c5e3e26
--- /dev/null
+++ b/docs/content/guide/dev_guide.bootstrap.auto_bootstrap.ngdoc
@@ -0,0 +1,130 @@
+@workInProgress
+@ngdoc overview
+@name Developer Guide: Initializing Angular: Automatic Initiialization
+@description
+
+
+Angular initializes automatically when you load the angular script into your page, specifying
+angular's `ng:autobind` attribute with no arguments:
+
+
+ <script src="angular.js" ng:autobind>
+
+
+From a high-level view, this is what happens during angular's automatic initialization process:
+
+
+1. The browser loads the page, and then runs the angular script.
+
+
+ The `ng:autobind` attribute tells angular to compile and manage the whole HTML document. The
+compilation phase is initiated in the page's `onLoad()` handler. Angular doesn't begin processing
+the page until after the page load is complete.
+
+
+2. Angular finds the root of the HTML document and creates the global variable `angular` in the
+global namespace. Everything that angular subsequently creates is bound to fields in this global
+object.
+
+
+3. Angular walks the DOM looking for angular widgets, directives, and markup (such as `ng:init` or
+`ng:repeat`). As angular encounters these, it creates child scopes as necessary and attaches them
+to the DOM, registers listeners on those scopes, associates any controller functions with their
+data and their part of the view, and ultimately constructs a runnable application. The resulting
+app features two-way data-binding and a nice separation between data, presentation, and business
+logic.
+
+
+4. For the duration of the application session (while the page is loaded), angular monitors the
+state of the application, and updates the view and the data model whenever the state of either one
+changes.
+
+
+For details on how the compiler works, see {@link dev_guide.compiler Angular HTML Compiler}.
+
+
+
+
+## Initialization Options
+
+
+The reason why `ng:autobind` exists is because angular should not assume that the entire HTML
+document should be processed just because the `angular.js` script is included. In order to compile
+only a part of the document, specify the ID of the element you want to use for angular's root
+element as the value of the `ng:autobind` attribute:
+
+
+ ng:autobind="angularContent"
+
+
+
+
+## Auto-bootstrap with `#autobind`
+
+
+In some rare cases you can't define the `ng:` prefix before the script tag's attribute (for
+example, in some CMS systems). In those situations it is possible to auto-bootstrap angular by
+appending `#autobind` to the `<script src=...>` URL, like in this snippet:
+
+
+<pre>
+ <!doctype html>
+ <html>
+ <head>
+ <script type="text/javascript"
+ src="http://code.angularjs.org/angular.js#autobind"></script>
+ </head>
+ <body>
+ <div xmlns:ng="http://angularjs.org">
+ Hello {{'world'}}!
+ </div>
+ </body>
+ </html>
+</pre>
+
+
+As with `ng:autobind`, you can specify an element id that should be exclusively targeted for
+compilation as the value of the `#autobind`, for example: `#autobind=angularContent`.
+
+
+## Filename Restrictions for Auto-bootstrap
+
+
+In order for us to find the auto-bootstrap from a script attribute or URL fragment, the value of
+the `script` `src` attribute that loads the angular script must match one of these naming
+conventions:
+
+
+- `angular.js`
+- `angular-min.js`
+- `angular-x.x.x.js`
+- `angular-x.x.x.min.js`
+- `angular-x.x.x-xxxxxxxx.js` (dev snapshot)
+- `angular-x.x.x-xxxxxxxx.min.js` (dev snapshot)
+- `angular-bootstrap.js` (used for development of angular)
+
+
+Optionally, any of the filename formats above can be prepended with a relative or absolute URL that
+ends with `/`.
+
+
+## Global Angular Object
+
+
+The angular script creates a single global variable `angular` in the global namespace. All angular
+APIs are bound to fields of this global object.
+
+
+
+
+## Related Topics
+
+
+* {@link dev_guide.bootstrap Initializing Angular}
+* {@link dev_guide.bootstrap.manual_bootstrap Manual Initialization}
+
+
+## Related API
+
+
+{@link api/angular.compile Compiler API}