Angular2 Router

1 import Router

import {RouteConfig, RouterOutlet, RouterLink, routerInjectables} from 'angular2/router';

2 setting your RouteConfig

@RouteConfig([
    {path: '/', component: List, as: 'list'},
    {path: '/about', component: Add, as: 'add'},
    {path: '/help', component: Help, as: 'help'}
])

3 inject your router directives into view directives for the directive [router-link] and [router-outlet]

@View({
    templateUrl: './app.html?v=<%= VERSION %>',
    directives: [RouterOutlet, RouterLink]
})

4 in the UI

<section class="sample-app-content">
  <nav>
    <a [router-link]="['/list']">List</a>
    <a [router-link]="['/add']">Add</a>
    <a [router-link]="['/help']">Help</a>
  </nav>
  <router-outlet></router-outlet>
</section>

　　

5 inject your router into app

bootstrap(App, [routerInjectables, httpInjectables]);

6 the whole page code including http demo(app.ts)

/// <reference path="../typings/tsd.d.ts" />
import {Component, View, bootstrap, NgFor} from 'angular2/angular2';
import {RouteConfig, RouterOutlet, RouterLink, routerInjectables} from 'angular2/router';
import {httpInjectables, Http} from 'angular2/http';
import {Inject} from 'angular2/di';

import {List} from './components/list/list';
import {Add} from './components/add/add';

import {Help} from './components/help/help';
import {FriendList} from './services/FriendList';

@Component({
    selector: 'app',
    viewInjector: [FriendList, httpInjectables]
})
@RouteConfig([
    {path: '/', component: List, as: 'list'},
    {path: '/about', component: Add, as: 'add'},
    {path: '/help', component: Help, as: 'help'}
])
@View({
    templateUrl: './app.html?v=<%= VERSION %>',
    directives: [RouterOutlet, RouterLink]
})
class App {
    http:Http;
    status:int;

    constructor(@Inject(Http) http) {
        this.http = http;

        //this.http.request('data/test.json').observer(res => this.dataList = res.json());
        this.http.get('test.json').toRx().subscribe((res:Response) => {
            this.status = res.status;
        });
    }
}


bootstrap(App, [routerInjectables, httpInjectables]);