-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
499 lines (447 loc) · 77.7 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
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
<!DOCTYPE html>
<html>
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-38441871-6"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
</script>
<meta charset="utf-8">
<title>Home | Aurelia</title>
<base href="/">
<meta name="msapplication-tap-highlight" content="no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
<meta name="description" content="Aurelia is a JavaScript client framework for web, mobile and desktop that leverages simple conventions to empower your creativity."/>
<meta name="robots" content="index,follow"/>
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro|Source+Sans+Pro:200,400,700" rel="stylesheet">
<link rel="stylesheet" href="styles/aurelia-docs.css">
<link rel="alternate" type="application/rss+xml" title="The official Aurelia blog" href="/blog/rss/index.xml" />
</head>
<body aurelia-app="main" id="app-host">
<header class="app-header">
<img src="styles/images/logo.svg" class="logo">
<a class="header-button" title="Get the Newsletter" href="http://eepurl.com/ces50j">Get the Newsletter</a>
<search-trigger></search-trigger>
</header>
<main ref="main">
<div screen-activator.bind="activeScreen" screen-activated.trigger="onScreenActivated()" class="screen-activator">
<section class="home-screen">
<div class="hero">
<div class="left">
<img class="logo-icon" src="styles/images/aurelia-icon.svg">
</div>
<div class="right">
<h2 class="aurelia">Aurelia</h2>
<h1>
Simple.<br>Powerful.<br>Unobtrusive.
</h1>
<p>
<a class="start" href="/docs/tutorials/creating-a-todo-app">GET STARTED</a>
<a class="github" href="https://github.com/aurelia/framework" target="_blank" style="background: #1e1e1e; color: white">
<svg aria-labelledby="simpleicons-github-dark-icon" lang="" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-github-icon" lang="en">GitHub Dark icon</title><path fill="white" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg>
GITHUB</a>
</p>
</div>
</div>
<section class="feature-zone">
<div class="feature-header">
<h1>Why Aurelia?</h1>
<h2>Join thousands creating next-generation apps.</h2>
</div>
<div class="features">
<div class="feature">
<div class="feature-icon">
</div>
<div class="feature-detail">
<h3 class="feature-name">Easy to Learn</h3>
<p class="feature-description">
Aurelia's standards-based, unobtrusive style makes it the only
framework that empowers you to build components using vanilla JavaScript or TypeScript. If you know modern JS and HTML,
there's little more to learn to build even the most complex apps.
</p>
</div>
</div>
<div class="feature">
<div class="feature-icon">
</div>
<div class="feature-detail">
<h2 class="feature-name">High Performance</h2>
<p class="feature-description">
At the core of Aurelia is a high-performance, reactive system,
capable of batching DOM updates in a way that leaves other
frameworks, and their virtual DOMs, in the dust. Experience consistent, scalable performance, no matter how complex your UI.</p>
</div>
</div>
<div class="feature">
<div class="feature-icon">
</div>
<div class="feature-detail">
<h2 class="feature-name">Extensive Ecosystem</h2>
<p class="feature-description">
State management, internationalization and validation - all official plugins from the core team. CLI, VS Code plugin, and Chrome debugger - optional tools to enhance development. Aurelia is not just a framework, but a powerful platform and ecosystem, designed to ensure your rapid success.
</p>
</div>
</div>
<div class="feature">
<div class="feature-icon">
</div>
<div class="feature-detail">
<h2 class="feature-name">Reactive Binding</h2>
<p class="feature-description">
Aurelia enables powerful reactive binding to any object. By using adaptive techniques Aurelia selects the most efficient way to observe each property in your model and automatically syncs your UI and your state with best-in-class performance.</p>
</div>
</div>
<div class="feature">
<div class="feature-icon">
</div>
<div class="feature-detail">
<h2 class="feature-name">Simple Testing</h2>
<p class="feature-description">
By combining modern JS modules with an unobtrusive
approach, Aurelia makes unit testing as simple as testing
vanilla JS. Need to write integration tests? A powerful Dependency Injection Container and testing library make it quick and easy. You benefit from highly maintainable and longer-lived apps.</p>
</div>
</div>
<div class="feature">
<div class="feature-icon">
</div>
<div class="feature-detail">
<h2 class="feature-name">Unmatched Extensibility</h2>
<p class="feature-description">
Nothing in the industry can match Aurelia's extensibility. You can create custom elements, add custom attributes to existing elements, control template generation, customize template syntax, create new reactive binding types, extend the DI, and just about anything else you can think of.</p>
</div>
</div>
<div class="feature">
<div class="feature-icon">
</div>
<div class="feature-detail">
<h2 class="feature-name">Effortless Coding with Conventions</h2>
<p class="feature-description">
Conventions let you focus on your code and your business logic. Aurelia stands out as the only framework today that situates your code at the center of your app, rather than the framework. Don't like the conventions? Plug in your own or drop them altogether. You are in control.</p>
</div>
</div>
<div class="feature">
<div class="feature-icon">
</div>
<div class="feature-detail">
<h2 class="feature-name">Routing, Composition & Progressive Enhancement</h2>
<p class="feature-description">
Leverage Aurelia's advanced client-side router with its pluggable pipeline and child routers. Don't need a router but need dynamic, data-driven UI composition? We do that too. Have a legacy app? Aurelia's progressive enhancement and script-tag build make it easy to incrementally adopt too.</p>
</div>
</div>
</div>
</section>
<section class="feature-zone article-group-root sandbox-zone">
<div class="feature-header">
<h1>See It in Action</h1>
<h2>The simplicity, power, and unobtrusiveness of Aurelia on display.</h2>
</div>
<div class="groups">
<div class="group">
<div class="group-summary">
<div class="group-header">
<h2 class="group-name">A Simple Component</h2>
</div>
<p class="group-description">
Building a component with Aurelia is as simple as creating a
vanilla JavaScript or TypeScript class with normal properties and methods.
</p>
</div>
<div class="group-details">
<au-sandbox src="https://codesandbox.io/embed/849oxmjm82?autoresize=1&hidenavigation=1&module=/src/app.js,/src/app.html&editorsize=60&codemirror=1"></au-sandbox>
</div>
</div>
<div class="group">
<div class="group-summary">
<div class="group-header">
<h2 class="group-name">Reactive Binding</h2>
</div>
<p class="group-description">
Aurelia's reactive binding system knows exactly what changes and when it changes. It uses this knowledge to update your UI in the most efficient way possible.
</p>
</div>
<div class="group-details">
<au-sandbox src="https://codesandbox.io/embed/24mo8975oj?autoresize=1&hidenavigation=1&module=/src/app.js,/src/app.html&editorsize=60&codemirror=1"></au-sandbox>
</div>
</div>
<div class="group">
<div class="group-summary">
<div class="group-header">
<h2 class="group-name">An Application</h2>
</div>
<p class="group-description">
By using simple classes with properties and methods, we can assemble a full application. This Todo example uses a vanilla JS array to track a list of todos. It also tracks the text you enter to create new todos. Despite the fact that this is a simple app, the basic vanilla JS patterns shown here can scale to apps containing hundreds of thousands of lines of code.
</p>
<a class="group-learn" href="docs/tutorials/creating-a-todo-app">Read the Todo App Tutorial ￫</a>
</div>
<div class="group-details">
<au-sandbox src="https://codesandbox.io/embed/ppmy26opw7?autoresize=1&hidenavigation=1&module=/src/app.js,/src/app.html&editorsize=60&codemirror=1"></au-sandbox>
</div>
</div>
</div>
</section>
<section class="feature-zone">
<div class="feature-header">
<h1>Open Collective</h1>
<h2>Proud financial backers of Aurelia.</h2>
</div>
<div class="feature-header" style="border-bottom: none; margin-bottom: 0;; margin-top: 48px">
<h2>Gold Sponsors</h2>
</div>
<div class="features" style="justify-content: center;">
<a href="https://www.hogia.com/" title="Hogia" style="margin: 12px">
<img src="./styles/images/logos/hogia.svg" style="height: 128px">
</a>
</div>
<div class="feature-header" style="border-bottom: none; margin-bottom: 0; margin-top: 48px">
<h2>Silver Sponsors</h2>
</div>
<div class="features" style="justify-content: center;">
<a href="https://www.movavi.com/screen-recorder" title="Movavi - Screen Recorder" style="margin: 12px">
<img src="./styles/images/logos/movavi-screen-recorder.svg" style="height: 128px">
</a>
</div>
<!-- <div class="features" style="justify-content: center;">
<a href="https://www.haselt.com/" title="Haselt" style="margin: 12px">
<img src="./styles/images/logos/haselt.png" style="height: 128px">
</a>
</div>
<div class="features" style="justify-content: center;">
<a href="https://www.smbsol.com/" title="Symbiosys" style="margin: 12px">
<img src="./styles/images/logos/symbiosys.jpeg" style="height: 128px">
</a>
</div> -->
<div class="feature-header" style="border-bottom: none; margin-bottom: 0; margin-top: 48px">
<h2>Bronze Sponsors</h2>
</div>
<div class="features" style="justify-content: center;">
<iframe frameborder="0" style="margin: 0; padding: 0; border: none; width: 1024px;
height: 256px;" src="https://opencollective.com/aurelia/tiers/bronze.svg?avatarHeight=64&button=false&width=1024"></iframe>
</div>
<div class="feature-header" style="border-bottom: none; margin-bottom: 0; margin-top: 48px">
<h2>Wood Sponsors</h2>
</div>
<div class="features" style="justify-content: center;">
<img src="https://opencollective.com/aurelia/tiers/wood.svg?avatarHeight=32&button=false&width=512" />
</div>
<div class="features" style="justify-content: center;">
<a class="become-a-sponsor" href="https://opencollective.com/aurelia">Become a Sponsor!</a>
</div>
</section>
</section>
</div>
<footer class="content-footer" id="app-footer">
<div class="links">
<div class="link-column">
<h4>Resources</h4>
<ul>
<li><a href="docs/overview/what-is-aurelia">About</a></li>
<li><a href="blog">Blog</a></li>
<li><a href="http://eepurl.com/ces50j">Newsletter</a></li>
</ul>
</div>
<div class="link-column">
<h4>Help</h4>
<ul>
<li><a href="https://discourse.aurelia.io/">Discourse</a></li>
<li><a href="https://discord.gg/RBtyM6u">Discord</a></li>
<li><a href="https://stackoverflow.com/search?q=aurelia">Stack Overflow</a></li>
</ul>
</div>
<div class="link-column">
<h4>Community</h4>
<ul>
<li><a href="https://github.com/aurelia">GitHub</a></li>
<li><a href="https://twitter.com/aureliaeffect">Twitter</a></li>
<li><a href="https://github.com/orgs/aurelia/people">Team</a></li>
</ul>
</div>
</div>
<p class="copyright">
Copyright © 2010 - 2020 <a href="http://www.bluespire.com">Blue Spire Inc.</a> Code licensed under the MIT License. Content licensed under CC0.
</p>
</footer>
</main>
<side-bar></side-bar>
<nav>
<ul>
<li class="home ${activeTab === 'home' ? 'active' : ''}">
<a href="home">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px"
height="32px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g id="Outline_Icons">
<g>
<path d="M20.5,13.5c-0.276,0-0.5,0.224-0.5,0.5v9h-5v-6.5c0-0.276-0.224-0.5-0.5-0.5h-5C9.224,16,9,16.224,9,16.5V23H4v-9.5
C4,13.224,3.776,13,3.5,13S3,13.224,3,13.5v10C3,23.777,3.224,24,3.5,24h6c0.276,0,0.5-0.224,0.5-0.5V17h4v6.5
c0,0.276,0.224,0.5,0.5,0.5h6c0.276,0,0.5-0.224,0.5-0.5V14C21,13.724,20.776,13.5,20.5,13.5z"/>
<path d="M23.854,12.647l-11.5-11.5c-0.195-0.195-0.512-0.195-0.707,0l-11.5,11.5c-0.195,0.195-0.195,0.512,0,0.707
s0.512,0.195,0.707,0L12,2.208l11.146,11.146c0.098,0.098,0.226,0.146,0.354,0.146s0.256-0.049,0.354-0.146
C24.049,13.159,24.049,12.842,23.854,12.647z"/>
<path d="M16,3h3v3c0,0.276,0.224,0.5,0.5,0.5S20,6.277,20,6V2.5C20,2.224,19.776,2,19.5,2H16c-0.276,0-0.5,0.224-0.5,0.5
S15.724,3,16,3z"/>
</g>
</g>
<g id="invisible_shape">
<rect fill="none" width="24" height="24"/>
</g>
</svg>
<div class="label">Home</div>
</a>
</li>
<li class="article ${activeTab === 'article' ? 'active' : ''}">
<a href="docs">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g id="Outline_Icons_1_">
<g>
<path d="M23.5,1H12V0.5C12,0.224,11.776,0,11.5,0h-8C3.224,0,3,0.224,3,0.5V1H0.5C0.224,1,0,1.224,0,1.5v22
C0,23.776,0.224,24,0.5,24h23c0.276,0,0.5-0.224,0.5-0.5v-22C24,1.224,23.776,1,23.5,1z M4,1h7v11.293L7.854,9.146
c-0.195-0.195-0.512-0.195-0.707,0L4,12.293V1z M23,23H1V2h2v11.5c0,0.446,0.542,0.668,0.854,0.354L7.5,10.207l3.646,3.646
C11.459,14.166,12,13.948,12,13.5V2h11V23z"/>
<path d="M14.5,8h6C20.776,8,21,7.776,21,7.5S20.776,7,20.5,7h-6C14.224,7,14,7.224,14,7.5S14.224,8,14.5,8z"/>
<path d="M14.5,11h6c0.276,0,0.5-0.224,0.5-0.5S20.776,10,20.5,10h-6c-0.276,0-0.5,0.224-0.5,0.5S14.224,11,14.5,11z"/>
<path d="M20.5,13h-6c-0.276,0-0.5,0.224-0.5,0.5s0.224,0.5,0.5,0.5h6c0.276,0,0.5-0.224,0.5-0.5S20.776,13,20.5,13z"/>
<path d="M20.5,16h-17C3.224,16,3,16.224,3,16.5S3.224,17,3.5,17h17c0.276,0,0.5-0.224,0.5-0.5S20.776,16,20.5,16z"/>
<path d="M16.5,19h-13C3.224,19,3,19.224,3,19.5S3.224,20,3.5,20h13c0.276,0,0.5-0.224,0.5-0.5S16.776,19,16.5,19z"/>
</g>
</g>
<g id="Invisible_Shape">
<rect fill="none" width="24" height="24"/>
</g>
</svg>
<div class="label">Guides</div>
</a>
</li>
<li class="api ${activeTab === 'api' ? 'active' : ''}">
<a href="docs/api">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g id="Outline_Icons">
<path d="M21.945,15.283c-0.009-0.02-0.022-0.034-0.034-0.052c-0.031-0.048-0.068-0.089-0.114-0.123
c-0.011-0.008-0.015-0.021-0.026-0.029L17,12.011V7.5c0-0.082-0.024-0.156-0.059-0.224c-0.01-0.02-0.023-0.035-0.036-0.053
c-0.033-0.049-0.072-0.089-0.12-0.124c-0.012-0.007-0.017-0.022-0.028-0.029l-5-3c-0.158-0.095-0.355-0.095-0.514,0l-5,3
C6.231,7.078,6.227,7.093,6.215,7.1c-0.048,0.035-0.087,0.075-0.12,0.124C6.082,7.241,6.068,7.257,6.059,7.276
C6.024,7.344,6,7.418,6,7.5v4.511L1.229,15.08c-0.012,0.007-0.016,0.021-0.026,0.029c-0.046,0.034-0.083,0.075-0.114,0.123
c-0.012,0.018-0.025,0.032-0.034,0.052C1.022,15.349,1,15.421,1,15.5v4.784c0,0.17,0.087,0.329,0.229,0.421l5,3.216
c0.009,0.006,0.021,0.003,0.029,0.009C6.331,23.971,6.411,24,6.5,24s0.169-0.029,0.241-0.07c0.009-0.006,0.021-0.003,0.029-0.009
l4.729-3.042l4.729,3.042c0.009,0.006,0.021,0.003,0.029,0.009C16.331,23.971,16.411,24,16.5,24s0.169-0.029,0.241-0.07
c0.009-0.006,0.021-0.003,0.029-0.009l5-3.216C21.913,20.613,22,20.454,22,20.284V15.5C22,15.421,21.978,15.349,21.945,15.283z
M16.5,17.917l-4.053-2.432l4.053-2.606l4.053,2.606L16.5,17.917z M7,18.783l4-2.4v3.628l-4,2.573V18.783z M16,12.011l-4,2.573
v-3.801l4-2.4V12.011z M11,14.584l-4-2.573V8.383l4,2.4V14.584z M11.5,5.083L15.528,7.5L11.5,9.917L7.472,7.5L11.5,5.083z
M6.5,12.879l4.053,2.606L6.5,17.917l-4.053-2.432L6.5,12.879z M2,16.383l4,2.4v3.801l-4-2.573V16.383z M12,16.383l4,2.4v3.801
l-4-2.573V16.383z M17,22.584v-3.801l4-2.4v3.628L17,22.584z"/>
</g>
<g id="Invisible_Shape">
<rect fill="none" width="24" height="24"/>
</g>
</svg>
<div class="label">APIs</div>
</a>
</li>
<li class="discuss ${activeTab === 'discuss' ? 'active' : ''}">
<a href="https://discourse.aurelia.io">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g id="Outline_Icons_1_">
<g id="Outline_Icons">
<g>
<path d="M7.508,14.318c-0.465-0.063-0.923-0.163-1.362-0.297c-0.109-0.034-0.227-0.029-0.331,0.015l-3.669,1.467l1.289-2.255
c0.122-0.214,0.07-0.484-0.122-0.639C1.843,11.434,1,9.729,1,7.935C1,4.387,4.589,1.5,9,1.5s8,2.887,8,6.435
c0,0.276,0.224,0.5,0.5,0.5s0.5-0.224,0.5-0.5c0-4.1-4.038-7.435-9-7.435S0,3.835,0,7.935c0,1.962,0.855,3.827,2.36,5.178
l-1.794,3.14c-0.105,0.185-0.083,0.416,0.057,0.576C0.72,16.939,0.858,17,1,17c0.062,0,0.125-0.012,0.186-0.036l4.839-1.936
c0.438,0.124,0.891,0.219,1.348,0.28c0.274,0.048,0.526-0.154,0.563-0.428S7.781,14.355,7.508,14.318z"/>
<path d="M22.123,20.627C23.353,19.517,24,18.098,24,16.5c0-3.523-3.435-6.5-7.5-6.5S9,12.977,9,16.5
c0,2.125,1.152,4.144,3.083,5.397c2.073,1.349,4.649,1.582,6.93,0.642l3.812,1.429C22.882,23.989,22.941,24,23,24
c0.139,0,0.275-0.058,0.372-0.165c0.138-0.153,0.167-0.375,0.076-0.559L22.123,20.627z M19.176,21.532
C19.119,21.511,19.06,21.5,19,21.5c-0.069,0-0.139,0.015-0.203,0.043c-2.018,0.898-4.324,0.717-6.169-0.484
C10.982,19.99,10,18.285,10,16.5c0-2.981,2.977-5.5,6.5-5.5s6.5,2.519,6.5,5.5c0,1.433-0.61,2.647-1.812,3.609
c-0.184,0.147-0.24,0.403-0.135,0.614l0.931,1.861L19.176,21.532z"/>
</g>
</g>
<g id="New_icons_1_">
</g>
</g>
<g id="Invisible_Shape">
<rect fill="none" width="24" height="24"/>
</g>
</svg>
<div class="label">Discourse</div>
</a>
</li>
<li class="blog ${activeTab === 'blog' ? 'active' : ''}">
<a href="blog">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g id="Outline_Icons_1_">
<g id="Outline_Icons">
<g>
<path d="M14.5,3h-11C3.224,3,3,3.224,3,3.5S3.224,4,3.5,4h11C14.776,4,15,3.776,15,3.5S14.776,3,14.5,3z"/>
<path d="M3.5,13h5C8.776,13,9,12.776,9,12.5v-6C9,6.224,8.776,6,8.5,6h-5C3.224,6,3,6.224,3,6.5v6C3,12.776,3.224,13,3.5,13z
M4,7h4v5H4V7z"/>
<path d="M14.5,8h-3C11.224,8,11,8.224,11,8.5S11.224,9,11.5,9h3C14.776,9,15,8.776,15,8.5S14.776,8,14.5,8z"/>
<path d="M14.5,10h-4c-0.276,0-0.5,0.224-0.5,0.5s0.224,0.5,0.5,0.5h4c0.276,0,0.5-0.224,0.5-0.5S14.776,10,14.5,10z"/>
<path d="M14.5,12h-4c-0.276,0-0.5,0.224-0.5,0.5s0.224,0.5,0.5,0.5h4c0.276,0,0.5-0.224,0.5-0.5S14.776,12,14.5,12z"/>
<path d="M14.5,14h-11C3.224,14,3,14.224,3,14.5S3.224,15,3.5,15h11c0.276,0,0.5-0.224,0.5-0.5S14.776,14,14.5,14z"/>
<path d="M14.5,16h-11C3.224,16,3,16.224,3,16.5S3.224,17,3.5,17h11c0.276,0,0.5-0.224,0.5-0.5S14.776,16,14.5,16z"/>
<path d="M14.5,18h-11C3.224,18,3,18.224,3,18.5S3.224,19,3.5,19h11c0.276,0,0.5-0.224,0.5-0.5S14.776,18,14.5,18z"/>
<path d="M23.5,3H20V2c0-0.276-0.224-0.5-0.5-0.5H18v-1C18,0.224,17.776,0,17.5,0h-17C0.224,0,0,0.224,0,0.5v20
C0,22.43,1.57,24,3.5,24h17c1.93,0,3.5-1.57,3.5-3.5v-17C24,3.224,23.776,3,23.5,3z M20,6h1v14.5c0,0.276-0.225,0.5-0.5,0.5
S20,20.776,20,20.5V6z M3.5,23C2.121,23,1,21.878,1,20.5V1h16v1v2v16.5c0,0.979,0.403,1.865,1.053,2.5H3.5z M23,20.5
c0,1.378-1.121,2.5-2.5,2.5S18,21.878,18,20.5V4V2.5h1v18c0,0.827,0.673,1.5,1.5,1.5s1.5-0.673,1.5-1.5v-15
C22,5.224,21.776,5,21.5,5H20V4h3V20.5z"/>
</g>
</g>
<g id="New_icons_1_">
</g>
</g>
<g id="Invisible_Shape">
<rect fill="none" width="24" height="24"/>
</g>
</svg>
<div class="label">Blog</div>
</a>
</li>
<li class="help ${activeTab === 'support' ? 'active' : ''}">
<a href="support">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g id="Filled_Icons_1_">
<g id="Filled_Icons"></g>
<g id="New_icons">
<g>
<path d="M23.5,0h-15C8.224,0,8,0.224,8,0.5v10C8,10.776,8.224,11,8.5,11H11v3c0,0.445,0.54,0.667,0.854,0.354L15.207,11H23.5 c0.276,0,0.5-0.224,0.5-0.5v-10C24,0.224,23.776,0,23.5,0z M16.518,8.729c-0.273,0-0.494-0.222-0.494-0.494 c0-0.273,0.221-0.494,0.494-0.494c0.272,0,0.494,0.221,0.494,0.494C17.012,8.508,16.79,8.729,16.518,8.729z M17.018,5.9v0.6 c0,0.276-0.224,0.5-0.5,0.5c-0.276,0-0.5-0.224-0.5-0.5V5.464c0-0.276,0.224-0.5,0.5-0.5c0.542,0,0.982-0.441,0.982-0.982 C17.5,3.44,17.059,3,16.518,3c-0.541,0-0.982,0.44-0.982,0.982c0,0.276-0.224,0.5-0.5,0.5c-0.276,0-0.5-0.224-0.5-0.5 C14.535,2.89,15.424,2,16.518,2C17.611,2,18.5,2.89,18.5,3.982C18.5,4.902,17.87,5.678,17.018,5.9z"></path>
<g>
<path d="M5.5,14h-5C0.224,14,0,14.224,0,14.5V17c0,1.083,0.336,1.729,1,1.932V23.5C1,23.776,1.224,24,1.5,24h3 C4.776,24,5,23.776,5,23.5v-4.568c0.663-0.202,0.998-0.85,1-1.932v-2.5C6,14.224,5.776,14,5.5,14z"></path>
<circle cx="3" cy="11" r="2"></circle>
</g>
</g>
</g>
</g>
<g id="Invisible_Shape">
<rect fill="none" width="24" height="24"></rect>
</g>
</svg>
<div class="label">Support</div>
</a>
</li>
<li class="help ${activeTab === 'learn' ? 'active' : ''}">
<a href="learn">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g id="Filled_Icons">
<path d="M22.5,1.001h-21c-0.827,0-1.5,0.672-1.5,1.5V17.5C0,18.327,0.673,19,1.5,19H10v2H7c-0.276,0-0.5,0.224-0.5,0.5 S6.724,22,7,22h10c0.276,0,0.5-0.224,0.5-0.5S17.276,21,17,21h-3v-2h8.5c0.827,0,1.5-0.673,1.5-1.5V2.501 C24,1.673,23.327,1.001,22.5,1.001z M17,13c0,0.189-0.107,0.362-0.276,0.447l-4,2c-0.07,0.035-0.147,0.053-0.224,0.053 s-0.153-0.018-0.224-0.053l-4-2C8.107,13.362,8,13.189,8,13v-2.297l3.909,1.676c0.189,0.081,0.39,0.121,0.591,0.121 s0.402-0.04,0.591-0.121L17,10.703V13z M19.697,8.46l-7,3c-0.064,0.026-0.13,0.04-0.197,0.04s-0.134-0.014-0.197-0.04L6,8.758v2.66 l0.975,2.924c0.051,0.152,0.025,0.32-0.069,0.451C6.812,14.923,6.661,15,6.5,15h-2c-0.161,0-0.312-0.077-0.405-0.207 C4,14.662,3.975,14.494,4.025,14.342L5,11.418V8c0-0.091,0.031-0.172,0.074-0.246c0.01-0.018,0.02-0.033,0.033-0.051 C5.159,7.636,5.221,7.577,5.3,7.543L5.303,7.54h0.002l0.002-0.001l6.996-2.998c0.127-0.054,0.268-0.054,0.395,0l7,2.999 C19.881,7.619,20,7.8,20,8S19.881,8.381,19.697,8.46z"></path>
</g>
<g id="invisible_shape">
<rect fill="none" width="24" height="24"></rect>
</g>
</svg>
<div class="label">Learn</div>
</a>
</li>
</ul>
</nav>
<search-panel></search-panel>
<script>
window.siteConfig = {"name":"Aurelia","siteUrl":"http://aurelia.io","baseUrl":"/","outDir":"./","trackingID":"UA-38441871-6","appearance":{"logoSrc":"./src/logo.svg"},"header":{"buttons":[{"text":"Get the Newsletter","url":"http://eepurl.com/ces50j"}]},"home":{"name":"Home","description":"Aurelia is a JavaScript client framework for web, mobile and desktop that leverages simple conventions to empower your creativity.","src":"./src/home.html","dest":"home"},"blog":{"name":"The Aurelia Blog","description":"The official blog of the Aurelia project and Core Team.","dest":"blog","src":"../blog","postsPerPage":7,"author":"AureliaEffect","social":{"name":"Aurelia Channels","twitter":"https://twitter.com/aureliaeffect","github":"https://github.com/aurelia/framework","vimeo":"https://vimeo.com/channels/867847","discord":"https://discord.gg/RBtyM6u"},"sponsorLevels":[{"name":"Gold Sponsors","sponsors":[{"name":"Hogia","href":"https://www.hogia.com/","imageSrc":"styles/images/logos/hogia.svg"}]},{"name":"Silver Sponsors","sponsors":[{"name":"Movavi - Screen Recorder","href":"https://www.movavi.com/screen-recorder","imageSrc":"styles/images/logos/movavi-screen-recorder.svg"}]}],"migration":{"src":"../blog/aurelia.ghost.2018-01-15.json"}},"forum":{"url":"https://discourse.aurelia.io","name":"Discourse"},"learn":{"name":"Learn","src":"./src/learn.md","dest":"learn","items":[{"id":"training","name":"Training"},{"id":"books","name":"Books"},{"id":"videos","name":"Videos"},{"id":"aurelia-university-coming-soon","name":"Aurelia University (coming soon)"}]},"support":{"name":"Support","src":"./src/support.md","dest":"support","items":[{"id":"live-support","name":"Live Support"},{"id":"guidance-tickets","name":"Guidance Tickets"},{"id":"code-reviews","name":"Code Reviews"},{"id":"pricing","name":"Pricing"},{"id":"consulting","name":"Consulting"}]},"pages":[{"name":"Get in Touch","src":"./src/contact.html","dest":"contact"},{"name":"Thank You","src":"./src/thanks.html","dest":"thanks"}],"notFound":{"name":"404","description":"Not Found","links":[{"href":"/docs/tutorials/creating-a-todo-app","text":"Getting Started with Aurelia"},{"href":"/docs","text":"Aurelia Guides"},{"href":"/docs/api","text":"Aurelia APIs"},{"href":"/help","text":"Help"}]},"docs":{"articleSrc":"./dep_repos/documentation/current/en-us","api":[{"name":"aurelia-binding","package":"./node_modules/aurelia-binding/package.json","src":"./node_modules/aurelia-binding/dist/aurelia-binding.d.ts","dest":"docs/api/binding","exampleSrc":"./node_modules/aurelia-binding/doc/example-dist","exampleDest":"example"},{"name":"aurelia-bootstrapper","package":"./node_modules/aurelia-bootstrapper/package.json","src":"./node_modules/aurelia-bootstrapper/dist/types/aurelia-bootstrapper.d.ts","dest":"docs/api/bootstrapper"},{"name":"aurelia-dependency-injection","package":"./node_modules/aurelia-dependency-injection/package.json","src":"./node_modules/aurelia-dependency-injection/dist/aurelia-dependency-injection.d.ts","dest":"docs/api/dependency-injection"},{"name":"aurelia-dialog","package":"./node_modules/aurelia-dialog/package.json","src":"./node_modules/aurelia-dialog/dist/types/aurelia-dialog.d.ts","dest":"docs/api/dialog"},{"name":"aurelia-event-aggregator","package":"./node_modules/aurelia-event-aggregator/package.json","src":"./node_modules/aurelia-event-aggregator/dist/aurelia-event-aggregator.d.ts","dest":"docs/api/event-aggregator"},{"name":"aurelia-fetch-client","package":"./node_modules/aurelia-fetch-client/package.json","src":"./node_modules/aurelia-fetch-client/dist/aurelia-fetch-client.d.ts","dest":"docs/api/fetch-client"},{"name":"aurelia-framework","package":"./node_modules/aurelia-framework/package.json","src":"./node_modules/aurelia-framework/dist/types/aurelia-framework.d.ts","dest":"docs/api/framework"},{"name":"aurelia-history","package":"./node_modules/aurelia-history/package.json","src":"./node_modules/aurelia-history/dist/aurelia-history.d.ts","dest":"docs/api/history"},{"name":"aurelia-history-browser","package":"./node_modules/aurelia-history-browser/package.json","src":"./node_modules/aurelia-history-browser/dist/aurelia-history-browser.d.ts","dest":"docs/api/history-browser"},{"name":"aurelia-i18n","package":"./node_modules/aurelia-i18n/package.json","src":"./node_modules/aurelia-i18n/dist/aurelia-i18n.d.ts","dest":"docs/api/i18n"},{"name":"aurelia-loader","package":"./node_modules/aurelia-loader/package.json","src":"./node_modules/aurelia-loader/dist/aurelia-loader.d.ts","dest":"docs/api/loader"},{"name":"aurelia-loader-default","package":"./node_modules/aurelia-loader-default/package.json","src":"./node_modules/aurelia-loader-default/dist/aurelia-loader-default.d.ts","dest":"docs/api/loader-default"},{"name":"aurelia-logging","package":"./node_modules/aurelia-logging/package.json","src":"./node_modules/aurelia-logging/dist/aurelia-logging.d.ts","dest":"docs/api/logging"},{"name":"aurelia-logging-console","package":"./node_modules/aurelia-logging-console/package.json","src":"./node_modules/aurelia-logging-console/dist/aurelia-logging-console.d.ts","dest":"docs/api/logging-console"},{"name":"aurelia-metadata","package":"./node_modules/aurelia-metadata/package.json","src":"./node_modules/aurelia-metadata/dist/aurelia-metadata.d.ts","dest":"docs/api/metadata"},{"name":"aurelia-pal","package":"./node_modules/aurelia-pal/package.json","src":"./node_modules/aurelia-pal/dist/aurelia-pal.d.ts","dest":"docs/api/pal"},{"name":"aurelia-pal-browser","package":"./node_modules/aurelia-pal-browser/package.json","src":"./node_modules/aurelia-pal-browser/dist/aurelia-pal-browser.d.ts","dest":"docs/api/pal-browser"},{"name":"aurelia-path","package":"./node_modules/aurelia-path/package.json","src":"./node_modules/aurelia-path/dist/types/index.d.ts","dest":"docs/api/path"},{"name":"aurelia-route-recognizer","package":"./node_modules/aurelia-route-recognizer/package.json","src":"./node_modules/aurelia-route-recognizer/dist/aurelia-route-recognizer.d.ts","dest":"docs/api/route-recognizer"},{"name":"aurelia-router","package":"./node_modules/aurelia-router/package.json","src":"./node_modules/aurelia-router/dist/aurelia-router.d.ts","dest":"docs/api/router"},{"name":"aurelia-task-queue","package":"./node_modules/aurelia-task-queue/package.json","src":"./node_modules/aurelia-task-queue/dist/aurelia-task-queue.d.ts","dest":"docs/api/task-queue"},{"name":"aurelia-templating","package":"./node_modules/aurelia-templating/package.json","src":"./node_modules/aurelia-templating/dist/types/aurelia-templating.d.ts","dest":"docs/api/templating"},{"name":"aurelia-templating-binding","package":"./node_modules/aurelia-templating-binding/package.json","src":"./node_modules/aurelia-templating-binding/dist/types/aurelia-templating-binding.d.ts","dest":"docs/api/templating-binding"},{"name":"aurelia-templating-resources","package":"./node_modules/aurelia-templating-resources/package.json","src":"./node_modules/aurelia-templating-resources/dist/types/aurelia-templating-resources.d.ts","dest":"docs/api/templating-resources"},{"name":"aurelia-templating-router","package":"./node_modules/aurelia-templating-router/package.json","src":"./node_modules/aurelia-templating-router/dist/aurelia-templating-router.d.ts","dest":"docs/api/templating-router"},{"name":"aurelia-testing","package":"./node_modules/aurelia-testing/package.json","src":"./node_modules/aurelia-testing/dist/types/aurelia-testing.d.ts","dest":"docs/api/testing"},{"name":"aurelia-validation","package":"./node_modules/aurelia-validation/package.json","src":"./node_modules/aurelia-validation/dist/aurelia-validation.d.ts","dest":"docs/api/validation"}],"article":[{"name":"Overview","description":"Discover what Aurelia is along with its business and technical advantages.","dest":"docs/overview","items":[{"name":"What is Aurelia?","description":"Aurelia is a modern front-end framework for building browser, mobile and desktop applications.","src":"dep_repos/documentation/current/en-us/1. overview/1. what-is-aurelia.md","dest":"docs/overview/what-is-aurelia","featured":true,"items":[{"id":"what-is-aurelia","name":"What is Aurelia?"},{"id":"why-choose-aurelia","name":"Why choose Aurelia?"}]},{"name":"Technical Benefits","description":"There are many technical advantages to using Aurelia. In this article, you will find a list of points we think are interesting. Taken together, there is no other SPA framework today that can match Aurelia.","src":"dep_repos/documentation/current/en-us/1. overview/2. technical-benefits.md","dest":"docs/overview/technical-benefits","featured":false,"items":[{"id":"modern-javascript","name":"Modern JavaScript"},{"id":"modern-dom","name":"Modern DOM"},{"id":"modern-tooling","name":"Modern Tooling"},{"id":"code-quality","name":"Code Quality"},{"id":"web-component-standards","name":"Web Component Standards"},{"id":"modularity","name":"Modularity"},{"id":"platform-support","name":"Platform Support"},{"id":"capabilities","name":"Capabilities"}]},{"name":"Business Advantages","description":"Aurelia is open source platform with commercial backing. If your business is going to spend significant money building software, you want to do it on a platform that's committed to you as a customer. You want to be able to form a relationship with your technology provider to ensure that you and your developers have a solid platform upon which to build your business now and in the years to come.","src":"dep_repos/documentation/current/en-us/1. overview/3. business-advantages.md","dest":"docs/overview/business-advantages","featured":false,"items":[{"id":"commercially-backed","name":"Commercially Backed"},{"id":"commercial-products-and-services","name":"Commercial Products and Services"},{"id":"strategic-partnerships","name":"Strategic Partnerships"},{"id":"broad-customer-reach","name":"Broad Customer Reach"}]}]},{"name":"Tutorials","description":"Step-by-step tutorials teaching you how to build your first Aurelia applications.","dest":"docs/tutorials","items":[{"name":"Quick Start","description":"Welcome to Aurelia! This quick start guide will take you through creating a Todo app using Aurelia and briefly explain its main concepts. We assume you are familiar with JavaScript, HTML, and CSS.","src":"dep_repos/documentation/current/en-us/2. tutorials/1. creating-a-todo-app.md","dest":"docs/tutorials/creating-a-todo-app","featured":false,"items":[{"id":"setup","name":"Setup"},{"id":"creating-a-new-aurelia-project","name":"Creating A New Aurelia Project"},{"id":"the-app-class","name":"The App Class"},{"id":"rendering-the-app","name":"Rendering the App"},{"id":"conclusion","name":"Conclusion"}]},{"name":"Contact Manager Tutorial","description":"Now that you've got the basics down, you need to learn how to use the CLI, build a more complex app and get a solid knowledge foundation for real-world work. In this tutorial we'll build a small contact manager app and demonstrate a variety of Aurelia's features as well as learn some useful techniques.","src":"dep_repos/documentation/current/en-us/2. tutorials/2. creating-a-contact-manager.md","dest":"docs/tutorials/creating-a-contact-manager","featured":false,"items":[{"id":"setting-up-your-machine","name":"Setting Up Your Machine"},{"id":"creating-a-new-aurelia-project","name":"Creating A New Aurelia Project"},{"id":"adding-required-assets","name":"Adding Required Assets"},{"id":"building-the-application-shell","name":"Building the Application Shell"},{"id":"building-out-the-default-route","name":"Building Out the Default Route"},{"id":"building-out-the-contact-list","name":"Building Out the Contact List"},{"id":"building-out-the-contact-detail-screen","name":"Building Out the Contact Detail Screen"},{"id":"adding-pubsub-messaging","name":"Adding Pub/Sub Messaging"},{"id":"adding-a-loading-indicator","name":"Adding A Loading Indicator"},{"id":"next-steps","name":"Next Steps"},{"id":"conclusion","name":"Conclusion"}]}]},{"name":"Fundamentals","description":"After you've completed the quick starts, learn more about Aurelia's app model, components, dependency injection and more.","dest":"docs/fundamentals","items":[{"name":"App Configuration and Startup","description":"In this article you'll learn the various ways to bootstrap and configure Aurelia, along with different mechanisms for controlling the initial render strategy.","src":"dep_repos/documentation/current/en-us/3. fundamentals/1. app-configuration-and-startup.md","dest":"docs/fundamentals/app-configuration-and-startup","featured":false,"items":[{"id":"bootstrapping-aurelia","name":"Bootstrapping Aurelia"},{"id":"rendering-the-root-component","name":"Rendering the Root Component"},{"id":"bootstrapping-older-browsers","name":"Bootstrapping Older Browsers"},{"id":"manual-bootstrapping","name":"Manual Bootstrapping"},{"id":"making-resources-global","name":"Making Resources Global"},{"id":"organizing-your-app-with-features","name":"Organizing Your App with Features"},{"id":"installing-plugins","name":"Installing Plugins"},{"id":"leveraging-progressive-enhancement","name":"Leveraging Progressive Enhancement"},{"id":"customizing-conventions","name":"Customizing Conventions"},{"id":"logging","name":"Logging"}]},{"name":"Creating Components","description":"Components are the basic building blocks of all Aurelia applications. In this article you'll learn how to build basic components using dependency injection and the component lifecycle.","src":"dep_repos/documentation/current/en-us/3. fundamentals/2. creating-components.md","dest":"docs/fundamentals/creating-components","featured":false,"items":[{"id":"creating-a-component","name":"Creating A Component"},{"id":"component-instantiation-through-dependency-injection-di","name":"Component Instantiation Through Dependency Injection (DI)"},{"id":"the-component-lifecycle","name":"The Component Lifecycle"}]},{"name":"Dependency Injection: Basics","description":"Learn about how to leverage Aurelia's dependency injection container, the power behind all object creation in Aurelia applications.","src":"dep_repos/documentation/current/en-us/3. fundamentals/3. dependency-injection.md","dest":"docs/fundamentals/dependency-injection","featured":false,"items":[{"id":"introduction","name":"Introduction"},{"id":"injection","name":"Injection"},{"id":"object-lifetime-child-containers-and-default-behavior","name":"Object Lifetime, Child Containers and Default Behavior"},{"id":"how-aurelia-uses-containers","name":"How Aurelia Uses Containers"},{"id":"explicit-configuration","name":"Explicit Configuration"},{"id":"resolvers","name":"Resolvers"}]},{"name":"Securing Your App","description":"It's important to secure your application. This article will address a couple of simple things you can do to improve the security of your application.","src":"dep_repos/documentation/current/en-us/3. fundamentals/4. security.md","dest":"docs/fundamentals/security","featured":false,"items":[{"id":"introduction","name":"Introduction"},{"id":"authentication-and-authorization","name":"Authentication and Authorization"},{"id":"validation-and-sanitization","name":"Validation and Sanitization"},{"id":"secret-data","name":"Secret Data"},{"id":"deployment","name":"Deployment"},{"id":"prepare-for-the-inevitable","name":"Prepare for the Inevitable"},{"id":"do-not-be-nice-to-bad-guys","name":"Do Not Be Nice to Bad Guys"}]},{"name":"Cheat Sheet","description":"Forgot the syntax for bindings? Need to know how to create a custom attribute? This article contains answers to questions like those as well as a bunch of quick snippets for common tasks.","src":"dep_repos/documentation/current/en-us/3. fundamentals/5. cheat-sheet.md","dest":"docs/fundamentals/cheat-sheet","featured":false,"items":[{"id":"configuration-and-startup","name":"Configuration and Startup"},{"id":"creating-components","name":"Creating Components"},{"id":"dependency-injection","name":"Dependency Injection"},{"id":"templating-basics","name":"Templating Basics"},{"id":"databinding","name":"Databinding"},{"id":"templating-view-resources","name":"Templating View Resources"},{"id":"routing","name":"Routing"},{"id":"custom-attributes","name":"Custom Attributes"},{"id":"custom-elements","name":"Custom Elements"},{"id":"the-event-aggregator","name":"The Event Aggregator"}]}]},{"name":"Binding","description":"Learn all about Aurelia's powerful data-binding engine.","dest":"docs/binding","items":[{"name":"Binding: Basics","description":"The basics of data-binding with Aurelia.","src":"dep_repos/documentation/current/en-us/4. binding/1. basics.md","dest":"docs/binding/basics","featured":false,"items":[{"id":"introduction","name":"Introduction"},{"id":"html-and-svg-attributes","name":"HTML and SVG Attributes"},{"id":"dom-events","name":"DOM Events"},{"id":"function-references","name":"Function References"},{"id":"referencing-elements","name":"Referencing Elements"},{"id":"string-interpolation","name":"String Interpolation"},{"id":"element-content","name":"Element Content"},{"id":"contextual-properties","name":"Contextual Properties"},{"id":"expression-syntax","name":"Expression Syntax"}]},{"name":"Binding: Class and Style","description":"Data-binding class and style attributes with Aurelia.","src":"dep_repos/documentation/current/en-us/4. binding/2. class-and-style.md","dest":"docs/binding/class-and-style","featured":false,"items":[{"id":"class","name":"Class"},{"id":"style","name":"Style"}]},{"name":"Binding: Checkboxes","description":"Data-binding checkbox inputs with Aurelia.","src":"dep_repos/documentation/current/en-us/4. binding/3. checkboxes.md","dest":"docs/binding/checkboxes","featured":false,"items":[{"id":"introduction","name":"Introduction"},{"id":"booleans","name":"Booleans"},{"id":"array-of-numbers","name":"Array of Numbers"},{"id":"array-of-objects","name":"Array of Objects"},{"id":"array-of-objects-with-matcher","name":"Array of Objects with Matcher"},{"id":"array-of-strings","name":"Array of Strings"}]},{"name":"Binding: Radios","description":"Data-binding radio inputs with Aurelia.","src":"dep_repos/documentation/current/en-us/4. binding/4. radios.md","dest":"docs/binding/radios","featured":false,"items":[{"id":"introduction","name":"Introduction"},{"id":"numbers","name":"Numbers"},{"id":"objects","name":"Objects"},{"id":"objects-with-matcher","name":"Objects with Matcher"},{"id":"booleans","name":"Booleans"},{"id":"strings","name":"Strings"}]},{"name":"Binding: Selects","description":"Data-binding select elements with Aurelia.","src":"dep_repos/documentation/current/en-us/4. binding/5. selects.md","dest":"docs/binding/selects","featured":false,"items":[{"id":"introduction","name":"Introduction"},{"id":"select-number","name":"Select Number"},{"id":"select-object","name":"Select Object"},{"id":"select-object-with-matcher","name":"Select Object with Matcher"},{"id":"select-boolean","name":"Select Boolean"},{"id":"select-string","name":"Select String"},{"id":"multiple-select-numbers","name":"Multiple Select Numbers"},{"id":"multiple-select-objects","name":"Multiple Select Objects"},{"id":"multiple-select-strings","name":"Multiple Select Strings"}]},{"name":"Binding: Delegate vs Trigger","description":"When to use delegate and when to use trigger.","src":"dep_repos/documentation/current/en-us/4. binding/6. delegate-vs-trigger.md","dest":"docs/binding/delegate-vs-trigger","featured":false,"items":[{"id":"delegate-vs-trigger","name":"Delegate vs Trigger"},{"id":"event-delegation-with-capture","name":"Event delegation with Capture"}]},{"name":"Binding: Computed Properties","description":"Data-binding computed properties with Aurelia.","src":"dep_repos/documentation/current/en-us/4. binding/7. computed-properties.md","dest":"docs/binding/computed-properties","featured":false,"items":[{"id":"introduction","name":"Introduction"}]},{"name":"Binding: Value Converters","description":"An overview of the Aurelia binding engine's value converter functionality. Value converters are used to transform data during the data-binding process, both to and from the view.","src":"dep_repos/documentation/current/en-us/4. binding/8. value-converters.md","dest":"docs/binding/value-converters","featured":false,"items":[{"id":"introduction","name":"Introduction"},{"id":"value-converters","name":"Value Converters"},{"id":"simple-converters","name":"Simple Converters"},{"id":"converter-parameters","name":"Converter Parameters"},{"id":"binding-converter-parameters","name":"Binding Converter Parameters"},{"id":"multiple-parameters-composing-converters","name":"Multiple Parameters / Composing Converters"},{"id":"object-parameters","name":"Object Parameters"},{"id":"bi-directional-value-converters","name":"Bi-directional Value Converters"},{"id":"globally-accessible-value-converters","name":"Globally Accessible Value Converters"},{"id":"signalable-value-converters","name":"Signalable Value Converters"}]},{"name":"Binding: Binding Behaviors","description":"An overview of the Aurelia binding engine's binding behavior functionality. Binding Behaviors are used to plug into a binding instance's lifecycle and change the way it operates.","src":"dep_repos/documentation/current/en-us/4. binding/9. binding-behaviors.md","dest":"docs/binding/binding-behaviors","featured":false,"items":[{"id":"introduction","name":"Introduction"},{"id":"throttle","name":"throttle"},{"id":"debounce","name":"debounce"},{"id":"updatetrigger","name":"updateTrigger"},{"id":"signal","name":"signal"},{"id":"onetime","name":"oneTime"},{"id":"self","name":"self"},{"id":"custom-binding-behaviors","name":"Custom binding behaviors"}]},{"name":"Binding: Observables","description":"Using observables with Aurelia.","src":"dep_repos/documentation/current/en-us/4. binding/10. observable-properties.md","dest":"docs/binding/observable-properties","featured":false,"items":[{"id":"observable-properties","name":"Observable Properties"},{"id":"observing-collections","name":"Observing Collections"}]},{"name":"Binding: How it Works","description":"How data-binding works in Aurelia.","src":"dep_repos/documentation/current/en-us/4. binding/11. how-it-works.md","dest":"docs/binding/how-it-works","featured":false,"items":[{"id":"end-to-end","name":"End to End"},{"id":"abstract-syntax-tree","name":"Abstract Syntax Tree"},{"id":"binding-context-scope","name":"Binding Context / Scope"}]},{"name":"Binding: The Binding Engine","description":"How data-binding works in Aurelia.","src":"dep_repos/documentation/current/en-us/4. binding/12. binding-engine.md","dest":"docs/binding/binding-engine","featured":false,"items":[{"id":"introduction","name":"Introduction"},{"id":"how-to-install","name":"How to install"},{"id":"observing-a-property-on-an-object","name":"Observing a property on an object"},{"id":"observing-a-collection-mutation","name":"Observing a collection mutation"},{"id":"observing-an-expression-on-an-object","name":"Observing an expression on an object"}]}]},{"name":"Templating","description":"Learn all about Aurelia's powerful templating engine.","dest":"docs/templating","items":[{"name":"Templating: Basics","description":"A basic guide to using Aurelia's templating engine.","src":"dep_repos/documentation/current/en-us/5. templating/1. basics.md","dest":"docs/templating/basics","featured":false,"items":[{"id":"introduction","name":"Introduction"},{"id":"a-simple-template","name":"A Simple Template"},{"id":"binding","name":"Binding"},{"id":"composition","name":"Composition"},{"id":"the-as-element-attribute","name":"The as-element Attribute"},{"id":"the-view-resource-pipeline","name":"The View Resource Pipeline"},{"id":"view-and-compilation-spies","name":"View and Compilation Spies"},{"id":"conditionals","name":"Conditionals"},{"id":"repeaters","name":"Repeaters"}]},{"name":"Templating: HTML Behaviors Introduction","description":"An overview of the Aurelia templating engine's custom attribute and custom element functionality, including not only how to create basic versions, but how to use them both locally and globally in your application.","src":"dep_repos/documentation/current/en-us/5. templating/2. html-behaviors.md","dest":"docs/templating/html-behaviors","featured":false,"items":[{"id":"introduction","name":"Introduction"},{"id":"what-is-an-html-behavior","name":"What is an HTML Behavior?"},{"id":"getting-the-dom-element-for-your-behavior","name":"Getting the DOM Element for your Behavior"},{"id":"making-an-html-behavior-available-in-a-view","name":"Making an HTML Behavior Available in a View"},{"id":"global-resources","name":"Global Resources"},{"id":"creating-bindable-properties-on-an-html-behavior","name":"Creating Bindable Properties on an HTML Behavior"},{"id":"inheritance-with-html-behaviors","name":"Inheritance with HTML Behaviors"},{"id":"html-only-custom-elements","name":"HTML-Only Custom Elements"},{"id":"html-behavior-lifecycle","name":"HTML Behavior Lifecycle"},{"id":"conclusion","name":"Conclusion"}]},{"name":"Templating: Custom Attributes","description":"An overview of the Aurelia templating engine's custom attribute functionality. Custom Attributes are used to add custom behaviors to DOM elements.","src":"dep_repos/documentation/current/en-us/5. templating/3. custom-attributes.md","dest":"docs/templating/custom-attributes","featured":false,"items":[{"id":"introduction","name":"Introduction"},{"id":"simple-custom-attribute","name":"Simple Custom Attribute"},{"id":"explicit-attribute-naming","name":"Explicit Attribute Naming"},{"id":"single-value-binding","name":"Single Value Binding"},{"id":"options-binding","name":"Options Binding"},{"id":"default-option","name":"Default Option"},{"id":"dynamic-options-binding","name":"Dynamic Options Binding"},{"id":"globally-accessible-custom-attributes","name":"Globally Accessible Custom Attributes"}]},{"name":"Templating: Custom Elements Basics","description":"An overview of the Aurelia templating engine's custom element functionality basics. Custom Elements are used to add custom components to Aurelia applications.","src":"dep_repos/documentation/current/en-us/5. templating/4. custom-elements.md","dest":"docs/templating/custom-elements","featured":false,"items":[{"id":"introduction","name":"Introduction"},{"id":"html-only-custom-element","name":"HTML Only Custom Element"},{"id":"custom-element-basics","name":"Custom Element Basics"},{"id":"bindable-properties","name":"Bindable Properties"},{"id":"declarative-computed-values","name":"Declarative Computed Values"},{"id":"surrogate-behaviors","name":"Surrogate behaviors"},{"id":"basic-content-projection","name":"Basic Content Projection"},{"id":"decorators-for-customizing-aurelia-custom-element-processing","name":"Decorators for Customizing Aurelia Custom Element Processing"}]},{"name":"Templating: Content Projection","description":"An overview of the Aurelia templating engine's custom element content projection functionality.","src":"dep_repos/documentation/current/en-us/5. templating/5. content-projection.md","dest":"docs/templating/content-projection","featured":false,"items":[{"id":"introduction","name":"Introduction"},{"id":"basic-content-projection","name":"Basic Content Projection"},{"id":"named-slots","name":"Named Slots"},{"id":"fallback-slots","name":"Fallback Slots"},{"id":"slot-implementation-limitations","name":"Slot Implementation Limitations"}]},{"name":"Templating: Dynamic UI Composition","description":"An overview of Aurelia's dynamic template composition functionality.","src":"dep_repos/documentation/current/en-us/5. templating/6. dynamic-ui-composition.md","dest":"docs/templating/dynamic-ui-composition","featured":false,"items":[{"id":"introduction","name":"Introduction"},{"id":"basic-composition","name":"Basic Composition"},{"id":"composing-without-a-view-model","name":"Composing Without a View-Model"},{"id":"passing-through-data","name":"Passing Through Data"}]}]},{"name":"Routing","description":"Learn how to setup and configure Aurelia's router.","dest":"docs/routing","items":[{"name":"Router Configuration","description":"This article covers Aurelia's router configuration.","src":"dep_repos/documentation/current/en-us/6. routing/1. configuration.md","dest":"docs/routing/configuration","featured":false,"items":[{"id":"basic-configuration","name":"Basic Configuration"},{"id":"options","name":"Options"},{"id":"dynamically-specify-route-components","name":"Dynamically Specify Route Components"},{"id":"adding-additional-data-to-a-route","name":"Adding Additional Data To A Route"},{"id":"case-sensitive-routes","name":"Case Sensitive Routes"},{"id":"handling-unknown-routes","name":"Handling Unknown Routes"},{"id":"redirecting-routes","name":"Redirecting Routes"},{"id":"pipelines","name":"Pipelines"},{"id":"router-events","name":"Router Events"},{"id":"rendering-view-ports","name":"Rendering View Ports"},{"id":"layouts","name":"Layouts"},{"id":"view-swapping-and-animation","name":"View Swapping and Animation"},{"id":"internationalizing-titles","name":"Internationalizing Titles"},{"id":"configuring-a-fallback-route","name":"Configuring a Fallback Route"},{"id":"reusing-an-existing-view-model","name":"Reusing an Existing View Model"}]},{"name":"Handling Links","description":"This article covers Aurelia's default behavior on handling links.","src":"dep_repos/documentation/current/en-us/6. routing/2. handling-links.md","dest":"docs/routing/handling-links","featured":false,"items":[{"id":"basic-concept","name":"Basic Concept"},{"id":"skipping-click-hijacking","name":"Skipping Click Hijacking"},{"id":"conditional-skipping-click-hijacking","name":"Conditional Skipping Click Hijacking"}]}]},{"name":"Plugins","description":"Learn about Aurelia's officially supported plugins and how to use them.","dest":"docs/plugins","items":[{"name":"HTTP Services","description":"Usually JavaScript applications need to get their data from or communicate with various web services. In this article we'll take a look at the options Aurelia makes available to you.","src":"dep_repos/documentation/current/en-us/7. plugins/1. http-services.md","dest":"docs/plugins/http-services","featured":false,"items":[{"id":"options","name":"Options"},{"id":"aurelia-fetch-client","name":"aurelia-fetch-client"},{"id":"aurelia-http-client","name":"aurelia-http-client"}]},{"name":"Managing App State","description":"Using the Aurelia Store plugin for predictable state management.","src":"dep_repos/documentation/current/en-us/7. plugins/2. store.md","dest":"docs/plugins/store","featured":false,"items":[{"id":"introduction","name":"Introduction"},{"id":"getting-started","name":"Getting Started"},{"id":"what-is-the-state","name":"What is the State?"},{"id":"configuring-your-app","name":"Configuring your app"},{"id":"subscribing-to-the-stream-of-states","name":"Subscribing to the stream of states"},{"id":"subscribing-with-the-connectto-decorator","name":"Subscribing with the connectTo decorator"},{"id":"what-are-actions","name":"What are actions?"},{"id":"async-actions","name":"Async actions"},{"id":"dispatching-actions","name":"Dispatching actions"},{"id":"piping-multiple-actions-as-one","name":"Piping multiple actions as one"},{"id":"using-the-dispatchify-higher-order-function","name":"Using the dispatchify higher order function"},{"id":"resetting-the-store-to-a-specific-state","name":"Resetting the store to a specific state"},{"id":"two-way-binding-and-state-management","name":"Two-way binding and state management"},{"id":"recording-a-navigable-history-of-the-stream-of-states","name":"Recording a navigable history of the stream of states"},{"id":"making-our-app-history-aware","name":"Making our app history-aware"},{"id":"limiting-the-number-of-history-items","name":"Limiting the number of history items"},{"id":"handling-side-effects-with-middleware","name":"Handling side-effects with middleware"},{"id":"accessing-the-original-unmodified-state-in-a-middleware","name":"Accessing the original (unmodified) state in a middleware"},{"id":"defining-settings-for-middlewares","name":"Defining settings for middlewares"},{"id":"reference-to-the-calling-action-for-middlewares","name":"Reference to the calling action for middlewares"},{"id":"error-propagation-with-middlewares","name":"Error propagation with middlewares"},{"id":"default-middlewares","name":"Default middlewares"},{"id":"execution-order","name":"Execution order"},{"id":"tracking-overall-performance","name":"Tracking overall performance"},{"id":"debugging-with-the-redux-devtools-extension","name":"Debugging with the Redux DevTools extension"},{"id":"defining-custom-devtoolsoptions","name":"Defining custom devToolsOptions"},{"id":"defining-custom-loglevels","name":"Defining custom LogLevels"},{"id":"comparison-to-other-state-management-libraries","name":"Comparison to other state management libraries"}]},{"name":"Validation","description":"The basics of validation with Aurelia.","src":"dep_repos/documentation/current/en-us/7. plugins/3. validation.md","dest":"docs/plugins/validation","featured":false,"items":[{"id":"introduction","name":"Introduction"},{"id":"defining-rules","name":"Defining Rules"},{"id":"customizing-messages","name":"Customizing Messages"},{"id":"validation-controller","name":"Validation Controller"},{"id":"validator","name":"Validator"},{"id":"validate-binding-behavior","name":"Validate Binding Behavior"},{"id":"displaying-errors","name":"Displaying Errors"},{"id":"custom-renderers","name":"Custom Renderers"},{"id":"entity-validation","name":"Entity Validation"},{"id":"custom-rules","name":"Custom Rules"},{"id":"multiple-validation-controllers","name":"Multiple Validation Controllers"},{"id":"integration-with-other-libraries","name":"Integration With Other Libraries"},{"id":"integrating-with-aurelia-i18n","name":"Integrating with Aurelia-I18N"},{"id":"server-side-validation","name":"Server-Side Validation"}]},{"name":"I18N","description":"Getting started with I18N in your Aurelia app.","src":"dep_repos/documentation/current/en-us/7. plugins/4. i18n.md","dest":"docs/plugins/i18n","featured":false,"items":[{"id":"introduction","name":"Introduction"},{"id":"installing-the-plugin","name":"Installing the Plugin"},{"id":"setting-up-the-plugin","name":"Setting up the Plugin"},{"id":"typescript-support","name":"TypeScript Support"},{"id":"using-the-plugin","name":"Using the Plugin"},{"id":"bundle-translation-files","name":"Bundle Translation Files"},{"id":"internationalization-api-polyfill","name":"Internationalization API Polyfill"}]},{"name":"Dialogs","description":"The basics of the dialog plugin for Aurelia.","src":"dep_repos/documentation/current/en-us/7. plugins/5. dialog.md","dest":"docs/plugins/dialog","featured":false,"items":[{"id":"introduction","name":"Introduction"},{"id":"installing-the-plugin","name":"Installing The Plugin"},{"id":"configuring-the-plugin","name":"Configuring The Plugin"},{"id":"using-the-plugin","name":"Using The Plugin"},{"id":"default-resourcescustom-elementsattributes","name":"Default Resources(custom elements/attributes)"},{"id":"settings","name":"Settings"},{"id":"accessing-the-dialogcontroller-api","name":"Accessing The DialogController API"},{"id":"styling-the-dialog","name":"Styling The Dialog"},{"id":"lifecycle-hooks","name":"Lifecycle Hooks"}]},{"name":"Animation","description":"The basics of using the animation plugin for Aurelia.","src":"dep_repos/documentation/current/en-us/7. plugins/6. animation.md","dest":"docs/plugins/animation","featured":false,"items":[{"id":"introduction","name":"Introduction"},{"id":"installing-the-plugin","name":"Installing The Plugin"},{"id":"configuring-the-plugin","name":"Configuring The Plugin"},{"id":"demo","name":"Demo"},{"id":"using-the-plugin","name":"Using The Plugin"},{"id":"working-with-default-animation-triggers","name":"Working with Default Animation Triggers"},{"id":"summary","name":"Summary"}]},{"name":"Virtualization","description":"The basics of using the ui-virtualization plugin for Aurelia.","src":"dep_repos/documentation/current/en-us/7. plugins/7. virtualization.md","dest":"docs/plugins/virtualization","featured":false,"items":[{"id":"introduction","name":"Introduction"},{"id":"installing-the-plugin","name":"Installing The Plugin"},{"id":"configuring-the-plugin","name":"Configuring The Plugin"},{"id":"using-the-plugin","name":"Using The Plugin"},{"id":"infinite-scroll","name":"Infinite Scroll"},{"id":"caveats","name":"Caveats"}]},{"name":"Write New Plugin","description":"A tutorial on how to write a new Aurelia plugin.","src":"dep_repos/documentation/current/en-us/7. plugins/8.write-new-plugin.md","dest":"docs/plugins/write-new-plugin","featured":false,"items":[{"id":"introduction","name":"Introduction"},{"id":"setup","name":"Setup"},{"id":"structure-of-plugin","name":"Structure of Plugin"},{"id":"develop-plugin","name":"Develop Plugin"},{"id":"advanced-usage","name":"Advanced Usage"}]}]},{"name":"Integration","description":"Learn how to integrate Aurelia with various other libraries and frameworks.","dest":"docs/integration","items":[{"name":"Integrating with Polymer","description":"Polymer is a library for creating reusable web components declaratively with extra features like data binding and property observation. In many ways, it is similar to Aurelia's component support. However, Polymer also includes an extensive catalog of custom elements for everything from material design to credit card forms to embedding Google services like Google Maps and YouTube. With a bit of work, these components can be incorporated into Aurelia applications as well.","src":"dep_repos/documentation/current/en-us/8. integration/1. polymer.md","dest":"docs/integration/polymer","featured":false,"items":[{"id":"setup","name":"Setup"},{"id":"importing-elements","name":"Importing Elements"},{"id":"data-binding","name":"Data Binding"},{"id":"forms-and-two-way-binding","name":"Forms and Two-Way Binding"},{"id":"how-the-plugin-works","name":"How the Plugin Works"}]}]},{"name":"Testing","description":"Learn all about testing Aurelia apps, including component testing and e2e testing.","dest":"docs/testing","items":[{"name":"Testing Components","description":"An overview of how to unit test Custom Elements and Custom Attributes.","src":"dep_repos/documentation/current/en-us/9. testing/1. components.md","dest":"docs/testing/components","featured":false,"items":[{"id":"introduction","name":"Introduction"},{"id":"getting-started","name":"Getting Started"},{"id":"testing-a-custom-element","name":"Testing a Custom Element"},{"id":"manually-handling-lifecycle","name":"Manually handling lifecycle"},{"id":"testing-a-custom-attribute","name":"Testing a Custom Attribute"},{"id":"testing-custom-component-with-a-real-view-model","name":"Testing custom component with a real view-model"},{"id":"using-a-real-parent-view-model","name":"Using a Real Parent View-model"},{"id":"improving-readability-with-multi-line-strings","name":"Improving Readability with Multi-line Strings"},{"id":"helpful-properties-and-functions","name":"Helpful Properties and Functions"},{"id":"testing-complex-components","name":"Testing complex components"}]},{"name":"End to End Testing","description":"Testing front-end applications has become an important task for today's developers. Not only do you want to ensure that your application's internal code operates correctly, but you also want to validate the in-browser behavior. This article will show you how to achieve this by combining Aurelia and Protractor.","src":"dep_repos/documentation/current/en-us/9. testing/2. end-to-end.md","dest":"docs/testing/end-to-end","featured":false,"items":[{"id":"what-is-e2e-testing","name":"What is E2E testing?"},{"id":"how-are-e2e-tests-different","name":"How are E2E tests different?"},{"id":"protractor","name":"Protractor"},{"id":"a-basic-example","name":"A Basic Example"},{"id":"accessing-dom-elements","name":"Accessing DOM Elements"},{"id":"interacting-with-forms","name":"Interacting with Forms"},{"id":"protractor-and-aurelia","name":"Protractor and Aurelia"},{"id":"testing-the-aurelia-skeleton-navigation-app","name":"Testing the Aurelia Skeleton Navigation App"},{"id":"page-objects","name":"Page Objects"},{"id":"test-specification","name":"Test Specification"},{"id":"summary","name":"Summary"}]}]},{"name":"Server Side Rendering","description":"Learn about Server Side Rendering with Aurelia and how to configure your project.","dest":"docs/ssr","items":[{"name":"Server Side Rendering","description":"An introduction to server-side rendering with Aurelia.","src":"dep_repos/documentation/current/en-us/10. ssr/1. introduction.md","dest":"docs/ssr/introduction","featured":false,"items":[{"id":"what-is-server-side-rendering","name":"What is Server Side Rendering?"},{"id":"caveats","name":"Caveats"},{"id":"how-it-works","name":"How It Works"},{"id":"isomorphic-code","name":"Isomorphic Code"},{"id":"memory-management","name":"Memory Management"},{"id":"different-main-entry-points","name":"Different Main Entry Points"},{"id":"404-pages","name":"404 pages"},{"id":"skeleton-with-ssr-pre-configured","name":"Skeleton with SSR Pre-Configured"}]}]},{"name":"CLI","description":"Learn how to create, build, bundle and test your apps using all your favorite tools, facilitated by the Aurelia CLI.","dest":"docs/cli","items":[{"name":"Basics","description":"The basics of the Aurelia CLI.","src":"dep_repos/documentation/current/en-us/11. cli/1. basics.md","dest":"docs/cli/basics","featured":false,"items":[{"id":"introduction","name":"Introduction"},{"id":"machine-setup","name":"Machine Setup"},{"id":"creating-a-new-aurelia-project","name":"Creating A New Aurelia Project"},{"id":"creating-a-new-aurelia-plugin-project","name":"Creating A New Aurelia Plugin Project"},{"id":"running-your-aurelia-app","name":"Running Your Aurelia App"},{"id":"environments","name":"Environments"},{"id":"building-your-app","name":"Building Your App"},{"id":"generators","name":"Generators"},{"id":"aureliajson","name":"Aurelia.json"},{"id":"webpack-vs-built-in-bundler","name":"Webpack vs Built-in Bundler"},{"id":"what-if-i-need-help","name":"What if I need help?"}]},{"name":"Gulp Tasks","description":"Gulp tasks using the Aurelia CLI.","src":"dep_repos/documentation/current/en-us/11. cli/2. tasks.md","dest":"docs/cli/tasks","featured":false,"items":[{"id":"introduction","name":"Introduction"},{"id":"task-execution","name":"Task execution"},{"id":"creating-a-new-task","name":"Creating a new task"},{"id":"task-metadata","name":"Task metadata"}]},{"name":"Webpack","description":"Webpack and the Aurelia CLI.","src":"dep_repos/documentation/current/en-us/11. cli/3. webpack.md","dest":"docs/cli/webpack","featured":false,"items":[{"id":"introduction","name":"Introduction"},{"id":"platformmodulename","name":"PLATFORM.moduleName"},{"id":"running-the-application","name":"Running the application"},{"id":"simplified-webpack","name":"Simplified Webpack"},{"id":"deploying-your-app","name":"Deploying Your App"},{"id":"build-options","name":"Build options"},{"id":"installing-3rd-party-dependencies","name":"Installing 3rd party dependencies"},{"id":"unit-testing","name":"Unit Testing"},{"id":"aspnet-core","name":"ASP.NET Core"}]},{"name":"Built-in Bundler","description":"The CLI Built-in Bundler is an alternative bundler to Webpack. It provides similar capabilities but with much simpler configuration. If you have little or no experience with Webpack, we recommend our built-in bundler.","dest":"docs/cli/cli-bundler","items":[{"name":"CLI's built-in Bundler","description":"Basics features of the Aurelia CLI's built-in Bundler.","src":"dep_repos/documentation/current/en-us/11. cli/4. cli-bundler/1. basics.md","dest":"docs/cli/cli-bundler/basics","featured":false,"items":[{"id":"introduction","name":"Introduction"},{"id":"aspnet-core","name":"ASP.NET Core"},{"id":"running-the-application","name":"Running the application"},{"id":"deploying-your-app","name":"Deploying Your App"},{"id":"unit-testing","name":"Unit Testing"},{"id":"build-revisions","name":"Build Revisions"},{"id":"caching","name":"Caching"},{"id":"bundling-and-code-splitting","name":"Bundling And Code Splitting"},{"id":"adding-client-libraries-to-your-project","name":"Adding Client Libraries to Your Project"},{"id":"copy-other-files-eg-fonts","name":"Copy Other Files (e.g. fonts)"},{"id":"setting-the-baseurl","name":"Setting the baseUrl"},{"id":"styling-your-application","name":"Styling your Application"},{"id":"updating-a-single-library","name":"Updating A Single Library"},{"id":"updating-multiple-libraries","name":"Updating Multiple Libraries"},{"id":"javascript-minification","name":"Javascript Minification"},{"id":"path-mappings","name":"Path mappings"}]},{"name":"CLI's built-in Bundler Dependency Management","description":"Dependency Management of the CLI built-in Bundler.","src":"dep_repos/documentation/current/en-us/11. cli/4. cli-bundler/2. dependency-management.md","dest":"docs/cli/cli-bundler/dependency-management","featured":false,"items":[{"id":"introduction","name":"Introduction"},{"id":"auto-tracing","name":"Auto Tracing"},{"id":"manual-tracing","name":"Manual Tracing"},{"id":"prepend","name":"Prepend"},{"id":"shim","name":"Shim"},{"id":"au-run-auto-install","name":"au run --auto-install"}]},{"name":"CLI + built-in Bundler Advanced","description":"Advanced Usage of the CLI built-in Bundler.","src":"dep_repos/documentation/current/en-us/11. cli/4. cli-bundler/3. advanced.md","dest":"docs/cli/cli-bundler/advanced","featured":false,"items":[{"id":"introduction","name":"Introduction"},{"id":"onrequiringmodule","name":"onRequiringModule"},{"id":"global-wrapshim","name":"Global wrapShim"},{"id":"npm-package-alias","name":"Npm package alias"},{"id":"local-copy-of-npm-package","name":"Local copy of npm package"},{"id":"lazy-bundling-of-main-file","name":"Lazy bundling of main file"}]},{"name":"CLI's built-in Bundler Cookbook","description":"Recipes for common usage of CLI's built-in bundler","src":"dep_repos/documentation/current/en-us/11. cli/4. cli-bundler/4. cook-book.md","dest":"docs/cli/cli-bundler/cook-book","featured":false,"items":[{"id":"introduction","name":"Introduction"},{"id":"jquery","name":"jQuery"},{"id":"normalizecss","name":"normalize.css"},{"id":"bootstrap-css-v4","name":"Bootstrap CSS v4"},{"id":"customize-bootstrap-css-v4","name":"Customize Bootstrap CSS v4"},{"id":"bootstrap-css-v3-legacy","name":"Bootstrap CSS v3 (legacy)"},{"id":"font-awesome-v5-free","name":"Font Awesome v5 Free"},{"id":"font-awesome-v4","name":"Font Awesome v4"},{"id":"foundation-css-v6","name":"Foundation CSS v6"},{"id":"materialize-css-v1","name":"Materialize CSS v1"},{"id":"typeorm-with-shimmed-decorators","name":"TypeORM with shimmed decorators"}]}]},{"name":"Migrating","description":"Migrate from CLI built-in bundler to Webpack, or from old built-in bundler to new auto-tracing bundler.","src":"dep_repos/documentation/current/en-us/11. cli/5. migrating.md","dest":"docs/cli/migrating","featured":false,"items":[{"id":"from-cli-bundler-to-webpack","name":"From CLI Bundler to Webpack"},{"id":"upgrade-to-auto-tracing-bundler-100-beta1-or-above","name":"Upgrade to Auto-Tracing Bundler (1.0.0-beta.1 or above)"},{"id":"update-3rd-party-plugin-installation-guide","name":"Update 3rd party plugin installation guide"}]},{"name":"Updating","description":"The process of updating the Aurelia CLI.","src":"dep_repos/documentation/current/en-us/11. cli/6. updating.md","dest":"docs/cli/updating","featured":false,"items":[{"id":"updating-the-aurelia-cli","name":"Updating the Aurelia CLI"}]},{"name":"Recipes & known issues","description":"In this section you can find examples of particular setups, known issues and possible workarounds","src":"dep_repos/documentation/current/en-us/11. cli/7. recipes.md","dest":"docs/cli/recipes","featured":false,"items":[{"id":"introduction","name":"Introduction"},{"id":"aurelia-cli-bundler-docker","name":"Aurelia-CLI bundler + Docker"},{"id":"npm-uninstalling-packages","name":"NPM uninstalling packages"},{"id":"building-with-tfs","name":"Building with TFS"}]}]},{"name":"Build Systems","description":"Various systems for building and bundling Aurelia apps.","dest":"docs/build-systems","items":[{"name":"Webpack","description":"Setup and bundling using the Webpack system.","dest":"docs/build-systems/webpack","items":[{"name":"A Basic Example","description":"If you're interested in setting up Webpack from scratch to build projects, this article will give you everything you need to know.","src":"dep_repos/documentation/current/en-us/12. build-systems/1. webpack/1. a-basic-example.md","dest":"docs/build-systems/webpack/a-basic-example","featured":false,"items":[{"id":"introduction","name":"Introduction"},{"id":"platformmodulename","name":"PLATFORM.moduleName"},{"id":"webpack-documentation","name":"Webpack Documentation"},{"id":"basic-config-example","name":"Basic Config Example"},{"id":"other-files-used","name":"Other Files Used"}]}]},{"name":"JSPM","description":"Setup and bundling using the JSPM system.","dest":"docs/build-systems/jspm","items":[{"name":"Setup with JSPM","description":"If you're interested in getting setup with JSPM to build projects, this article will take you through setting up both your machine and a production quality starter project.","src":"dep_repos/documentation/current/en-us/12. build-systems/2. jspm/1. setup.md","dest":"docs/build-systems/jspm/setup","featured":false,"items":[{"id":"configuring-your-environment","name":"Configuring Your Environment"},{"id":"setting-up-the-project-structure-and-build","name":"Setting up the Project Structure and Build"},{"id":"running-the-app","name":"Running The App"},{"id":"running-the-unit-tests","name":"Running The Unit Tests"},{"id":"running-the-e2e-tests","name":"Running The E2E Tests"}]},{"name":"Bundling with JSPM","description":"Before deploying your app to production, you'll want to bundle the assets for efficient use of the network.","src":"dep_repos/documentation/current/en-us/12. build-systems/2. jspm/2. bundling.md","dest":"docs/build-systems/jspm/bundling","featured":false,"items":[{"id":"introduction","name":"Introduction"},{"id":"bundling","name":"Bundling "},{"id":"bundling-an-aurelia-jspm-application","name":"Bundling an Aurelia JSPM Application"},{"id":"multiple-bundles","name":"Multiple Bundles"},{"id":"bundling-a-jspm-v017-app","name":"Bundling a JSPM v0.17 App"},{"id":"duplicate-modules-in-multiple-bundles","name":"Duplicate Modules in Multiple Bundles"},{"id":"bundle-configuration","name":"Bundle Configuration"},{"id":"bundling-html-imports","name":"Bundling HTML Imports"},{"id":"conclusion","name":"Conclusion"}]}]},{"name":"Docker","description":"Setup and run an Aurelia application using Docker containers.","dest":"docs/build-systems/docker","items":[{"name":"Setup Docker","description":"If you're interested in getting started with Docker to build projects, this article will take you through setting up both your machine and a production quality starter project.","src":"dep_repos/documentation/current/en-us/12. build-systems/3. docker/1. setup.md","dest":"docs/build-systems/docker/setup","featured":false,"items":[{"id":"introduction","name":"Introduction"},{"id":"configuring-your-environment","name":"Configuring Your Environment"},{"id":"basic-sample","name":"Basic Sample"},{"id":"a-more-real-world-scenario","name":"A More Real World Scenario"}]}]}]}]},"search":true,"footer":{"copyright":"Copyright © 2010 - 2020 <a href=\"http://www.bluespire.com\">Blue Spire Inc.</a> Code licensed under the MIT License. Content licensed under CC0.","columns":[{"name":"Resources","links":[{"href":"docs/overview/what-is-aurelia","text":"About"},{"href":"blog","text":"Blog"},{"href":"http://eepurl.com/ces50j","text":"Newsletter"}]},{"name":"Help","links":[{"href":"https://discourse.aurelia.io/","text":"Discourse"},{"href":"https://discord.gg/RBtyM6u","text":"Discord"},{"href":"https://stackoverflow.com/search?q=aurelia","text":"Stack Overflow"}]},{"name":"Community","links":[{"href":"https://github.com/aurelia","text":"GitHub"},{"href":"https://twitter.com/aureliaeffect","text":"Twitter"},{"href":"https://github.com/orgs/aurelia/people","text":"Team"}]}]}};
</script>
<script src="scripts/aurelia-docs-1882c78c11.js" data-main="aurelia-bootstrapper"></script>
</body>
</html>