forked from angular/code.angularjs.org
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdev_guide.overview.html
211 lines (176 loc) · 11.8 KB
/
dev_guide.overview.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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
<h1>Developer Guide: Overview</h1>
<div class="developer-guide-overview"><h2>What Is Angular?</h2>
<p>The short answer: angular is a new, powerful, client-side technology that makes it much easier for
you to create dynamic web sites and complex web apps, all without leaving the comfort of your HTML
/ JavaScript home.</p>
<p>The long answer: it depends on where you're coming from...</p>
<ul>
<li><p>If you're a web designer, you might perceive angular to be a sweet <a href="#!/guide/dev_guide.templates">templating</a> system, that doesn't get in your way and provides you with lots of nice built-ins that
make it easier to do what you want to do.</p></li>
<li><p>If you're a web developer, you might be thrilled that angular functions as an excellent web
framework, one that assists you all the way through the development cycle.</p></li>
<li><p>If you want to go deeper, you can immerse yourself in angular's extensible HTML <a href="#!/guide/dev_guide.compiler">compiler</a> that runs in your browser. The angular compiler teaches your browser
new tricks.</p></li>
</ul>
<p>Angular is not just a templating system, but you can create fantastic templates with it. Angular is
not just a web framework, but it features a very nice framework. Angular is not just an extensible
HTML compiler, but the compiler is at the core of Angular. Angular includes all of these
components, along with others. Angular is far greater than the sum of its parts. It is a new,
better way to develop web applications!</p>
<h3>An Introductory Angular Example</h3>
<p>Let's say that you are a web designer, and you've spent many thous — erm, hundreds of hours
designing web sites. But at this point, the thought of manipulating the DOM, writing listeners and
input validators, all just to implement a simple form? No. You either don't want to go there in
the first place or you've been there and the thrill is gone.</p>
<p>So look over the following simple example written using angular. Note that it features only the
templating aspect of angular, but this should suffice for now to quickly demonstrate how much
easier a web developer's life can if they're using angular:</p><doc:example>
<pre class="doc-source">
<b>Invoice:</b>
<br />
<br />
<table>
<tr><td> </td><td> </td>
<tr><td>Quantity</td><td>Cost</td></tr>
<tr>
<td><input name="qty" value="1" ng:validate="integer:0" ng:required /></td>
<td><input name="cost" value="19.95" ng:validate="number" ng:required /></td>
</tr>
</table>
<hr />
<b>Total:</b> {{qty * cost | currency}}
</pre>
<!--
<pre class="doc-scenario">
it('should show of angular binding', function(){
expect(binding('qty * cost')).toEqual('$19.95');
input('qty').enter('2');
input('cost').enter('5.00');
expect(binding('qty * cost')).toEqual('$10.00');
});
</pre>
-->
</doc:example><p>Try out the Live Preview above, and then let's walk through the example and describe what's going
on.</p>
<p>In the <code><html></code> tag, we add an attribute to let the browser know about the angular namespace:</p>
<pre><code> <html xmlns:ng="http://angularjs.org">
</code></pre>
<p>This ensures angular runs nicely in all major browsers.</p>
<p>In the <code><script></code> tag we do two angular setup tasks:</p>
<ol>
<li>We load <code>angular.js</code>.</li>
<li><p>The angular <a href="#!/api/angular.directive.ng:autobind"><code>ng:autobind</code></a> directive tells angular to
<a href="#!/guide/dev_guide.compiler">compile</a> and manage the whole HTML document.</p>
<p><code><script src="http://code.angularjs.org/0.9.15/angular-0.9.15.min.js"
ng:autobind></script></code></p></li>
</ol>
<p>From the <code>name</code> attribute of the <code><input></code> tags, angular automatically sets up two-way data
binding, and we also demonstrate some easy input validation:</p>
<pre><code> Quantity: <input name="qty" value="1" ng:validate="integer:0" ng:required/>
Cost: <input name="cost" value="199.95" ng:validate="number" ng:required/>
</code></pre>
<p>These input widgets look normal enough, but consider these points:</p>
<ul>
<li>When this page loaded, angular bound the names of the input widgets (<code>qty</code> and <code>cost</code>) to
variables of the same name. Think of those variables as the "Model" component of the
Model-View-Controller design pattern.</li>
<li>Note the angular directives, <a href="#!/api/angular.widget.@ng:validate"><code>ng:validate</code></a> and <a href="#!/api/angular.widget.@ng:required"><code>ng:required</code></a>. You may have noticed that when you enter invalid data
or leave the the input fields blank, the borders turn red color, and the display value disappears.
These <code>ng:</code> directives make it easier to implement field validators than coding them in JavaScript,
no? Yes.</li>
</ul>
<p>And finally, the mysterious <code>{{ double curly braces }}</code>:</p>
<pre><code> Total: {{qty * cost | currency}}
</code></pre>
<p>This notation, <code>{{ _expression_ }}</code>, is a bit of built-in angular <a href="#!/guide/dev_guide.compiler.markup">markup</a>, a shortcut for displaying data to the user. The expression within curly braces gets
transformed by the angular compiler into an angular directive (<a href="#!/api/angular.directive.ng:bind"><code>ng:bind</code></a>). The expression itself can be a combination of both an expression and a <a href="#!/guide/dev_guide.templates.filters">filter</a>: <code>{{ expression | filter }}</code>. Angular provides filters for
formatting display data.</p>
<p>In the example above, the expression in double-curly braces directs angular to, "Bind the data we
got from the input widgets to the display, multiply them together, and format the resulting number
into output that looks like money."</p>
<h2>The Angular Philosophy</h2>
<p>Angular is built around the belief that declarative code is better than imperative when it comes to
building UIs and wiring software components together, while imperative code is excellent for
expressing business logic.</p>
<p>Not to put too fine a point on it, but if you wanted to add a new label to your application, you
could do so by simply adding text to the HTML template, saving the code, and refreshing your
browser:</p><div ng:non-bindable><pre class="brush: js; html-script: true;">
<span class="label">Hello</span>
</pre></div><p>Or, as in programmatic systems (like <a href="http://code.google.com/webtoolkit/">GWT</a>), you would
have to write the code and then run the code like this:</p><div ng:non-bindable><pre class="brush: js;">
var label = new Label();
label.setText('Hello');
label.setClass('label');
parent.addChild(label);
</pre></div><p>That's one line of markup versus four times as much code.</p>
<h3>More Angular Philosophy</h3>
<ul>
<li>It is a very good idea to decouple DOM manipulation from app logic. This dramatically improves
the testability of the code.</li>
<li>It is a really, <em>really</em> good idea to regard app testing as equal in importance to app writing.
Testing difficulty is dramatically affected by the way the code is structured.</li>
<li>It is an excellent idea to decouple the client side of an app from the server side. This allows
development work to progress in parallel, and allows for reuse of both sides.</li>
<li>It is very helpful indeed if the framework guides developers through the entire journey of
building an app: from designing the UI, through writing the business logic, to testing.</li>
<li>It is always good to make common tasks trivial and difficult tasks possible.</li>
</ul>
<p>Now that we're homing in on what angular is, perhaps now would be a good time to list a few things
that angular is not:</p>
<ul>
<li>It's not a Library. You don't just call its functions, although it does provide you with some
utility APIs.</li>
<li>It's not a DOM Manipulation Library. Angular uses jQuery to manipulate the DOM behind the scenes,
rather than give you functions to manipulate the DOM yourself.</li>
<li>It's not a Widget Library. There are lots of existing widget libraries that you can integrate
with angular.</li>
<li>It's not "Just Another Templating System". A part of angular is a templating system. The
templating subsystem of angular is different from the traditional approach for these reasons:
<ul><li>It Uses HTML/CSS syntax: This makes it easy to read and can be edited with existing HTML/CSS
authoring tools.</li>
<li>It Extends HTML vocabulary: Angular allows you to create new HTML tags, which expand into
dynamic UI components.</li>
<li>It Executes in the browser: Removes the round trip to the server for many operations and
creates instant feedback for users as well as developers.</li>
<li>It Has Bidirectional data binding: The model is the single source of truth. Programmatic
changes to the model are automatically reflected in the view. Any changes by the user to the view
are automatically reflected in the model.</li></ul></li>
</ul>
<h2>Why You Want Angular</h2>
<p>Angular frees you from the following pain:</p>
<ul>
<li><strong>Registering callbacks:</strong> Registering callbacks clutters your code, making it hard to see the
forest for the trees. Removing common boilerplate code such as callbacks is a good thing. It vastly
reduces the amount of JavaScript coding <em>you</em> have to do, and it makes it easier to see what your
application does.</li>
<li><strong>Manipulating HTML DOM programatically:</strong> Manipulating HTML DOM is a cornerstone of AJAX
applications, but it's cumbersome and error-prone. By declaratively describing how the UI should
change as your application state changes, you are freed from low level DOM manipulation tasks. Most
applications written with angular never have to programatically manipulate the DOM, although you
can if you want to.</li>
<li><strong>Marshaling data to and from the UI:</strong> CRUD operations make up the majority of AJAX
applications. The flow of marshaling data from the server to an internal object to an HTML form,
allowing users to modify the form, validating the form, displaying validation errors, returning to
an internal model, and then back to the server, creates a lot of boilerplate code. Angular
eliminates almost all of this boilerplate, leaving code that describes the overall flow of the
application rather than all of the implementation details.</li>
<li><strong>Writing tons of initialization code just to get started:</strong> Typically you need to write a lot of
plumbing just to get a basic "Hello World" AJAX app working. With angular you can bootstrap your
app easily using services, which are auto-injected into your application in a <a href="http://code.google.com/p/google-guice/">Guice</a>-like dependency-injection style. This allows you to
get started developing features quickly. As a bonus, you get full control over the initialization
process in automated tests.</li>
</ul>
<h2>Watch a Presentation About Angular</h2>
<p>Here is an early presentation on angular, but note that substantial development has occurred since
the talk was given in July of 2010.</p>
<p><object width="480" height="385">
<param name="movie" value="http://www.youtube.com/v/elvcgVSynRg&hl=en_US&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/elvcgVSynRg&hl=en_US&fs=1"
type="application/x-shockwave-flash" allowscriptaccess="always"
allowfullscreen="true" width="480" height="385"></embed>
</object></p>
<p><a href="https://docs.google.com/present/edit?id=0Abz6S2TvsDWSZDQ0OWdjaF8yNTRnODczazdmZg&hl=en&authkey=CO-b7oID">Presentation</a>
|
<a href="https://docs.google.com/document/edit?id=1ZHVhqC0apbzPRQcgnb1Ye-bAUbNJ-IlFMyPBPCZ2cYU&hl=en&authkey=CInnwLYO">Source</a></p></div>