本文是从angular.io官网练习的栗子，其中有一些小技巧，文件除启动文件app.ts其他都放在app.ts平级目录route-app下
1.启动文件app.ts,有两份分别说下它们的区别
<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，在根据对用的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将模板和样式写在组件里面，这样导入组件后不用管路径，但是如果将模板和样式分开写在单独文件夹时，根据组件放的路径不同，templateUrl和stylesUrl是要更改的。
4 运行测试，这个可以直接放在官网中quickstart中运行，index.html的代码如下：
<pre>
<html>
<head>
<title>Angular 2 QuickStart</title>
<link href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.css" 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>
