Angular路由（Router）的使用

1 import Router

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

2 setting your RouteConfig

1 2 3 4 5

@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]

1 2 3 4

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

4 in the UI

1 2 3 4 5 6 7 8

<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

1	bootstrap(App, [routerInjectables, httpInjectables]);

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

/// <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]);