Aurelia Introduction — What Is Aurelia and Why Use It

In this tutorial, you will learn about Aurelia Introduction. We cover key concepts, practical examples, and best practices to help you master this topic.

Aurelia is a modern JavaScript framework focused on clean code and Convention Over Configuration. It uses plain classes for components, Dependency Injection for services, and a powerful templating engine with custom elements and attributes that extend HTML naturally.

What You'll Learn

You will understand Aurelia's architecture, its convention system, dependency injection, routing, templating, and how it differs from other frameworks.

Why It Matters

Aurelia prioritizes developer experience with minimal boilerplate. Components are plain classes. Templates are standard HTML with extensions. This makes Aurelia code easy to read, write, and maintain.

Real-World Use

Enterprise applications in finance and healthcare use Aurelia for its convention-based approach. The framework's adherence to web standards means it works well with existing tooling and integrates naturally with other libraries.

flowchart LR
    A[App Root] --> B[Router]
    B --> C[Route 1]
    B --> D[Route 2]
    A --> E[Dependency Injection]
    C --> F[Component]
    D --> G[Component]
    F --> H[Template]
    F --> I[ViewModel]

Core Concepts

Aurelia applications consist of components. Each component has a ViewModel (plain class) and a View (HTML template). The framework wires them together automatically by convention.

Convention Over Configuration

In Aurelia, naming conventions determine how files relate. A component named my-component expects a ViewModel at my-component.ts and a View at my-component.html. The framework discovers and wires them without manual registration.

// my-component.ts — ViewModel (plain class)
export class MyComponent {
  message = 'Hello Aurelia!';
}

<!-- my-component.html — View (standard HTML) -->
<template>
  <h1>${message}</h1>
</template>

Dependency Injection

Aurelia uses a built-in dependency injection container. Services are injected via constructor parameters with the @inject decorator or through autoinjection.

import { inject } from 'aurelia-framework';
import { HttpClient } from 'aurelia-fetch-client';

@inject(HttpClient)
export class DataService {
  constructor(http) {
    this.http = http;
  }

  async getItems() {
    const response = await this.http.fetch('/api/items');
    return response.json();
  }
}

Routing

Aurelia's router maps URLs to components. Routes are configured in the application shell.

import { PLATFORM } from 'aurelia-framework';

export class App {
  configureRouter(config, router) {
    this.router = router;
    config.map([
      { route: '', name: 'home', moduleId: PLATFORM.moduleName('home') },
      { route: 'products', name: 'products', moduleId: PLATFORM.moduleName('products') },
      { route: 'products/:id', name: 'product-detail', moduleId: PLATFORM.moduleName('product-detail') }
    ]);
  }
}

Two-Way Binding

Aurelia supports two-way data binding with the .bind and .two-way commands.

<input value.bind="name" />
<p>Hello, ${name}!</p>

Value Converters

Value converters transform data for display, similar to pipes in Angular or helpers in Ember.

export class CurrencyFormatValueConverter {
  toView(value, symbol = '$') {
    return `${symbol}${value.toFixed(2)}`;
  }
}

Common Mistakes

1. Fighting Aurelia conventions. The framework relies on naming conventions. Custom configurations that bypass conventions create maintenance overhead.
2. Forgetting PLATFORM.moduleName in route configs. Without it, bundlers cannot trace dependencies. Routes break in production builds.
3. Using @inject when autoinjection works. Aurelia can auto-inject by type. Only use @inject when you need to specify the injection key.
4. Not cleaning up subscriptions. Components that subscribe to events or observables must unsubscribe in detached() to prevent memory leaks.
5. Overusing two-way binding. Two-way binding is convenient but can cause performance issues with complex objects. Use one-way binding when the child should not update the parent.

Practice Questions

1. What are the two parts of an Aurelia component?
2. How does Aurelia's convention system work?
3. What is the purpose of @inject?
4. How do you configure routes in Aurelia?
5. Challenge: Create a simple Aurelia application with two routes. One route shows a list of items. The other route shows a detail view for a selected item. Use dependency injection to share data between them.

FAQ

Mini Project

Create a new Aurelia application using the CLI (au new). Set up routes for home, about, and contact. Create a shared service via dependency injection. Use a value converter for date formatting. Verify the application builds and runs.

What's Next

Now that you understand Aurelia, install it in Aurelia Installation. Then learn about Aurelia App Configuration for project setup.