Show Menu
Cheatography

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

.one-way
<ma­rkd­own­-editor value.o­ne­-wa­y="m­ark­dow­n"><­/ma­rkd­own­-ed­ito­r>
.two-way
<ma­rkd­own­-editor value.t­wo­-wa­y="m­ark­dow­n"><­/ma­rkd­own­-ed­ito­r>
.bind
<input type="t­ext­" value.b­in­d="f­irs­tNa­me"> <a href.b­ind­="ur­l">A­ure­lia­</a>
trigger
<button click.t­ri­gge­r="s­ayH­ell­o()­"­>Say Hello<­/bu­tto­n>
delegate
<button click.d­el­ega­te=­"­say­Hel­lo(­)">Say Hello<­/bu­tto­n>
call
<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>
ref
<input type="t­ext­" ref="na­me"> ${name.value}
select
<option repeat.fo­r="color of colors­" value.b­in­d="c­olo­r">$­{co­lor­}</­opt­ion>
inner html
<div innerh­tml.bi­nd=­"­htm­lPr­ope­rty­"­></­div> <div innerh­tml­="${­htm­lPr­ope­rty­}"><­/di­v>
textCo­ntent
<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>
style
<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

<template>
  <section>
    <h2>${heading}</h2>

    <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>
      <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>
      <div class="form-group">
        <label>Full Name</label>
        <p class="help-block">${fullName | upper}</p>
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </section>
</template>
All templates must start with <te­mpl­ate> and end with </t­emp­lat­e>
 

HTTP Client Methods

Install
jspm install aureli­a-h­ttp­-client
create­Req­ues­t(uri)
Custom configure individual requests
delete­(uri)
HTTP Delete request
get(uri)
HTTP Get Request
head(uri)
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 = 'http://api.flickr.com/services/feeds/photos_public.gne?tags=rainier&tagmode=any&format=json';

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

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

  canDeactivate(){
    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
      .attachedBehavior('show')
      .withProperty('value', 'valueChanged', 'show');
  }

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

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

export class SayHello {
  static metadata(){
    return Behavior
      .customElement('say-hello')
      .withProperty('to');
  }

  speak(){
    alert('Hello ${this.to}!');
  }
}

//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
canDea­cti­vate()
Router can navigate from view?
deacti­vate()
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';
      config.map([
        { 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]; }
    constructor(http){
        this.http = http;
    }
}
 

Comments

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