Aurelia: A Product of Durandal

Aurelia & Angular 2.0 Code Side by Side

Introduction

Aurelia

Aurelia


Aurelia & Angular 2.0 Code Side by Side

Posted by Aurelia on .
Featured

Aurelia & Angular 2.0 Code Side by Side

Posted by Aurelia on .

Angular 2.0

app.js
import {Component, Template} from 'angular2/angular2';

@Component({selector: 'my-app'})
@Template({url: 'app.html'})
class MyApp {  
  constructor() {
    this.firstName = 'John';
    this.lastName = 'Doe';
    this.updateFullname();
  }
  updateFullname(){
    this.fullName = this.firstName + " " + this.lastName;
  }
  firstNameChanged($event, first){
    this.firstName = first.value;
    this.updateFullname();
  }
  lastNameChanged($event, last){
    this.lastName = last.value;
    this.updateFullname();
  }
}

Aurelia

app.js
export class MyApp{  
  constructor(){
    this.firstName = 'John';
    this.lastName = 'Doe';
  }
  get fullName(){
    return `${this.firstName} ${this.lastName}`;
  }
}

Note: Additional code is needed for Angular 2.0 if ES6/ES5/CoffeeScript is used rather than AtScript since annotations must be "manually transpiled" by the developer.
app.html
First Name:  
<input type="text" [value]="firstName" #first (change)="firstNameChanged($event, first)" (input)="firstNameChanged($event, first)">  
Last Name:  
<input type="text" [value]="lastName" #last (change)="lastNameChanged($event, last)" (input)="lastNameChanged($event, last)">  
Full Name: {{fullName}}  
app.html
<template>  
  First Name:
  <input type="text" value.bind="firstName">
  Last Name:
  <input type="text" value.bind="lastName">
  Full Name: ${fullName}
</template>  

Note: Both the change and input events are needed in the Angular 2.0 example in order to have correct functionality across all input scenarios and browsers.

To see Angular 2.0's alternative binding mechanism, Forms Model, compared to Aurelia, see Part 2 of this comparison.

Aurelia

Aurelia

View Comments...