本文是從angular.io官網練習的栗子，其中有一些小技巧，文件除啟動文件app.ts其他都放在app.ts平級目錄route-app下
1.啟動文件app.ts,有兩份分別說下它們的區(qū)別
<pre>
import {bootstrap} from "angular2/platform/browser";
import {MyComponent} from './MyComponent';
bootstrap(MyComponent);
</pre>第一份比較簡單,直接導入MyComponent組件啟動就可以了，bootstrap中沒有注入其他的依賴項，當然也可以在此注入一個ROUTER_PROVIDERS，但官網建議這個依賴在用到的具體路由處提供；這樣存在一個問題，當route到子頁面后刷新頁面重新載入不了，直接404，所以第二種方法可以解決這個問題</br>
<pre>
import {bootstrap} from "angular2/platform/browser";
import {LocationStrategy,HashLocationStrategy,ROUTER_PROVIDERS}
from "angular2/router"import {provide} from "angular2/core";
import {MyComponent} from './MyComponent';
bootstrap(MyComponent,[ROUTER_PROVIDERS,
provide(LocationStrategy, {useClass: HashLocationStrategy})]);
</pre>第二份中在bootstrap()中注入了兩個依賴，ROUTER_PROVIDERS是路由必須的組件，provide這個是將LocationStrategy提供HashLocationStrategy,用以解決路由路徑后刷新頁面用hash重新載入當前頁面。</br>
2.route.component.ts主路由控件文件，代碼如下：</br>
<pre>
import {Component} from 'angular2/core';
import {RouteConfig,ROUTER_PROVIDERS,ROUTER_DIRECTIVES} from 'angular2/router';
//導入全部要用到的子組件
import {HomeApp} from './home.component';
import {Article} from './article.component';</br>
@Component({
selector: 'route-test', //在主頁面需要添加此標簽
template: <code> //此處有``模板語法，反斜杠轉義有問題 <div class="container"> <h1>Route Example</h1> <nav> <a [routerLink]="['HomePage']">Home</a> <a [routerLink]="['Article']">Article</a> </nav> <router-outlet></router-outlet> </div>, </code>
directives: [ROUTER_DIRECTIVES,HomeApp,Article],
//如果使用app.ts第一種方法，此處可以去掉自定義的組件（HomeApp,Article）;
//使用app.ts中第二種方法時必須在此提供自定義組件，否則報錯
//providers: [ROUTER_PROVIDERS]}) //建議在此處添加route依賴，當然也可以在啟動項bootstrap注入
@RouteConfig([
{path: '/home', name: 'HomePage', component: HomeApp},
{path: '/article', name: 'Article', component: Article, useAsDefault: true}
])
export class RouteApp { }
</pre>
a鏈接中routerLink的值與RouteConfig中name對應，name可不與component同名，此處我的理解是點擊時routerLink傳遞name值匹配RouterConfig中的name，在根據(jù)對用的component選軟組件；path值貌似可以任意寫，會對應反映在瀏覽器搜索框中。
3.HomeApp和Article子組件，因為是測試，寫的很簡單
<pre>
import {Component} from 'angular2/core';
@Component({ selector: 'home', templateUrl: 'hello6/app/route-test/home.html'})
export class HomeApp {}
</pre>
<pre>
import {Component} from 'angular2/core';
@Component({ selector: 'home', templateUrl: 'hello6/app/route-test/home.html'})
export class HomeApp {}
</pre>
template隨便寫點html文件就可以，只是測試路由是否正確；
這里官方其實是推薦直接用template和styles將模板和樣式寫在組件里面，這樣導入組件后不用管路徑，但是如果將模板和樣式分開寫在單獨文件夾時，根據(jù)組件放的路徑不同，templateUrl和stylesUrl是要更改的。
4 運行測試，這個可以直接放在官網中quickstart中運行，index.html的代碼如下：
<pre>
<html>
<head>
<title>Angular 2 QuickStart</title>
<link rel="stylesheet">
<!-- 1. Load libraries -->
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script> //這個必須加，是router模塊，不加報各種錯誤
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
dist: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('dist/app')
.then(null, console.error.bind(console));
</script>
<!-- <base href="/"> --> //這個我在另一個項目文件中不加報錯，no Base_href什么的忘了，但在quickstart中可不加
</head>
<body>
<my-app>Loading...</my-app>
<hello-world></hello-world>
<work-form></work-form>
<route-test></route-test> //不要忘了加自定義標簽哦
</body>
</html>
</pre>
