The ASP.NET Core project with Angular 2 and Aurelia from last week’s post now has feature parity between Angular 2 and Aurelia. With the applications in sync now is a good time to compare syntax for basic operations between the two frameworks.
Templates
| Function | Angular 2 | Aurelia |
|---|---|---|
| Binding | {{title}} | ${title} |
| Input Binding | <input [(ngModel)]="contact.Name"> | <input value.bind="contact.Name"> |
| Loops | *ngFor="#contact of contacts" | repeat.for="contact of contacts" |
| Events | (click)="onSelect(contact)" | click.delegate="$parent.select(contact)" |
| Conditional Elements | <div *ngIf="contact"> | <div if.bind="contact"> |
| Conditional CSS | [class.selected]="contact === selectedContact" | class="${contact === $parent.selectedContact ? 'selected' : "}" |
| Component Rendering | <contact-detail [contact]="selectedContact"></contact-detail> | <contact-detail contact.bind="selectedContact"></contact-detail> |
Component Lifecycle Hooks
The hooks provided by the frameworks don’t exactly line up, but the following is a list with a list of hooks and descriptions taken for the docs of both frameworks. The hooks are listed in the order they are executed in the component’s lifecycle. For more details look at the docs for Angular 2 and Aurelia (search for “The Component Lifecycle”).
Angular 2
| ngOnChanges | Called when an input or output binding value changes |
| ngOnInit | After the first ngOnChanges |
| ngDoCheck | Developer's custom change detection |
| ngAfterContentInit | After component content initialized |
| ngAfterContentChecked | After every check of component content |
| ngAfterViewInit | After component's view(s) are initialized |
| ngAfterViewChecked | After every check of a component's view(s) |
| ngOnDestroy | Just before the directive is destroyed |
Aurelia
| constructor() | The view-model's constructor is called first. |
| created(owningView: View, myView: View) | If the view-model implements the created callback it is invoked next. At this point in time, the view has also been created and both the view-model and the view are connected to their controller. The created callback will receive the instance of the "owningView". This is the view that the component is declared inside of. If the component itself has a view, this will be passed second. |
| bind(bindingContext: Object, overrideContext: Object) | Databinding is then activated on the view and view-model. If the view-model has a bind callback, it will be invoked at this time. The "binding context" to which the component is being bound will be passed first. An "override context" will be passed second. The override context contains information used to traverse the parent hierarchy and can also be used to add any contextual properties that the component wants to add. |
| attached() | Next, the component is attached to the DOM (in document). If the view-model has an attached callback, it will be invoked at this time. |
| detached() | At some point in the future, the component may be removed from the DOM. If/When this happens, and if the view-model has a detached callback, this is when it will be invoked. |
| unbind() | After a component is detached, it's usually unbound. If your view-model has the unbind callback, it will be invoked during this process. |
The Winner?
Both Angular 2 and Aurelia continue to improve as they progress through their beta stages. Aurelia seems to be more stable at this point with little to no breaking changes since they entered beta. Angular 2 will have an initial head start with the inertia of Angular 1 which will make it an easier sell at some organizations.
As is evident by the comparison above these frameworks are taking different approaches. There is no clear winner and thankfully there doesn’t have to be. Both frameworks will be successful.
At this point in time I would be comfortable going live with a project on Aurelia. Angular 2 is making huge steps forward, but feels like it need a little more time to bake before I would want to use it in a production application.
If you had an application going live soon which would you chose?