标签:
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]);
标签:
原文地址:http://www.cnblogs.com/lihaozhou/p/4671935.html