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