app.component.ts

import {Component} from  'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';

import {ViewOneComponent} from "./viewone.component";
import {ViewTwoComponent} from "./viewtwo.component";
import {ChildStatesRootComponent} from "./child-states/child-states-root.component";

@Component({
   selector : 'my-app',
   template : `<nav>
                 <a [routerLink]="['ViewOne']">View One</a>
                 <a [routerLink]="['ViewTwo', { routeParameter : '' }]">View Two</a>
                 <a [routerLink]="['ChildStatesRoot']">Child States Root</a>
                 <a [routerLink]="['ChildStatesRoot', { rootParam : 'rootParam' }, 'ChildStateTwo', { childParam : 'childParamValue'} ]">Go to Child Two Directly</a>
               </nav>
               <router-outlet></router-outlet>`,
   directives : ROUTER_DIRECTIVES
})

@RouteConfig([
 {
   path : '/view-one',
   name : 'ViewOne',
   component : ViewOneComponent,
   useAsDefault : true
 },
 {
   path : '/view-two/:routeParameter',
   name : 'ViewTwo',
   component: ViewTwoComponent
 },
 {
   path : '/child-states/...',
   name : 'ChildStatesRoot',
   component : ChildStatesRootComponent
 }])

export class AppComponent {}