Aurelia & Angular 2.0 Code Side by Side

Posted by AureliaEffect on March 16, 2015

Showing the same code for the same tasks, side-by-side in Aurelia and Angular 2.0.

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.