Learning Aurelia by Guilbault, Manuel -- Read -- Imperial Library of Trantor

Index

Learning Aurelia

Learning Aurelia Credits About the Author About the Reviewer www.PacktPub.com

Why subscribe?

Customer Feedback Preface

What this book covers What you need for this book Who this book is for Conventions Reader feedback Customer support

Downloading the example code Errata Piracy Questions

1. Getting Started

Terminology Core concepts

Conventions Components

Architecture

Core features Abstraction layers Default implementations Integration layers Additional tools and plugins

Tooling

Node.js and NPM The Aurelia CLI

Installing the CLI

The project skeletons

Our application The structure of a CLI-based project

The aurelia.json file Tasks Generators Environments

The structure of an Aurelia application

The hosting page The main module The root component

Conventional bootstrapping Customizing Aurelia configuration

Summary

2. Layout, Menu, and Getting Familiar

Dependency injection

The inject decorator TypeScript and autoinject The static inject method or property Root and child containers Resolving an instance Lifetime Registration

The container registration API Automatic registration Registration strategies Creating a custom registration strategy

Resolvers

Lazy All Optional Parent Factory NewInstance

The plugin system

Plugins

An example Registering global resources

Features

Logging

Configuration

Default configuration

An appender Writing logs

Routing

Configuring the router Declaring routes

Redirection route Navigation strategies

Laying out our application

Trying it out

The screen activation life cycle Navigation commands Handling unknown routes

Conventional routing

Activation strategies Child routers Pipelines Events Multiple viewports Push state versus hash change Generating URLs

In code In views

Navigating

Summary

3. Displaying Data

Templating basics

View resources

Locally loading resources Resource types

Loading CSS

Data binding

Binding modes String interpolation Data binding commands

bind One-way Two-way One-time trigger delegate call ref

Binding literals Using built-in binding context properties Binding to DOM properties

innerhtml textcontent style scrolltop scrollleft

Using built-in behaviors

show hide if repeat.for

Binding to a map Repeat n times Repeating templating Contextual variables

The with attribute The focus attribute The compose element

Rendering a view-model Passing activation data Rendering a template

Value converters

Using value converters

Passing a parameter Passing multiple parameters Passing context variables as parameters Chaining

Implementing a value converter

Binding behaviors

Using binding behaviors

Passing parameters

Built-in binding behaviors

oneTime throttle debounce updateTrigger signal

Computed properties

computedFrom

Fetching data from an endpoint

The Fetch API Using the Fetch client Configuration

A common pitfall

Interceptors

Our application

Our contact gateway

Prerequisites

Displaying the contacts Grouping and sorting the contacts

Creating the orderBy value converter Creating the groupBy value converter Updating the contact list

Filtering contacts The contact detailed view

The view-model The template

Summary

4. Forms, and How to Validate Them

Binding to form inputs

select elements

Multi-selection Matchers

input elements

File pickers Radio buttons Checkboxes

textarea Disabling an element Making an element read-only

Adding forms to our application

Adding new routes Adding links to the new routes Updating models Creating the form component

Activating the view-model Building the form layout Editing scalar properties Editing phone numbers Adding the missing method Editing the other lists Saving and canceling

Sending data with fetch Uploading a contact's photo

Building the template Creating the view-model Uploading files with fetch

Deleting a contact

Validation

Installing the library Configuration Validating the contact form

Setting up the template Using ValidationController Adding ValidationRules

Rendering validation errors

The errors property The validation-errors attribute Creating a custom ValidationRenderer

Changing the validation trigger Creating custom ValidationRules

Validating a date Validating that files are selected Validating the size of files Validating file extensions Validating the contact photo selector

Editing complex structures

Installing the dialog plugin Creating the edition dialogs Using edition dialogs

Summary

5. Making Reusable Components

Composition

Splitting the contact edition component Reusing templates Reusing components

Using a template as a custom element Understanding HTML behaviors

Injecting the DOM element Declaring bindable properties Change handler methods Life cycle

Custom attributes

Declaring a custom attribute Attributes with a single value

Adding an image preview Adding a file drop target

Attributes with multiple properties

Using a custom attribute with multiple properties

Attributes with dynamic properties

Using a custom attribute with dynamic properties

Custom elements

Declaring a custom element Creating a file picker

Declaring the custom element Using the custom element

Validating custom elements Surrogate behaviors Content projection

The default slot Named slots Data-binding projected content Default content Slots in slots Mixing named slots with a default slot Slot-ception Limitations

Template injection

Creating a group list Using the group list Default template part Re-scoping binding context Creating a list editor Using the list editor

Using the customization decorators

viewResources useView inlineView noView useViewStrategy processAttributes processContent containerless useShadowDOM children child

Bonus – preventing multiple submits

Creating the submit task attribute Using the submit task attribute Creating the submit button Using the submit button

Customizing the view location strategy

Changing the convention itself Changing the strategy for a single component

Summary

6. Design Concerns - Organizing and Decoupling

Re-organizing our application

Refactoring the structure

Breaking the models down Isolating the gateway Grouping the components There is no silver bullet

Leveraging child routers

Changing the root routes Configuring the contacts child router Implications

Declaring root routes in a feature

Creating the feature Changing the root routes Reducing coupling on the feature Implications

Why not both?

Decoupling components

Using data binding Using remote services Using events

The event aggregator Extending an object with events Using event classes Creating an interactive connection Adding notifications Getting out of the pitfall Simulating a multi-user scenario

Using shared services

Creating an in-memory store Using the store

Summary

7. Test All the Things

Unit tests

Running unit tests Configuring validation Configuring Bluebird warnings Unit-testing models

Testing static factory methods Testing computed properties

Unit-testing services

Removing configuration from the gateway constructor Testing read methods Testing write methods

Unit-testing value converters Unit-testing custom elements and attributes

The component tester Testing the file-drop-target attribute Testing the list-editor element

Unit-testing route components

End-to-end tests

Setting things up Mocking the backend The page object pattern Writing a first test case Running tests Testing the contacts list Testing contact creation Further testing

Summary

8. Internationalization

Setting things up

Installing the libraries Configuring the plugin Creating the translation file Polyfilling the Intl API

Getting and setting the current locale Translating

Using attributes

Passing parameters

Using the value converter

Passing parameters

Using the binding behavior

Passing parameters

Using code Choosing one technique over another

Formatting numbers

Using the value converter Using the binding behavior Using code

Formatting dates

Using the value converter Using the binding behavior Using code

Formatting relative time

Using the value converter

Periodically refreshing the value

Using code

Translating our contact management application Integrating with validation

Overriding ValidationMessageProvider Adding the translations Refreshing validation errors

Integrating with the Router Segregating translations by feature Summary

9. Animations

The Animator API The CSS animator

Installing the plugin Animating view transitions

Animating the list-editor

Manually triggering an animation

Emphasizing validation errors

Animating route transitions

Swap order

Summary

10. Bundling for Production

Configuring bundles

Merging the application in a single bundle Splitting the application into multiple bundles

Versioning bundles Deploying the application Summary

11. Integrating with Other Libraries

Using Bootstrap widgets

Loading the library Creating a bs-tooltip attribute

Using the attribute

Creating a bs-datepicker element

Installing the bootstrap-datepicker plugin Creating the custom element Using the element

Internationalizing the bs-datepicker element

Reconfiguring bundling of jQuery and Bootstrap Updating the element

Using jQuery UI widgets

Installing the libraries Creating a jq-tooltip attribute

Using SASS instead of CSS

Replacing CSS with SASS

Dragging and dropping with sortable

Installing the library Adding drag and drop to list-editor

Drawing graphs with D3

Installing the library Prepping the application Creating the contact-address-tree custom element

Using Polymer components

Installing the libraries Configuring the application Displaying a Google map Geocoding addresses Displaying a marker

Summary

A. Using JSPM

Getting started Running tasks

Running unit tests Running end-to-end tests

Adding libraries Bundling

Configuring bundles

Summary

B. Using Webpack

Getting started Running tasks Adding libraries Bundling

Lazy-loading bundles Environment-based configuration

Summary

← Prev
Back
Next →

← Prev
Back
Next →