Featured
Aurelia & Angular 2.0 Code Side by Side
Posted by Rob Eisenberg on .Angular 2.0
app.jsimport {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.jsexport class MyApp{
constructor(){
this.firstName = 'John';
this.lastName = 'Doe';
}
get fullName(){
return `${this.firstName} ${this.lastName}`;
}
}
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.
View Comments...
