Book Image

Learning Aurelia

By : Manuel Guilbault
Book Image

Learning Aurelia

By: Manuel Guilbault

Overview of this book

<p>Aurelia is one of the most promising new JavaScript frameworks for mobile, desktop, and web, which makes developing powerful, modern web applications a straightforward task. Its power lies in its simplicity and clear workflow that enables developers to build next-generations apps for the web with ease.</p> <p>From initial structuring to full deployment, this book will serve as a step-by-step guide to develop a modern web application from scratch with the Aurelia framework. In addition to including a comprehensive coverage of various Aurelia framework features, this book will also show you how to utilize these features in the real world to develop a professional single-page web application. You’ll see how to make the most out of Aurelia by understanding the Aurelia workflow and then applying it in real-world development tasks. By the end of the book, you will have learned to develop a clean and maintainable application in Aurelia from scratch.</p>

Related Content you might be interested in

Current Title:

Small book image
Learning Aurelia
Manuel Guilbault
Dec, 2016 | 474 pages
No titles found
Table of Contents (20 chapters)
Learning Aurelia
Learning Aurelia
Credits
Credits
About the Author
About the Author
About the Reviewer
About the Reviewer
www.PacktPub.com
www.PacktPub.com
Customer Feedback
Customer Feedback
Preface
Preface
Free Chapter
1
Getting Started
Getting Started
Terminology
Core concepts
Architecture
Tooling
The project skeletons
Summary
2
Layout, Menu, and Getting Familiar
Layout, Menu, and Getting Familiar
Dependency injection
The plugin system
Logging
Routing
Summary
3
Displaying Data
Displaying Data
Templating basics
Data binding
Using built-in behaviors
Value converters
Binding behaviors
Computed properties
Fetching data from an endpoint
Our application
Summary
4
Forms, and How to Validate Them
Forms, and How to Validate Them
Binding to form inputs
Adding forms to our application
Validation
Editing complex structures
Summary
5
Making Reusable Components
Making Reusable Components
Composition
Using a template as a custom element
Understanding HTML behaviors
Custom attributes
Custom elements
Bonus – preventing multiple submits
Customizing the view location strategy
Summary
6
Design Concerns - Organizing and Decoupling
Design Concerns - Organizing and Decoupling
Re-organizing our application
Decoupling components
Summary
7
Test All the Things
Test All the Things
Unit tests
End-to-end tests
Summary
8
Internationalization
Internationalization
Setting things up
Getting and setting the current locale
Translating
Formatting numbers
Formatting dates
Formatting relative time
Translating our contact management application
Integrating with validation
Integrating with the Router
Segregating translations by feature
Summary
9
Animations
Animations
The Animator API
The CSS animator
Summary
10
Bundling for Production
Bundling for Production
Configuring bundles
Versioning bundles
Deploying the application
Summary
11
Integrating with Other Libraries
Integrating with Other Libraries
Using Bootstrap widgets
Using jQuery UI widgets
Using SASS instead of CSS
Dragging and dropping with sortable
Drawing graphs with D3
Using Polymer components
Summary
Using JSPM
Using JSPM
Getting started
Running tasks
Adding libraries
Bundling
Summary
Using Webpack
Using Webpack
Getting started
Running tasks
Adding libraries
Bundling
Summary

Using built-in behaviors

The core library, aurelia-templating-resources, provides a set of standard behaviors, built on top of aurelia-templating, which can be used in any Aurelia template.

show

The show attribute controls the visibility of the element, based on the value of the expression it is bound to:

<template> 
  <p show.bind="hasError">An error occurred.</p> 
</template>

In this example, the p element will be visible only when the model's hasError property is truthy.

This attribute works by injecting a CSS class either in the document head or in the nearest ShadowDOM root, and by adding this CSS class on the element whenever it should be hidden. This CSS class simply sets the display property to none.

hide

This is similar to show, but with an inverted condition:

<template> 
  <p hide.bind="isValid">Form is invalid.</p> 
</template>

In this example, the p element will be hidden when the model's isValid property...

Previous Section
End of Section 4
Next Section