Quick Getting Started1. npm install -g gulp | 2. npm install -g jspm | 3. jspm registry config github | | 5. Change directories to skeleton directory | 6. npm install | 7. jspm install -y | 8. gulp watch |
Make sure to have node installed first Templating Examples.one-way | <markdown-editor value.one-way="markdown"></markdown-editor>
| .two-way | <markdown-editor value.two-way="markdown"></markdown-editor>
| .bind | <input type="text" value.bind="firstName"> <a href.bind="url">Aurelia</a>
| trigger | <button click.trigger="sayHello()">Say Hello</button>
| delegate | <button click.delegate="sayHello()">Say Hello</button>
| call | <div touch.call="sayHello()">Say Hello</button>
| string interpolation | <div class="dot ${color} ${isHappy ? 'green' : 'red'}"></div>
| ref | <input type="text" ref="name"> ${name.value}
| select | <option repeat.for="color of colors" value.bind="color">${color}</option>
| inner html | <div innerhtml.bind="htmlProperty"></div> <div innerhtml="${htmlProperty}"></div>
| textContent | <div textcontent.bind="stringProperty"></div> <div textcontent="${stringProperty}"></div>
| style | <div style.bind="styleString"></div> <div style.bind="styleObject"></div>
|
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 <template> and end with </template> | | HTTP Client MethodsInstall | jspm install aurelia-http-client | createRequest(uri) | Custom configure individual requests | delete(uri) | HTTP Delete request | get(uri) | HTTP Get Request | head(uri) | HTTP Head Request | jsonp(uri, callbackParameterName='jsoncallback') | Sends JSONPReqeustMessage | 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 properties. response, responseType, content, headers, statusCode, statusText, isSuccess, reviver, requestMesssage 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 BehavioursAttached Beahviours | Adds new behavior or functionality to existing HTML element | Custom Elements | New tags to HTML Markup | Template Controllers | 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 LifecyclecanActivate(params, queryString, routeConfig) | Hook to be navigated too | activate(params, queryString, routeConfig) | Custom logic before view-model is displayed | canDeactivate() | Router can navigate from view? | deactivate() | Logic as you are being navigated from |
Router Exampleimport {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 Exampleimport {HttpClient} from 'aurelia-http-client';
export class CustomerDetail{
static inject() { return [HttpClient]; }
constructor(http){
this.http = http;
}
} |
|
Created By
www.ProgramWithErik.com
Metadata
Favourited By
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
More Cheat Sheets by ErikCH