Table Of ContentPractical App
Development
with Aurelia
Leverage the Power of Aurelia to Build
Personal and Business Applications
—
Matthew Duffield
Practical App
Development with Aurelia
Leverage the Power of Aurelia to
Build Personal and Business
Applications
Matthew Duffield
Practical App Development with Aurelia
Matthew Duffield
West Linn, Oregon, USA
ISBN-13 (pbk): 978-1-4842-3401-3 ISBN-13 (electronic): 978-1-4842-3402-0
https://doi.org/10.1007/978-1-4842-3402-0
Library of Congress Control Number: 2018936370
Copyright © 2018 by Matthew Duffield
This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the
material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation,
broadcasting, reproduction on microfilms or in any other physical way, and transmission or information
storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now
known or hereafter developed.
Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with
every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an
editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the
trademark.
The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not
identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to
proprietary rights.
While the advice and information in this book are believed to be true and accurate at the date of publication,
neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or
omissions that may be made. The publisher makes no warranty, express or implied, with respect to the
material contained herein.
Managing Director, Apress Media LLC: Welmoed Spahr
Acquisitions Editor: Louise Corrigan
Development Editor: James Markham
Coordinating Editor: Nancy Chen
Cover designed by eStudioCalamar
Cover image by Freepik (www.freepik.com)
Distributed to the book trade worldwide by Springer Science+Business Media New York, 233 Spring Street,
6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail orders-ny@springer-
sbm.com, or visit www.springeronline.com. Apress Media, LLC is a California LLC and the sole member
(owner) is Springer Science + Business Media Finance Inc (SSBM Finance Inc). SSBM Finance Inc is a
Delaware corporation.
For information on translations, please e-mail [email protected], or visit http://www.apress.com/
rights-permissions.
Apress titles may be purchased in bulk for academic, corporate, or promotional use. eBook versions and
licenses are also available for most titles. For more information, reference our Print and eBook Bulk Sales
web page at http://www.apress.com/bulk-sales.
Any source code or other supplementary material referenced by the author in this book is available to
readers on GitHub via the book's product page, located at www.apress.com/9781484234013. For more
detailed information, please visit http://www.apress.com/source-code.
Printed on acid-free paper
For my wife Erica and my kids Dean, Duncan, and Veronica,
who have patiently endured letting me finish a sentence or
a coding sample before asking a question or inviting me to play.
I love you all very much.
Table of Contents
About the Author xiii
About the Technical Reviewer xv
Acknowledgments xvii
Chapter 1: Introduction1
What Is Aurelia? ����������������������������������������������������������������������������������������������������������������������������1
What Is MVVM? �����������������������������������������������������������������������������������������������������������������������������2
When Do I Need a Front-End Framework? ������������������������������������������������������������������������������������2
Why Should I Use Aurelia? ������������������������������������������������������������������������������������������������������������3
Setting Expectations ���������������������������������������������������������������������������������������������������������������������4
Summary���������������������������������������������������������������������������������������������������������������������������������������5
Chapter 2: Getting Set Up 7
Build Options ���������������������������������������������������������������������������������������������������������������������������������7
Configuring your machine �������������������������������������������������������������������������������������������������������������8
ES6 and TypeScript �����������������������������������������������������������������������������������������������������������������������9
NodeJS ������������������������������������������������������������������������������������������������������������������������������������������9
Aurelia CLI �����������������������������������������������������������������������������������������������������������������������������������10
Hello World ����������������������������������������������������������������������������������������������������������������������������������21
Summary�������������������������������������������������������������������������������������������������������������������������������������22
Chapter 3: Routing 23
Router Configuration �������������������������������������������������������������������������������������������������������������������23
Push State Configuration ������������������������������������������������������������������������������������������������������������29
Dynamic Routes ��������������������������������������������������������������������������������������������������������������������������30
Child Routers �������������������������������������������������������������������������������������������������������������������������������33
v
Table of ConTenTs
View Ports �����������������������������������������������������������������������������������������������������������������������������������35
Layouts����������������������������������������������������������������������������������������������������������������������������������������37
Redirecting Routes ����������������������������������������������������������������������������������������������������������������������40
Unknown Routes �������������������������������������������������������������������������������������������������������������������������40
Fallback Route ����������������������������������������������������������������������������������������������������������������������������41
Summary�������������������������������������������������������������������������������������������������������������������������������������42
Chapter 4: Security and Pipelines 43
Router Pipelines ��������������������������������������������������������������������������������������������������������������������������43
Authorize Step �����������������������������������������������������������������������������������������������������������������������������44
Audit Step �����������������������������������������������������������������������������������������������������������������������������������47
Summary�������������������������������������������������������������������������������������������������������������������������������������49
Chapter 5: Dependency Injection 51
Dependency Injection in Aurelia ��������������������������������������������������������������������������������������������������51
Manual Injection ��������������������������������������������������������������������������������������������������������������������52
Injection by Decorator �����������������������������������������������������������������������������������������������������������54
Autoinjection ��������������������������������������������������������������������������������������������������������������������������55
Dependency Injection Containers �����������������������������������������������������������������������������������������������56
Container Management ���������������������������������������������������������������������������������������������������������������57
Dependency Injection Resolvers �������������������������������������������������������������������������������������������������58
Summary�������������������������������������������������������������������������������������������������������������������������������������59
Chapter 6: Services 61
Summary�������������������������������������������������������������������������������������������������������������������������������������66
Chapter 7: Getting Data 67
HTTP Client ����������������������������������������������������������������������������������������������������������������������������������67
HTTP Fetch Client ������������������������������������������������������������������������������������������������������������������������74
Limitations to Fetch ���������������������������������������������������������������������������������������������������������������76
Interceptors ���������������������������������������������������������������������������������������������������������������������������������76
Summary�������������������������������������������������������������������������������������������������������������������������������������79
vi
Table of ConTenTs
Chapter 8: Data Binding 81
Data Binding and Event Binding ��������������������������������������������������������������������������������������������������81
Binding ����������������������������������������������������������������������������������������������������������������������������������������81
Types of Binding ��������������������������������������������������������������������������������������������������������������������81
Referencing Elements in Bindings �����������������������������������������������������������������������������������������82
Input ��������������������������������������������������������������������������������������������������������������������������������������83
Check Box ������������������������������������������������������������������������������������������������������������������������������83
Radio �������������������������������������������������������������������������������������������������������������������������������������86
Select ������������������������������������������������������������������������������������������������������������������������������������87
Element Content ��������������������������������������������������������������������������������������������������������������������90
Class/Style �����������������������������������������������������������������������������������������������������������������������������91
Conditionals ���������������������������������������������������������������������������������������������������������������������������93
Binding Scopes ����������������������������������������������������������������������������������������������������������������������95
Looping ����������������������������������������������������������������������������������������������������������������������������������96
Value Converters �������������������������������������������������������������������������������������������������������������������97
Binding Behaviors ������������������������������������������������������������������������������������������������������������������97
DOM Events ���������������������������������������������������������������������������������������������������������������������������������98
Types of Binding ��������������������������������������������������������������������������������������������������������������������98
Delegate ��������������������������������������������������������������������������������������������������������������������������������98
Trigger �����������������������������������������������������������������������������������������������������������������������������������99
Call�����������������������������������������������������������������������������������������������������������������������������������������99
Summary�����������������������������������������������������������������������������������������������������������������������������������100
Chapter 9: Templates 101
Templates ����������������������������������������������������������������������������������������������������������������������������������101
String Interpolation ��������������������������������������������������������������������������������������������������������������101
Conditional Expressions ������������������������������������������������������������������������������������������������������102
View Resource Pipeline �������������������������������������������������������������������������������������������������������103
Slots ������������������������������������������������������������������������������������������������������������������������������������104
Composition �������������������������������������������������������������������������������������������������������������������������105
“as-element” Attribute ��������������������������������������������������������������������������������������������������������105
Summary�����������������������������������������������������������������������������������������������������������������������������������106
vii
Table of ConTenTs
Chapter 10: Forms and Validation 107
HTML Form Element������������������������������������������������������������������������������������������������������������������107
Aurelia Validation Plug-in ����������������������������������������������������������������������������������������������������������109
Summary�����������������������������������������������������������������������������������������������������������������������������������116
Chapter 11: View and Component Life Cycles 117
View Life Cycles ������������������������������������������������������������������������������������������������������������������������117
Component Life Cycles �������������������������������������������������������������������������������������������������������������118
Summary�����������������������������������������������������������������������������������������������������������������������������������119
Chapter 12: Event Aggregation 121
Setting Up Our Shell ������������������������������������������������������������������������������������������������������������������121
Manage Your Subscriptions ������������������������������������������������������������������������������������������������������125
Alternative Approach �����������������������������������������������������������������������������������������������������������������126
Summary�����������������������������������������������������������������������������������������������������������������������������������126
Chapter 13: Custom Elements 127
What Are Custom Elements? �����������������������������������������������������������������������������������������������������127
Static Custom Elements ������������������������������������������������������������������������������������������������������������127
Standard Custom Elements �������������������������������������������������������������������������������������������������������129
Advanced Custom Elements �����������������������������������������������������������������������������������������������������139
Summary�����������������������������������������������������������������������������������������������������������������������������������146
Chapter 14: Custom Attributes 147
Defining Custom Attributes �������������������������������������������������������������������������������������������������������147
Set-Focus Custom Attribute ������������������������������������������������������������������������������������������������������147
Input-Mask Custom Attribute ����������������������������������������������������������������������������������������������������150
Circle Custom Attribute �������������������������������������������������������������������������������������������������������������156
Summary�����������������������������������������������������������������������������������������������������������������������������������159
Chapter 15: Value Converters 161
Value Converters �����������������������������������������������������������������������������������������������������������������������161
Conventions ������������������������������������������������������������������������������������������������������������������������������161
viii
Table of ConTenTs
Building Your First Value Converter �������������������������������������������������������������������������������������������162
Multiple Parameters ������������������������������������������������������������������������������������������������������������164
Parameters as Objects ��������������������������������������������������������������������������������������������������������168
Making Your Value Converters Global ����������������������������������������������������������������������������������169
Summary�����������������������������������������������������������������������������������������������������������������������������������170
Chapter 16: Binding Behaviors 171
Binding Behaviors ���������������������������������������������������������������������������������������������������������������������171
Custom Binding Behaviors ��������������������������������������������������������������������������������������������������������174
Summary�����������������������������������������������������������������������������������������������������������������������������������177
Chapter 17: Compose 179
When Not to Use Compose ��������������������������������������������������������������������������������������������������������179
When to Use Compose ��������������������������������������������������������������������������������������������������������������179
Summary�����������������������������������������������������������������������������������������������������������������������������������183
Chapter 18: Dynamic Views 185
getViewStrategy ������������������������������������������������������������������������������������������������������������������������185
Enhance ������������������������������������������������������������������������������������������������������������������������������������189
Summary�����������������������������������������������������������������������������������������������������������������������������������194
Chapter 19: Creating Features 195
What Are Features? �������������������������������������������������������������������������������������������������������������������195
Configuring Global Resources ���������������������������������������������������������������������������������������������������196
Markup Scenario �����������������������������������������������������������������������������������������������������������������������198
Summary�����������������������������������������������������������������������������������������������������������������������������������199
Chapter 20: Creating Plug-ins 201
Going from a Feature to a Plug-in ���������������������������������������������������������������������������������������������201
Existing Aurelia CLI Project �������������������������������������������������������������������������������������������������������202
Publishing your Plug-in �������������������������������������������������������������������������������������������������������������208
Using Your Plug-in ���������������������������������������������������������������������������������������������������������������������209
Summary�����������������������������������������������������������������������������������������������������������������������������������210
ix
Table of ConTenTs
Chapter 21: Animations 211
Animation Plug-ins ��������������������������������������������������������������������������������������������������������������������211
Aurelia-Animator-CSS Plug-in ���������������������������������������������������������������������������������������������������211
CSS3 Animations �����������������������������������������������������������������������������������������������������������������212
Animations and Routes ��������������������������������������������������������������������������������������������������������212
Getting Our Animations Set Up ��������������������������������������������������������������������������������������������213
Adding/Removing Items ������������������������������������������������������������������������������������������������������217
Summary�����������������������������������������������������������������������������������������������������������������������������������223
Chapter 22: Dialogs 225
Aurelia Dialog Plug-in ���������������������������������������������������������������������������������������������������������������225
Global Dialog Settings ���������������������������������������������������������������������������������������������������������������231
Styling Dialogs ��������������������������������������������������������������������������������������������������������������������������231
Summary�����������������������������������������������������������������������������������������������������������������������������������232
Chapter 23: Localization 233
Aurelia i18n Plug-in ������������������������������������������������������������������������������������������������������������������233
Translations with nested objects �����������������������������������������������������������������������������������������239
Summary�����������������������������������������������������������������������������������������������������������������������������������240
Chapter 24: Testing and Debugging 241
Unit Testing �������������������������������������������������������������������������������������������������������������������������������241
Testing Custom Elements ����������������������������������������������������������������������������������������������������242
Mocking Dependencies �������������������������������������������������������������������������������������������������������245
End-to-End Testing ��������������������������������������������������������������������������������������������������������������������247
Interacting with the Browser �����������������������������������������������������������������������������������������������248
Debugging Aurelia Applications ������������������������������������������������������������������������������������������������249
View-Spy �����������������������������������������������������������������������������������������������������������������������������249
Compile-Spy ������������������������������������������������������������������������������������������������������������������������251
Aurelia Inspector in Chrome ������������������������������������������������������������������������������������������������252
Summary�����������������������������������������������������������������������������������������������������������������������������������254
x
Description:Explore all the aspects of the Aurelia framework, including routing, templating, data binding, custom elements, event aggregation, HTTP services, features, plugins, etc. You’ll see how to tie all the pieces together and walk away with an understanding of how to build applications, end to end. Prac