There are two ways to define dependencies which you would like injected into your objects in Aurelia:

1. Use the `inject` decorator
2. Use the static `inject` member

Using the static inject member has the benefit of not needing to import `inject` from the aurelia-framework:

import {Todo} from './todo';
import {Factory} from 'aurelia-dependency-injection';
import {EventAggregator} from 'aurelia-event-aggregator';

export class App {
  static inject = [EventAggregator, Factory.of(Todo)];
  constructor(aggregator, todoFactory) {
    this.bus = aggregator;
    this.completedTodos = 0;
    this.newTodoDesc = '';
    this.todos = [];
    this.todoFactory = todoFactory;
  }
}

 

Sometimes you want to create instances of objects with dependencies, which would normally have been created by the DI container within Aurelia.

Aurelia implements a Factory object which can be used to create instances out of the DI container on demand, for any of your objects:

import {Todo} from './todo';
import {Factory} from 'aurelia-dependency-injection';
import {EventAggregator} from 'aurelia-event-aggregator';

export class App {  

  static inject = [EventAggregator, Factory.of(Todo)];
  constructor(aggregator, todoFactory) {
    this.bus = aggregator;
    this.completedTodos = 0;
    this.newTodoDesc = '';
    this.todos = [];
    this.todoFactory = todoFactory;
  }

  addTodo() {
    if (!this.newTodoDesc) return;

    let todo = this.todoFactory();
    todo.description = this.newTodoDesc;
    this.todos.push(todo);
    this.newTodoDesc = '';
  }
}

 

In order to intercept or subscribe to changes in your model, you need to decorate the properties you’re interested in with observable and implement the convention based <propertyName>Changed function:

import {observable} from 'aurelia-framework';

export class Todo {
  @observable done = false;
  description = '';

  doneChanged(newVal, oldVal) {
    console.log(`done change from ${oldVal} to ${newVal}`);
  }
}