Angular 2<Beta>: The good parts

For the last week or so, I’ve been happily familiarizing myself with the recently released Beta version of Angular 2.

iOS game prototype build with Angular 2

So far it’s been good. I used Angular 2 to create a prototype for an iOS game. Here are a few of my thoughts based on the exercise:

1.Template Syntax: The new syntax isn’t a pain to use! It’s different, yes. But that’s all it is — different.

<value-pane [building]="building" (click)="onGrow(building)">
cost: {{building.growthCost}}
</value-pane>

2. Data-binding: By default AngularJS 1.x used two-way data binding, this was changed to one-way, top-down data binding. This takes a bit of getting used to. Two-way data binding can still be achieved by using the [()] syntax.

<stats-pane [(player)]="building.player"></stats-pane>

3. $scope.apply(): It’s gone! While there are valid use-cases (timers, async changes, etc.) where you will need to notify Angular that a model has changed, for most instances this was just a result of poor application design.

For the edge cases where you need to notify angular, you can use ngZone like this:

this._ngZone.runOutsideAngular(()=> {
this._town.constructBuilding(buildingName, (x:buildings.Building)=> {
this._ngZone.run(() => {
this.syncTemplateVariables();
});
});
});

ngZone has several other great uses, so do check out the links below.

4. 
Creating Directives: This is now significantly easier!

@Component({
selector: 'new-building-selector',
template: `<screen>...</screen>`,
directives: [ScreenComponent],
providers: [PlayerService, BuildingService, TownService],
inputs:['variables'],
outputs: ['clicked']
})
export class NewBuildingSelectorComponent implements OnInit {
...
}

@Component({…}) annotation: This makes crafting directives much easier. Additionally, with the new component model, you can easily take advantage of object inheritance.

ngTransclude: This too is gone! While we are on the subject, the new router is awesome! Now you can have routes within routes — see where I am going?

Testing is supposed to be easier with OnInit — I couldn’t verify this as I struggled to get Karma to work.

Dependency Injection: The syntax is better.


There are a few things that still need work, but it’s beta code, so I’m sure these will be rectified soon enough.

Note: Background art by Mike Bear: http://mikebear.blogspot.co.za/2014/02/game-backgrounds.html

Cheers

-harold