[Angular2] 添加router(路由)配置信息

悟箜

既然Angular是单页应用的框架，那么路由（router）自然就是非常重要的一环，路由控制着整个单页application的内容切换。
SO～～我们今天就来简单的看一下Angular2中的路由是怎么使用的～（请注意目前Angular2的router模块还处于beta版本，但是并不影响我们今天的展示，哈哈～）

按照惯例我们先来看看跟上次的演示相比([Angular2]创建简单的Angular2 Components)我们项目的目录变动情况：

• 我们主要添加了router 文件夹（存放route配置信息），Navbar component(导航栏组件), 引入‘@angular／router’模块，再有就是Home跟About两个component了，就只有这些～
  

       屏幕快照 2016-07-30 下午2.41.45.png (199.41 KB, 下载次数: 0)

2016-7-30 14:44 上传

点击文件名下载附件          屏幕快照 2016-07-30 下午2.44.03.png (116.44 KB, 下载次数: 0)

2016-7-30 14:44 上传

点击文件名下载附件   

• 我们来看看几个主要的配置信息
  

       package.json主要引入‘@angular／router’模块，还有就是start server加了入口文件(为什么呢？？动手试试看看你能不能发现这里的问题)

1. {
   
2.   "name": "angular2-quick-start",
   
3.   "version": "0.0.1",
   
4.   "description": "This is one sample for Angular2 quick start",
   
5.   "scripts": {
   
6.     "test": "echo "Error: no test specified" && exit 1",
   
7. "start": "live-server --port=22222 --entry-file=index.html"
   
8.   },
   
9.   "author": "Wu Kong",
   
10.   "dependencies": {
    
11.     "@angular/common": "2.0.0-rc.4",
    
12.     "@angular/compiler": "2.0.0-rc.4",
    
13.     "@angular/core": "2.0.0-rc.4",
    
14.     "@angular/platform-browser": "2.0.0-rc.4",
    
15.     "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    
16. "@angular/router": "3.0.0-beta.2",
    
17.    
    
18.     "reflect-metadata": "^0.1.3",
    
19.     "rxjs": "5.0.0-beta.6",
    
20.     "systemjs": "^0.19.31",
    
21.     "zone.js": "^0.6.12",
    
22.     "es6-shim": "0.35.1"
    
23.   },
    
24.   "devDependencies": {
    
25.     "live-server": "^0.8.2",
    
26.     "typescript": "^1.8.10"
    
27.   }
    
28. }

复制代码

systemjs.config.js我们需要为新引入的模块添加识别路径，要不然systemJS不知道去哪加载哦～

1. System.config({
   
2.     transpiler: 'typescript', /** 编译typescript*/
   
3.     typescriptOptions: {
   
4.         emitDecoratorMetadata: true
   
5.     },
   
6.     map: {
   
7.         'app': 'app', /** 指定代码所在路径*/
   
8.         'rxjs': 'node_modules/rxjs',
   
9.         '@angular': 'node_modules/@angular'/** 指定Angular2所在路径*/
   
10.     },
    
11.     packages: {/** 指定入口文件！！*/
    
12.         'app': {
    
13.             main: 'main.ts',
    
14.             defaultExtension: 'ts'
    
15.         },
    
16.         'rxjs': {
    
17.             main: 'index.js'
    
18.         },
    
19.         '@angular/core': {
    
20.             main: 'index.js'
    
21.         },
    
22.         '@angular/common': {
    
23.             main: 'index.js'
    
24.         },
    
25.         '@angular/compiler': {
    
26.             main: 'index.js'
    
27.         },
    
28.         '@angular/platform-browser': {
    
29.             main: 'index.js'
    
30.         },
    
31.         '@angular/platform-browser-dynamic': {
    
32.             main: 'index.js'
    
33.         },
    
34.      '@angular/router': {
    
35.             main: 'index.js'
    
36.         }
    
37. }
    
38. });
    

复制代码

• 最最最重要的当然就是创建route的配置信息了，我们这里建了router文件夹存放配置信息，直接上代码：
  

     app.routes.ts, 创建RouteConfig的const，然后provide出去

1. export const routes: RouterConfig = [
   
2.     { path: '', component: HomeComponent },
   
3.     { path: 'about', component: AboutComponent }
   
4. ];
   
5. 
   
6. export const APP_ROUTER_PROVIDERS = [
   
7.     provideRouter(routes)
   
8. ];

复制代码

然后我们需要把上面provide出来的配置信息注入到启动文件里，也就是main.ts

1. bootstrap(AppComponent, [
   
2. APP_ROUTER_PROVIDERS
   
3. ]).catch(err => console.error(err));

复制代码

OK~就这样我们就给我们的Angular2 application配置好了路由信息啦～～～

• 最后我们只需要添加导航栏到我们的主页面上，也就是我们的Navbar Component。并且我们需要高速主页面当我们点击导航栏链接的时候应该显示哪一个component
  

     首先我们新建一个Navbarcomponent，跟之前不一样的是我们需要引入router 的指令来识别我们的导航链接(routerLink)

1. @Component({
   
2.     moduleId: 'app/common/components/navbar/',
   
3.     selector: 'wk-navbar',
   
4.     templateUrl: 'navbar.html',
   
5.     styleUrls: ['navbar.css'],
   
6. directives: [ROUTER_DIRECTIVES]
   
7. })
   
8. export class NavbarComponent {}

复制代码

template：添加两个link

1. <div class="navbar">
   
2.     <ul>
   
3.         <li><a [routerLink]="['']" [routerLinkActiveOptions]="{exact: true}" routerLinkActive="active">Home</a></li>
   
4.         <li><a [routerLink]="['about']" routerLinkActive="active">About</a></li>
   
5.     </ul>
   
6. </div>

复制代码

导航栏工作完成，接下来我们就需要告诉我们的app.component该把我们的内容加载到哪里了：

上一次我们已经提到过<main>里是放我们的内容的，那我们其实只需要把<router-outlet>这个router指令加到我们的main标签里就可以了。这样，当你点击不同的link的时候router－outlet标签就会切换相应不同的component啦～～同样我们也是需要引入router的指令到我们的app.component里面。

1. @Component({
   
2.   selector: 'wk-app',
   
3.   template: `<wk-header></wk-header>
   
4.                 <main>
   
5. <router-outlet></router-outlet>
   
6.                 </main>
   
7.             <wk-footer></wk-footer>`,
   
8.   styles: [`
   
9.       main {
   
10.           height: 400px;
    
11.           text-align: center;
    
12.           }
    
13. `],
    
14.   directives: [ROUTER_DIRECTIVES,HeaderComponent, FooterComponent]
    
15. })
    
16. export default class AppComponent { }

复制代码

通过上面这几步是不是瞬间觉得单页应用的路由其实挺简单的～～哈哈～

最后按照惯例我们，附上我们的战利品：
屏幕快照 2016-07-30 下午3.19.28.png (89.17 KB, 下载次数: 1)

2016-7-30 15:19 上传

点击文件名下载附件

悟箜

代码已经整理并上传到Github，地址如下：https://github.com/WuKongW/Angular2_POC