Show Menu

Aurelia Getting Started Cheat Sheet by

Aurelia JavaScript Client Framework
aurelia

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
<m­ark­dow­n-e­ditor value.o­ne­-wa­y="m­ark­dow­n"><­/ma­rkd­own­-ed­ito­r>
.two-way
<m­ark­dow­n-e­ditor 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
<b­utton click.t­ri­gge­r="s­ayH­ell­o()­"­>Say Hello<­/bu­tto­n>
delegate
<b­utton 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.va­lue}
select
<o­ption 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;
    }
}

Download the Aurelia Getting Started Cheat Sheet

3 Pages
//media.cheatography.com/storage/thumb/erikch_aurelia-getting-started.750.jpg

PDF (recommended)

Alternative Downloads

Share This Cheat Sheet!

Like this cheat sheet? Check out our sponsors!

Readable.io is a collection of tools to make your writing better. More readable content means higher conversion rates and better reader engagement. Measure website and document readability, measure keyword density and more!

Click Here To Get Started!

 

Comments

Eddie Eddie, 09:56 17 Nov 15

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.

Helder Helder, 21:51 3 Dec 15

i have .NET api working with Aurelia

Richard Richard, 12:42 24 Dec 15

<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