forked from angular/code.angularjs.org
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathangular.directive.ng:autobind.html
125 lines (107 loc) · 6.13 KB
/
angular.directive.ng:autobind.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<h1>angular.directive.ng:autobind</h1>
<div class="angular-directive-ng-autobind"><fieldset class="workInProgress"><legend>Work in Progress</legend>
This page is currently being revised. It might be incomplete or contain inaccuracies.</fieldset>
<h2>Description</h2>
<div class="description"><p>This section explains how to bootstrap your application with angular, using either the angular
javascript file, or manually.</p>
<h3>Auto-bootstrap with <code>ng:autobind</code></h3>
<p>The simplest way to get an <tt><angular/></tt> application up and running is by inserting a script tag in
your HTML file that bootstraps the <code>http://code.angularjs.org/angular-x.x.x.min.js</code> code and uses
the special <code>ng:autobind</code> attribute, like in this snippet of HTML:</p><div ng:non-bindable><pre class="brush: js; html-script: true;">
<!doctype html>
<html xmlns:ng="http://angularjs.org">
<head>
<script type="text/javascript" src="http://code.angularjs.org/angular-0.9.3.min.js"
ng:autobind></script>
</head>
<body>
Hello {{'world'}}!
</body>
</html>
</pre></div><p>The <code>ng:autobind</code> attribute without any value tells angular to compile and manage the whole HTML
document. The compilation occurs as soon as the document is ready for DOM manipulation. Note that
you don't need to explicitly add an <code>onLoad</code> event handler; auto bind mode takes care of all the
work for you.</p>
<p>In order to compile only a part of the document, specify the id of the element that should be
compiled as the value of the <code>ng:autobind</code> attribute, e.g. <code>ng:autobind="angularContent"</code>.</p>
<h4>Auto-bootstrap with <code>#autobind</code></h4>
<p>In rare cases when you can't define the <code>ng</code> namespace before the script tag (e.g. in some CMS
systems, etc), it is possible to auto-bootstrap angular by appending <code>#autobind</code> to the script
src URL, like in this snippet:</p><div ng:non-bindable><pre class="brush: js; html-script: true;">
<!doctype html>
<html>
<head>
<script type="text/javascript"
src="http://code.angularjs.org/angular-0.9.3.min.js#autobind"></script>
</head>
<body>
<div xmlns:ng="http://angularjs.org">
Hello {{'world'}}!
</div>
</body>
</html>
</pre></div><p>In this case it's the <code>#autobind</code> URL fragment that tells angular to auto-bootstrap.</p>
<p>Similarly to <code>ng:autobind</code>, you can specify an element id that should be exclusively targeted for
compilation as the value of the <code>#autobind</code>, e.g. <code>#autobind=angularContent</code>.</p>
<h4>Filename Restrictions for Auto-bootstrap</h4>
<p>In order for us to find the auto-bootstrap script attribute or URL fragment, the value of the
<code>script</code> <code>src</code> attribute that loads angular script must match one of these naming
conventions:</p>
<ul>
<li><code>angular.js</code></li>
<li><code>angular-min.js</code></li>
<li><code>angular-x.x.x.js</code></li>
<li><code>angular-x.x.x.min.js</code></li>
<li><code>angular-x.x.x-xxxxxxxx.js</code> (dev snapshot)</li>
<li><code>angular-x.x.x-xxxxxxxx.min.js</code> (dev snapshot)</li>
<li><code>angular-bootstrap.js</code> (used for development of angular)</li>
</ul>
<p>Optionally, any of the filename format above can be prepended with relative or absolute URL that
ends with <code>/</code>.</p>
<h4>Manual Bootstrap</h4>
<p>Using auto-bootstrap is a handy way to start using <tt><angular/></tt>, but advanced users who want more
control over the initialization process might prefer to use manual bootstrap instead.</p>
<p>The best way to get started with manual bootstraping is to look at the magic behind <code>ng:autobind</code>
by writing out each step of the autobind process explicitly. Note that the following code is
equivalent to the code in the previous section.</p><div ng:non-bindable><pre class="brush: js; html-script: true;">
<!doctype html>
<html xmlns:ng="http://angularjs.org">
<head>
<script type="text/javascript" src="http://code.angularjs.org/angular-0.9.3.min.js"
ng:autobind></script>
<script type="text/javascript">
(angular.element(document).ready(function() {
angular.compile(document)();
})(document);
</script>
</head>
<body>
Hello {{'World'}}!
</body>
</html>
</pre></div><p>This is the sequence that your code should follow if you're bootstrapping angular on your own:</p>
<ul>
<li>After the page is loaded, find the root of the HTML template, which is typically the root of
the document.</li>
<li>Run the HTML compiler, which converts the templates into an executable, bi-directionally bound
application.</li>
</ul>
<h4>XML Namespace</h4>
<p><em>IMPORTANT:</em> When using <tt><angular/></tt> you must declare the ng namespace using the xmlns tag. If you
don't declare the namespace, Internet Explorer does not render widgets properly.</p><div ng:non-bindable><pre class="brush: js; html-script: true;">
<html xmlns:ng="http://angularjs.org">
</pre></div><h4>Create your own namespace</h4>
<p>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 <code>my</code> to your domain
and create a widget called my:widget. To create your own namespace, simply add another xmlsn tag
to your page, create an alias, and set it to your unique domain:</p><div ng:non-bindable><pre class="brush: js; html-script: true;">
<html xmlns:ng="http://angularjs.org" xmlns:my="http://mydomain.com">
</pre></div><h4>Global Object</h4>
<p>The <tt><angular/></tt> script creates a single global variable <code>angular</code> in the global namespace. All
APIs are bound to fields of this global object.</p></div>
<h2>Usage</h2>
<div class="usage"><pre class="brush: js; html-script: true;"><script ng:autobind>
...
</script></pre>
</div>
</div>