Aurelia Collected Tutorials

After consulting with Mr. Rob Eisenberg, We decided to post a collection of existing Aurelia tutorials in here.

I thank all the authors of these tutorials.

I’m trying to keep this list up to date.

I provided the offline version of Aurelia Guides in word and pdf formats. (typescript version)


ASP .NET Core

Aurelia in ASP.NET JavaScriptServices

Does aurelia-auth support webpack?

How I got an image to the backend of my Aurelia site

Multiple Aurelia apps in a single ASP.NET Core application


Animating

Animating Apps with Aurelia - Part 1


Aurelia vs Angular

Angular 1.x Concepts In Aurelia

Angular Services in Aurelia

Aurelia & Angular 2.0 Code Side by Side - Part 1

Aurelia & Angular 2.0 Code Side by Side - Part 2

From Angular to Aurelia Part 1

From Angular to Aurelia Part 2: Services

From Angular to Aurelia Part 3: Value Converters

From Angular to Aurelia Part 4: Page Lifecycle

Migrating AngularJS Directives To Aurelia – Part I: Custom Elements

Porting an Angular 2.0 App to Aurelia

The Equivalent of Angular 2 EventEmitter In Aurelia


Binding

A use case for view-model.ref

Adaptive Data Binding with Aurelia

Aurelia Async Bindings

Aurelia Binding Behaviors

Aurelia Data-binding Strategies - with and if

Aurelia ViewModel Lifecycle Methods

Aurelia’s Adaptive Binding

Binding to file inputs with Aurelia

Binding with Value Converters in Aurelia

Creating a typed version of Aurelia’s computedFrom decorator with Typescript

Data binding always just works

Extending Aurelia’s Binding Language

Getting My Hands Dirty with Aurelia’s Binding Engine, Part One

Getting My Hands Dirty with Aurelia’s Binding Engine, Part Two

Scroll binding with Aurelia

Testing for strings

What is Aurelia’s .two-way command for?


Bundling

Bundling Aurelia Applications

Bundling an Aurelia Application

My Best Practices for Aurelia - Bundling and Minification

The Definitive Guide To Bundling & Exporting In Aurelia


Deploying

Deploy Aurelia to GitHub Pages


General

5 techniques used by Aurelia to promote great code quality

All About The Aurelia Fetch Client

Aurelia - feedback from the trenches

Aurelia Configuration

Aurelia property observation strategies

Aurelia – Dirty checking a function part 1

Aurelia – Dirty checking a function part 2

Aurelia – Dynamically choosing modules based on roles…

Aurelia – Easy logging with the LogManager

Aurelia, Karma and More VS Debugging Goodness

Creating Multipage Apps using Aurelia

Creating Reactive, Loosely Coupled Apps with Aurelia and Flux - Episode 1

Creating Reactive, Loosely Coupled Apps with Aurelia and Flux - Episode 2

Debugging EventAggregator

Detecting changes to objects in Aurelia

Don’t Get Skewered By “kebab-case” In Aurelia

ES7 async/await with Aurelia

Enhance an existing page with Aurelia

Faking my service layer

From a Node Console App to an Aurelia App

Getting Aurelia To Work With HTML5 pushState

Global Application State In Aurelia

How Aurelia Works

How To Use React.js In Aurelia

Inter-Component Communication with Aurelia

Isomorphic Aurelia Applications

Iterating Objects Using Repeat.for In Aurelia

Loading JSON Files in Aurelia

Managing State in Aurelia with Higher Order Components

Managing State in Aurelia: How to Use Aurelia with Redux

Managing global state

My Best Practices for Aurelia - Solving the M in MVVM

My Best Practices in Aurelia - Sharing and Passing State

Observing Objects and Arrays in Aurelia

Shared State in Aurelia

TypeScript Subclassing in Aurelia

Using Async/Await In Aurelia

Using a state container with Aurelia

Using tslib for TypeScript 2.1 with Aurelia to save bandwidth

ViewModel Observable Management

Working With Aurelia @observable

Working With Keypress Events in Aurelia

Working With The Aurelia Event Aggregator

Working With The Aurelia Task Queue

Working With The Repeater In Aurelia


I18N and Localization

Combining Value Converters with i18n in Aurelia

Installing The Aurelia-I18N Plugin in a CLI App

Starting with Aurelia i18n


Inversion of Control

Injection With Inheritance in Aurelia

Inversion of Control with Aurelia - Part 1

Inversion of Control with Aurelia - Part 2

Static Inject vs @inject In Aurelia

Using Aurelia’s Dependency Injection Library In Non-Aurelia App, Part 1

Using Aurelia’s Dependency Injection Library In Non-Aurelia App, Part 2


Plugins

All About The Aurelia UI Virtualization Plugin

Aurelia pass configuration to plugin or feature

Aurelia-Computed

Creating a Plugin for Aurelia

Introducing aurelia-computed

Json-schema validation

Using aurelia-dialog with Aurelia and WebPack

Working With Forms In Aurelia


Routing

Aurelia Routing Beyond the Basics

Aurelia Routing + Switching Root Using setRoot

Create a Menu with Child Routes using Aurelia

Introducing Aurelia Router Loader

Optional Route Parameters in Aurelia

Passing Through Data In Your Aurelia Routes

Understanding Aurelia Router Events

Unknown routes


Security

Aurelia Authentication Using Firebase

Aurelia Authentication: Multiple shells

Aurelia Authentication: Sessions

Aureliauth, a token based authentication plugin for Aurelia

Auth Protected Routes in Aurelia With Firebase

How does aurelia-auth support multiple endpoints?

JWT Authentication in Aurelia

Support for Fetch client in the aurelia-auth plugin


Structuring

Aurelia Application Structure

How To Structure An Aurelia Application

Suggestions for Structuring a Large Aurelia Application


Styling

Adding Sass & Autoprefixer Into Your Aurelia Applications

Binding with Style in Aurelia

Getting Started with Aurelia CLI and Boostrap

Using Sass with Aurelia


Templating

Accessing an Aurelia Custom Element’s ViewModel from a Custom Attribute on that Element

Adding MaterializeCSS to the Aurelia skeleton project

Adding a View to a Custom Attribute in Aurelia

Aurelia Custom Attributes - Markdown Editor

Aurelia Custom Element Using Select2

Aurelia Custom Elements & Content Selectors

Aurelia Custom Elements & Custom Callback Events

Aurelia Dynamic Compose + Webpack = Module ID Not Found

Aurelia Dynamic Composition

Aurelia Dynamic Views From Strings Using InlineViewStrategy

Aurelia Shadow DOM v1 Slots Prerelease

Aurelia and Web Components – HTML Templates and Custom Elements

Aurelia: Custom Element vs Compose

Best Parts of Aurelia #1 - Composing Custom Elements / Templates

Building Aurelia’s Focus Attribute

Building Web Components – The Shadow DOM

Checking If a View Slot Is Defined In Aurelia

Composition in Aurelia Creating a Report Builder

Content projection and templated lists in Aurelia

Creating Composable Single Page Applications with Aurelia

Custom Elements and CSS Frameworks in Aurelia

Enhancing At Will Using Aurelia’s Templating Engine Enhance API

Get Root $index Value From Within Nested Aurelia Repeaters

Initializing properties in custom elements

Inline SVG Custom Element in Aurelia

Leveraging the view model of an included element.

Making custom element global

Patterns for Computing Values in an Aurelia Template

Properly Filtering an Array in Aurelia

Replaceable Parts and CSS Frameworks in Aurelia

TypeScript Enums in Aurelia Templates

Using DOM Event Listeners In Aurelia

Using SVG in Aurelia with a inline SVG custom element

Using Views From Different Locations in Aurelia

Using tomorrow’s CSS with Aurelia (typescript) and PostCSS

Web Components and Aurelia – HTML Imports

Web Components and Aurelia – The Shadow DOM

Wielding the Power of Aurelia Content Selectors


Unit Testing

Aurelia, Karma and More VS Debugging Goodness

End-to-End Testing with Aurelia and Protractor

Setting up Karma with Aurelia, Typescript & SystemJS

Testing custom elements

Unit Testing Aurelia Custom Elements

Unit Testing a fetch API Service in Aurelia

Unit Testing your ES6 Custom Elements - (my) Best Practices for Aurelia


User Interface

A Professional SPA Loading Page

Advanced Table Templating in Aurelia

Adventures in Aurelia: Creating a Custom PDF Viewer

Aurelia and Drag/Drop Using Sortable

Binding An Aurelia Form To An Object Model

Binding Multiple Checkboxes To An Array In Aurelia

Bootstrap Components the Aurelia Way

Build a Mini Instagram App with Aurelia

Building an image files picker with Aurelia

Busy Spinner in Aurelia

Confirmation Modal With Aurelia And Bootstrap

Creating an Aurelia Dialog without a Template HTML File

DateTime Picker in Aurelia (or one of many other jQuery attached components)

Drag-and-drop in Aurelia

Drag-and-drop with Aurelia

Dynamically adding row templates to a table in Aurelia – as-element

Google reCAPTCHA with Aurelia

How to create a country-picker Aurelia component

JQuery UI Datepicker with Aurelia

Searchable tables with Aurelia Value Converters

Using jQuery UI Widgets in Aurelia

Using toastr with aurelia

You might not need a dialog library


Validation

Aurelia Validation Events

Aurelia Validation – Part 0 - The Treacherous way…

Aurelia Validation – Part 1 - The Aurelia Way

Aurelia Validation – Part 2 – Displaying our errors

Aurelia Validation – Part 3 – Custom rules and validations

Form Validation with Breeze and Aurelia


Webpack

1 - Getting Started with webpack

2 - Webpack - The Confusing Parts

Code Splitting Your Aurelia Webpack Applications

Creating a Minimal Aurelia TypeScript & Webpack Application From Scratch

Fixing Aurelia Webpack PushState “index.html” Problem

Loading HTML From A URL Endpoint In Aurelia Using Webpack

Polyfilling Promises Using Bluebird in Webpack 2

Webpack Support Lands In Aurelia CLI

Webpack, TypeScript, Aurelia and Wallaby.js

33 Likes

Its awesome :ok_hand:

4 Likes

Thanks, @behzad88 Please post your very good awesome-aurelia on this forum too.

This is a nice overview :+1:

1 Like

Excellent job, Hamed. This is very valuable. Should be in the main Aurelia page, not as a post.

4 Likes

Hello @EisenbergEffect

I can not update the first post, Edit button does not exist. Do you know why?

That’s odd. Maybe Discourse made a change to their UI? I see a “pencil” icon in a few places. When I click the ellipsis “…” button, I get a number of options and I see a pencil that when I click it, enables me to edit the post. Can you check and see if edit is possibly there for you but has been moved or re-designed somehow? Other than that, I’m not sure what’s going on. We can put a support request in if we need to.

@EisenbergEffect

This is the picture of the first post

This is the last one

Maybe after a specific time, Discourse disable Editing a post. The post was created Oct 2017

1 Like

I found a setting in discourse that I’ve changed. Take another look please and see if you are able to edit again.

2 Likes

Yes, It works Thank you so much. :clap: :wink:

1 Like

The latest PDF Aurelia v1 Docs

1 Like

Any chance of having the broken links removed or replaced by links that work?

wow. Great resource, and the first time I’m seeing this.