Learn AURELIA with Real Code Examples

Aurelia promotes a highly modular, standards-first approach.

It features a powerful, extensible two-way binding system.

Aurelia avoids unnecessary abstractions by leveraging modern ECMAScript directly.

Bindable view-models

Custom elements and attributes

Dependency injection

Routing with hierarchical navigation

Binding behaviors and value converters

Views and ViewModels

Bindable properties

Custom attributes/elements

Routing with configureRouter

Dependency injection usage

src/app.html - root view

src/app.js - root ViewModel

src/resources/ - shared components

src/routes/ - route components

aurelia_project/ - build and tooling config

Generate project with Aurelia CLI

Define ViewModels with standard classes

Bind data and events in HTML templates

Create reusable custom elements

Bundle and deploy using CLI build pipeline

Beginner: simple data binding

Intermediate: custom elements and DI

Advanced: complex routing and modules

Expert: plugin development or Aurelia 2 migration

Community: contributing to Aurelia core

More standard-based than Angular or Ember

Less popular but cleaner architecture

More flexible than Ember, more structured than React

More modern binding system than Knockout

Lightweight alternative to Angular with DI included

2015 – Aurelia 1 initial release

2017 – CLI and plugin ecosystem expansion

2020 – Aurelia 2 announced

2022 – New rendering pipeline updates

2025 – Ongoing Aurelia 2 adoption

ViewModel: Class controlling a view

Binding: Data sync between view and model

DI Container: Injects services

Custom Element: Reusable UI component

Binding Behavior: Enhances binding logic