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

<ma­rkd­own­-editor value.o­ne­-wa­y="m­ark­dow­n"><­/ma­rkd­own­-ed­ito­r>
<ma­rkd­own­-editor 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>
<button click.t­ri­gge­r="s­ayH­ell­o()­"­>Say Hello<­/bu­tto­n>
<button 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"> ${name.value}
<option­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;


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