Durandal

Aurelia & Angular 2.0 Code Side by Side

Introduction

user

Rob Eisenberg


Aurelia & Angular 2.0 Code Side by Side

Posted by Rob Eisenberg on .
Featured

Aurelia & Angular 2.0 Code Side by Side

Posted by Rob Eisenberg 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.

user

Rob Eisenberg