I reproduced a feature I’ve coded in a previous job. I did it to experiment ng2 and I’m too lazy to explain what it is for. Just notice that there are 3 differents types (group, segment, criterion) and groups can contain all types. You can add, remove and drag & drop all types at any groups/positions.

When I coded it first time few years ago, it was with ES5 and Angular1.
And with this new version using Typescript and Angular2, I see the giant gap, benefits are amazing:

  • Debugging before runtime (TS compilation)
  • Readability (ES6 modules, events and properties bindings syntax)
  • Performance (change detection following a tree structure)
  • Compatibility (no more $apply, thanks zone)
  • Maintainability (types helps a lot for refactor)
  • ..

Try it

I didn’t use immutable/observable data here but I’m gonna try it in a future post.

Note:

I used this syntax:

<div *ng-for="#m of group.children; #i = index">
  <div *ng-if="m.type == 'criterion'">..</div>
  <div *ng-if="m.type == 'segment'">..</div>
</div>

Instead of this one which avoid an unnecessary div node:

<template ng-for #m [ng-for-of]="group.children" #i="index">
  <div *ng-if="m.type == 'criterion'">..</div>
  <div *ng-if="m.type == 'segment'">..</div>
</template>

Due to this bug which is gonna be solved in the beta normally.

Beta is coming!

Currently angular2 is in alpha 50 and beta is finished at 78% (47 issues left).

This year I asked father christmas an angular2 beta, hope magic will operate! :)

If you have followed Angular 2 genesis, you maybe remember a video showing a component router early version demo with a component loading itself infinitely.

I reproduce it there:

This is useless but funny and it helps to understand the power of this new router.

In few times, we will see open source librairies coming with their own routes to plug where we want in our application.
That’s a big step forward!

It will be possible to have async route too for lazy loading. An other killer feature of this new router are auxiliary routes. It will be possible to have parallel routes with their own history (back / forward). Note that aux routes are not fully usable currently in alpha 45.

Here is the specific code:

import {Component, View} from 'angular2/angular2';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {LoopHome} from './LoopHome';


@RouteConfig([
    { path: '/', component: LoopHome, as: 'LooperHome' },
    { path: '/looper/...', component: LoopRoute, as: 'Looper' }
])
@Component({
  selector: 'loop-route'
})
@View({
  directives: [ROUTER_DIRECTIVES],
  template: `
    <div style="border: 1px solid #000; margin: 5px; padding: 5px;">
      <button [router-link]="['./Looper/LooperHome']">GO DEEPER</button>
      <button [router-link]="['./LooperHome']">GO LOOP HOME</button>
      <router-outlet></router-outlet>
    </div>
  `
})
export class LoopRoute {}

Can’t wait for the first beta!

I’m playing a lot with ng2 these times and it’s REALLY AWESOME!

Combining this new version and all last tool and specs like ES6, TypeScript, RxJS, SystemJS,.. bring Javascript development to the next level.

I will post others experiments soon.

Note:
You can now directly play with ng2 alpha inside Plunker following this: New > AngularJS > 2.0.X (TS / ES6 / ES5)