This section explains how to bootstrap your application to the angular environment using either
the angular.js
or angular.min.js
script.
Note that there are two versions of the bootstrap code that you can use:
angular-0.0.0.js
- this file is unobfuscated, uncompressed, and thus human-readable.angular-0.0.0.min.js
- this is a compressed and obfuscated version of angular-debug.js.In this section and throughout the Developer Guide, feel free to use angular.min.js
instead of
angular.js
when working through code examples.
The simplest way to get an angular application up and running is by inserting a script tag in your
HTML file that bootstraps the angular.js
code and uses the special ng:autobind
attribute,
like in this snippet of HTML:
Hello {{'World'}}!
The ng:autobind
attribute tells angular to compile and manage the whole HTML document. The
compilation occurs in the page's onLoad handler. Note that you don't need to explicitly add an
onLoad event; auto bind mode takes care of all the magic for you.
Using autobind mode is a handy way to start using angular, but advanced users who want more control over the initialization process might prefer to use manual bind mode instead.
The best way to get started with manual bind mode is to look at the magic behind ng:autobind
by writing out each step of the autobind process explicitly. Note that the following code is
equivalent to the code in the previous section.
<!DOCTYPE HTML> <html xmlns:ng="http://angularjs.org"> <script type="text/javascript" src="http://code.angularjs.org/angular-0.0.0.min.js"></script> <script type="text/javascript"> (function(window, previousOnLoad){ window.onload = function(){ try { (previousOnLoad||angular.noop)(); } catch(e) {} angular.compile(window.document)(); }; })(window, window.onload); </script> <body> Hello {{'World'}}! </body> </html>
This is the sequence that your code should follow if you're writing your own manual binding code:
IMPORTANT: When using angular you must declare the ng
namespace using the xmlns
tag.
If you don't declare the namespace, Internet Explorer does not render widgets properly.
<html xmlns:ng="http://angularjs.org">
If you want to define your own widgets, you must create your own namespace and use that namespace to form the fully qualified widget name. For example, you could map the alias my to your domain and create a widget called my:widget. To create your own namespace, simply add another xmlns tag to your page, create an alias, and set it to your unique domain:
<html xmlns:my="http://mydomain.com">
The angular script creates a single global variable angular
in the global namespace. All APIs are
bound to fields of this global object.