The Eisenberg Effect

Aurelia & Angular 2.0 Code Side by Side

Introduction

Rob Eisenberg

Rob Eisenberg

Sr. Program Manager on docs.microsoft.com. Creator of Caliburn, Caliburn.Micro, Durandal and Aurelia. My opinions are my own.


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.

Rob Eisenberg

Rob Eisenberg

http://www.bluespire.com

Sr. Program Manager on docs.microsoft.com. Creator of Caliburn, Caliburn.Micro, Durandal and Aurelia. My opinions are my own.

View Comments...