forked from angular/angularjs.org
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
326 lines (307 loc) · 14.5 KB
/
index.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
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
<!doctype html>
<html xmlns:ng="http://angularjs.org" lang="en" dir="ltr">
<head>
<title><angular/></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="css/angular.css" type="text/css">
<link rel="stylesheet" href="http://code.angularjs.org/0.9.12/docs-0.9.12/doc_widgets.css" type="text/css" />
<link rel="stylesheet" href="http://code.angularjs.org/0.9.12/docs-0.9.12/syntaxhighlighter/shCore.css" type="text/css"/>
<link rel="stylesheet" href="http://code.angularjs.org/0.9.12/docs-0.9.12/syntaxhighlighter/shThemeDefault.css" type="text/css"/>
<script src="LAB.min.js"></script>
<script>
(function(ver){
$LAB
.script('http://code.angularjs.org/'+ver+'/docs-'+ver+'/syntaxhighlighter/shCore.js')
.wait()
.script('http://code.angularjs.org/'+ver+'/docs-'+ver+'/syntaxhighlighter/shBrushJScript.js')
.script('http://code.angularjs.org/'+ver+'/docs-'+ver+'/syntaxhighlighter/shBrushXml.js')
.script('http://code.angularjs.org/'+ver+'/docs-'+ver+'/jquery.min.js')
.wait()
.script('http://code.angularjs.org/angular-'+ver+'.js')
.wait()
.script('http://code.angularjs.org/'+ver+'/docs-'+ver+'/doc_widgets.js')
.wait(function(){
// compile code
angular.compile(window.document)();
})
.script('http://widgets.twimg.com/j/2/widget.js')
.wait(function(){
// load widgets
$(function() {
new TWTR.Widget({
id: 'twitter_news',
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 'auto',
height: 300,
theme: {
shell: {
background: '#333333',
color: '#ffffff'
},
tweets: {
background: '#000000',
color: '#ffffff',
links: '#a6ccf5'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('angularjs').start();
new TWTR.Widget({
id: 'twitter_chatter',
version: 2,
type: 'search',
search: 'angularjs',
interval: 6000,
title: '',
subject: '<angular/> chatter',
width: 'auto',
height: 500,
theme: {
shell: {
background: '#333333',
color: '#ffffff'
},
tweets: {
background: '#000000',
color: '#ffffff',
links: '#a6ccf5'
}
},
features: {
scrollbar: false,
loop: false,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
toptweets: true,
behavior: 'all'
}
}).render().start();
});
})
.script((("https:" == document.location.protocol) ? "https://ssl." : "http://www.") + 'google-analytics.com/ga.js')
.wait(function(){
try{
var pageTracker = _gat._getTracker('UA-8594346-3');
pageTracker._trackPageview();
} catch(err) {}
});
})('0.9.12');
</script>
</head>
<body id="page_bg" ng:init="$service('$window').SyntaxHighlighter.highlight();">
<div id="wrapper-shadow">
<div id="wrapper">
<div id="beta"></div>
<div id="header">
<ul class="menu">
<li><a href="http://docs.angularjs.org/#!started">Getting Started</a></li>
<li><a href="http://docs.angularjs.org/#!guide">Developer Guide</a></li>
<li><a href="http://docs.angularjs.org/">Reference</a></li>
<li><a href="http://docs.angularjs.org/#!cookbook">Cookbook</a></li>
<li><a href="http://docs.angularjs.org/#!faq">FAQ</a></li>
<li><a href="https://groups.google.com/forum/?fromgroups#!forum/angular">Mailing List</a></li>
<li><a href="http://github.com/angular/angular.js">GitHub</a></li>
<li><a href="http://docs.angularjs.org/#!guide.contribute">Contribute</a></li>
</ul>
</div>
<div id="heading">
<div class="breadcrumb">
<span class="icon icon-documentation"> </span>
<span class="fragment">
<code id="logo"><angular/></code>: Complex web apps made simple
</span>
</div>
</div>
<div id="main">
<div class="content">
<div class="left">
<div>
<div id="angularRoot">
<h2>What is angular?</h2>
<p>Angular is what HTML would have been if it had been designed for building web
applications. It provides your application’s plumbing so you can focus on what
your app does, rather than how to get your web browser to do what you need.
</p>
<p>
Angular is an extensible client-side HTML compiler and a JavaScript web
framework for building interactive client-side web applications with very
declarative, reusable and testable code that plays to strengths of both HTML
and JavaScript.
</p>
<h2>Live Example</h2>
<p>Below is an angular mini demo of simple password generator example which shows
of MVC, dependency injection of services (XHR), and data-binding.</p>
<doc:example>
<pre class="doc-source">
<div ng:controller="PasswordController">
Password:
<input type="password" name="password" placeholder="enter password"/>
<input type="checkbox" name="showPwd">
<span ng:show="showPwd">{{password}}</span>
<br/>
Password strength:
<span ng:class="strength">{{strength}}</span>
<button ng:click="generate()">Generate</button>
</div>
<script>
var SERVICE_URL = 'http://angularjs.org/generatePassword.php?callback=JSON_CALLBACK';
// Dependency Inject $xhr service
function PasswordController($xhr){
// reset the state of the model to defaults
this.password = '';
this.strength = null;
this.showPwd = true;
// watch the password field and grade it.
this.$watch('password', function(){
if (this.password.length > 8) {
this.strength = 'strong';
} else if (this.password.length > 3) {
this.strength = 'medium';
} else {
this.strength = 'weak';
}
});
// behavior
this.generate = function(){
var self = this;
$xhr('JSON', SERVICE_URL, function(code, response){
self.password = response.password;
});
}
}
</script>
<style>
.strong { background-color: lightgreen;}
.medium { background-color: yellow;}
.weak { background-color: red; color: white;}
</style>
</pre>
</doc:example>
<p>You can fiddle with the source code at
<a href="http://jsfiddle.net/mhevery/7nzZv/2/">jsfiddle</a>.</p>
<h2>Complexity kills. Use angular. Here’s why:</h2>
<ul>
<li><b>Write less code. A lot less.</b>
Forget about writing all that extra JavaScript to handle event listeners,
DOM updates, formatters, and input validators. Angular comes with <a
href="http://docs.angularjs.org/#!guide.bootstrap">autobinding</a>, built-in
<a href="http://docs.angularjs.org/#!angular.validator">validators</a> and
<a href="http://docs.angularjs.org/#!angular.formatter">formatters</a> which
take care of these. And you can extend or replace these services at will.
With these and other services, you’ll write about 10x less code than writing
your app without angular.
</li>
<li><b>Automatic view/model synchronization.</b>
Tired of writing code to keep your view and model in sync? Thanks to
angular’s 2-way <a href="http://docs.angularjs.org/#!guide.data-binding">
data binding</a>, your model is always the single source of truth for your
application state and your view is simply a projection of your model. You
are only responsible for your business logic in a controller and the
associated HTML template.
</li>
<li><b>No setup.</b>
Nothing to download. No server required. No compilers to configure. No
environment variables to set. Angular’s UI templates run on the client so
you never have to wait on the server to see your changes in the application.
</li>
<li><b>Readable code that is easy to maintain.</b>
Angular apps are specified declaratively through custom HTML tags and
attributes that specify the intent of your application. By defining UI <a
href="http://docs.angularjs.org/#!guide.template"
title="Template">templates</a> and widgets in HTML, you can read angular
code and understand what it’s supposed to do. Plus, less code means less to
read, maintain and test.
</li>
<li><b>Testable code.</b>
Angular comes with a set of <a
href="http://docs.angularjs.org/#!angular.service">services</a> that are
useful for building web apps. The services are dependency injected, which
makes it easy to swap services or create mocks for testing. Some services
are: history management, URL router, XHR requests, and data caching out of
the box.
</li>
<li><b>Build reusable components with trivial effort.</b>
Angular lets you write UI <a
href="http://docs.angularjs.org/#!guide.template">templates</a> and <a
href="http://docs.angularjs.org/#!guide.widget">widgets</a> that you can
reuse throughout your app.
</li>
<li><b>Plays well with others.</b>
You can easily use angular with the frameworks and libraries that you are
already using. Mix and match functionality freely.
</li>
</ul>
<h2>Sounds awesome. But what parts do I need to write?</h2>
<ul>
<li><b>HTML and CSS:</b>
Standard HTML plus custom tags and attributes, which bring dynamic nature to
HTML.
</li>
<li><b>Controllers:</b>
Angular apps follow the model-view-controller pattern. You’re responsible
for the logic that's custom to your application which is encapsulated in
one or more controllers. These are implemented in JavaScript.
</li>
<li>(optional) <b>Server-side data service.</b>
Write this in your technology of choice.
</li>
</ul>
<h2>How do I get started with angular?</h2>
<ul>
<li>
Work through the
<a href="http://docs.angularjs.org/#!started">Getting Started</a> examples.
</li>
<li>
Check out more examples in <a href="http://docs.angularjs.org/#!cookbook">Cookbook</a>.
</li>
<li>
Read the <a href="http://docs.angularjs.org/#!guide">Developer Guide</a>.
</li>
<li>
Check out what's new in the
<a href="http://github.com/angular/angular.js/blob/master/CHANGELOG.md">
latest release.
</a>.
</li>
<li>
<a href="http://code.angularjs.org/">Download the latest bits</a> or quickly
start a project with <a href="https://github.com/angular/angular-seed">angular
seed repository</a>.
</li>
<li>
<a href="http://docs.angularjs.org/#!guide.contribute" title="Contribute">
Contribute to angular
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="right">
<div id="twitter_news" class="twitter"></div>
<div id="twitter_chatter" class="twitter"></div>
</div>
</div>
</div>
<div id="footer">
<span>Copyright 2010-2011 - angular / BRAT Tech. LLC</span>
</div>
</div>
</div>
</body>
</html>