Show Menu

Aurelia Getting Started Cheat Sheet by

Aurelia JavaScript Client Framework

Quick Getting Started

1. npm install -g gulp
2. npm install -g jspm
3. jspm registry config github
5. Change direct­ories to skeleton directory
6. npm install
7. jspm install -y
8. gulp watch
Make sure to have node installed first

Templating Examples

<m­ark­dow­n-e­ditor value.o­ne­-wa­y="m­ark­dow­n"><­/ma­rkd­own­-ed­ito­r>
<m­ark­dow­n-e­ditor value.t­wo­-wa­y="m­ark­dow­n"><­/ma­rkd­own­-ed­ito­r>
<input type="t­ext­" value.b­in­d="f­irs­tNa­me"> <a href.b­ind­="ur­l">A­ure­lia­</a­>
<b­utton click.t­ri­gge­r="s­ayH­ell­o()­"­>Say Hello<­/bu­tto­n>
<b­utton click.d­el­ega­te=­"­say­Hel­lo(­)">Say Hello<­/bu­tto­n>
<div touch.c­al­l="s­ayH­ell­o()­"­>Say Hello<­/bu­tto­n>
string interp­olation
<div class=­"dot ${color} ${isHappy ? 'green' : 'red'}­"­></­div­>
<input type="t­ext­" ref="na­me"> ${­lue}
<o­ption­r="color of colors­" value.b­in­d="c­olo­r">$­{co­lor­}</­opt­ion­>
inner html
<div innerh­­nd=­"­htm­lPr­ope­rty­"­></­div> <div innerh­tml­="${­htm­lPr­ope­rty­}"><­/di­v>
<div textco­nte­nt.b­in­d="s­tri­ngP­rop­ert­y"><­/di­v> <div textco­nte­nt=­"­${s­tri­ngP­rop­ert­y}">­</d­iv>
<div style.b­in­d="s­tyl­eSt­rin­g"><­/di­v> <div style.b­in­d="s­tyl­eOb­jec­t"><­/di­v>

Template Example Code


    <form role="form" submit.delegate="welcome()">
      <div class="form-group">
        <label for="fn">First Name</label>
        <input type="text" value.bind="firstName" class="form-control" id="fn" placeholder="first name">
      <div class="form-group">
        <label for="ln">Last Name</label>
        <input type="text" value.bind="lastName" class="form-control" id="ln" placeholder="last name">
      <div class="form-group">
        <label>Full Name</label>
        <p class="help-block">${fullName | upper}</p>
      <button type="submit" class="btn btn-default">Submit</button>
All templates must start with <te­mpl­ate> and end with </t­emp­lat­e>

HTTP Client Methods

jspm install aureli­a-h­ttp­-client
Custom configure individual requests
HTTP Delete request
HTTP Get Request
HTTP Head Request
jsonp(uri, callba­ckP­ara­met­erN­ame­='j­son­cal­lback')
Sends JSONPR­eqe­ust­Message
put(uri, content)
HTTP Put Request
patch(uri, content)
HTTP Patch Request
post(uri, content)
HTTP Post Request
The result of sending a message is a promise, it has the following proper­ties. response, respon­seType, content, headers, status­Code, status­Text, isSuccess, reviver, reques­tMe­sssage

HTTP Client Example (Flickr)

import {HttpClient} from 'aurelia-http-client';

var url = '';

export class Flickr{
  static inject() { return [HttpClient]; }
    this.heading = 'Flickr';
    this.images = [];
    this.http = http;

    return this.http.jsonp(url).then(response => {
      this.images = response.content.items;

    return confirm('Are you sure you want to leave?');
jsonp requet returns a promise

Extending HTML Behaviours

Attached Beahviours
Adds new behavior or functi­onality to existing HTML element
Custom Elements
New tags to HTML Markup
Template Contro­llers
Convert Dom into inert HTML template

Behavior Examples

//Attached Behavior (jquery)
<div show.bind="isSaving" class="spinner"></div>
import {Behavior} from 'aurelia-templating';

export class Show {
  static metadata(){
    return Behavior
      .withProperty('value', 'valueChanged', 'show');

//Custom Element
    <require from="./say-hello"></require>

    <input type="text" ref="name">
    <say-hello to.bind="name.value"></say-hello>
import {Behavior} from 'aurelia-templating';

export class SayHello {
  static metadata(){
    return Behavior

    alert('Hello ${}!');

//Template Controllers

li repeat.for="customer of customers">${customer.fullName}</li>

Routing Activation Lifecycle

canAct­iva­te(­params, queryS­tring, routeC­onfig)
Hook to be navigated too
activa­te(­params, queryS­tring, routeC­onfig)
Custom logic before view-model is displayed
Router can navigate from view?
Logic as you are being navigated from

Router Example

import {Router} from 'aurelia-router';
import bootstrap from 'bootstrap';

export class App {
  static inject() { return [Router]; }
  constructor(router) {
    this.router = router;
    this.router.configure(config => {
      config.title = 'Aurelia';[
        { route: ['','welcome'], moduleId: './welcome', nav: true, title:'Welcome' },
        { route: 'flickr', moduleId: './flickr', nav: true },
        { route: 'child-router', moduleId: './child-router', nav: true, title:'Child Router' }

DI Example

import {HttpClient} from 'aurelia-http-client';

export class CustomerDetail{
    static inject() { return [HttpClient]; }
        this.http = http;

Help Us Go Positive!

We offset our carbon usage with Ecologi. Click the link below to help us!

We offset our carbon footprint via Ecologi


Great cheatsheet! Lacks only one "detail" (except having Node.js installed): If you are running MS Windows, you need to have Python 2.7.10 installed too.

i have .NET api working with Aurelia

<compose> and <router-view> could do with being added, as could some reference to replace-part.

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          More Cheat Sheets by ErikCH

          Ember Testing Cheat Sheet Cheat Sheet