The Eisenberg Effect

Aurelia & Angular 2.0 Code Side by Side

Introduction

Rob Eisenberg

Rob Eisenberg

Sr. PM Manager at Microsoft leading the APEX Online Experience Platform team. Creator of Aurelia. 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. PM Manager at Microsoft leading the APEX Online Experience Platform team. Creator of Aurelia. Opinions are my own.

View Comments...