1.开发环境：

  1） 安装VS code编译器

  2） 安装Node js

2.新建package.json  

 1 {
 2   "name": "angular2-route",
 3   "version": "1.0.0",
 4   "scripts": {
 5     "tsc": "tsc",
 6     "tsc:w": "tsc -w",
 7     "lite": "lite-server",
 8     "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
 9   },
10   "license": "ISC",
11   "dependencies": {
12     "@angular/common": "2.0.0-rc.4",
13     "@angular/compiler": "2.0.0-rc.4",
14     "@angular/core": "2.0.0-rc.4",
15     "@angular/http": "2.0.0-rc.4",
16     "@angular/platform-browser": "2.0.0-rc.4",
17     "@angular/platform-browser-dynamic": "2.0.0-rc.4",
18     "@angular/router-deprecated": "2.0.0-rc.2",
19     "bootstrap": "^3.3.5",
20     "es-module-loader": "^1.3.5",
21     "es6-shim": "^0.35.0",
22     "immutable": "^3.7.6",
23     "markdown": "^0.5.0",
24     "reflect-metadata": "0.1.2",
25     "rxjs": "5.0.0-beta.6",
26     "systemjs": "0.19.41",
27     "zone.js": "^0.6.12"
28   },
29   "devDependencies": {
30      "concurrently": "^3.1.0",
31     "lite-server": "^2.2.2",
32     "typescript": "^2.1.4",
33     "typing": "0.1.9",
34     "gulp": "3.9.1"
35   }
36 }
View Code

3.打开cmd窗口，并用cd命令打开当前文件夹，运行npm install(使用淘宝镜像时，下载angular2失败)

4.新建tsconfig.json

 1 {
 2     "compilerOptions": {
 3         "target": "es5",
 4         "module": "commonjs",
 5         "declaration": false,
 6         "noImplicitAny": false,
 7         "removeComments": true,
 8         "noLib": false,
 9         "emitDecoratorMetadata": true,
10         "experimentalDecorators": true,
11         "sourceMap": true
12     },
13     "exclude": [
14         "node_modules"
15     ],
16     "compileOnSave": false
17 }
View Code

5.新建Typescript脚本

1 export class Developer {
2     public id: number;
3     public githubHandle: string;
4     public avatarUrl:string;
5     public realName:string;
6     public email:string;
7     public technology:string;
8     public popular:boolean;
9 }
View Code
 1 import { Developer } from './developer'
 2 export class DeveloperCollection {
 3      private developers:Developer[]=[];
 4      getUserByGitHubHandle(username:string){
 5          return this.developers.filter(u=>u.githubHandle===username)
 6          .pop();
 7      }
 8 
 9      getUserById(id:number){
10          return this.developers.filter(u=>u.id===id).pop();
11      }
12 
13      addDeveloper(dev:Developer){
14          this.developers.push(dev);
15      }
16 
17      getAll(){
18          return this.developers;
19      }
20 }
View Code
 1 import { Component } from '@angular/core';
 2 import { bootstrap } from '@angular/platform-browser-dynamic';
 3 import { APP_BASE_HREF, LocationStrategy, HashLocationStrategy } from '@angular/common';
 4 import { Route, Redirect, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, RouteConfig } from '@angular/router-deprecated';
 5 import { Developer } from './developer';
 6 import { DeveloperCollection } from './developer_collection';
 7 
 8 @Component({
 9     selector: 'app',
10     template: `<div>Success</div>`,
11     providers: [DeveloperCollection],
12     directives: [ROUTER_DIRECTIVES]
13 })
14 
15 @RouteConfig([
16     new Redirect({ path: '/add-dev', redirectTo: ['/dev-add'] })
17 ])
18 
19 class App { }
20 
21 bootstrap(App, [
22     ROUTER_PROVIDERS,
23     { provide: LocationStrategy, useClass: HashLocationStrategy }
24 ]);
View Code

6. 新建HTML页面

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5       <meta charset="UTF-8">
 6   <title></title>
 7      <script src="/node_modules/es6-shim/es6-shim.min.js" ></script>
 8     <script src="/node_modules/zone.js/dist/zone.js" ></script>
 9     <script src="/node_modules/reflect-metadata/Reflect.js" ></script>
10     <script src="/node_modules/systemjs/dist/system.src.js" ></script>
11     <script src="/node_modules/rxjs/bundles/Rx.min.js" ></script>
12     <script> 
13         SystemJS.config({"defaultJSExtensions":true,"paths":{"bootstrap":"/dist/dev/bootstrap","markdown":"/node_modules/markdown/lib/markdown","immutable":"/node_modules/immutable/dist/immutable.js"},"map":{"rxjs":"/node_modules/rxjs","@angular":"/node_modules/@angular"},"packages":{"@angular/core":{"main":"index.js","defaultExtension":"js"},"@angular/compiler":{"main":"index.js","defaultExtension":"js"},"@angular/common":{"main":"index.js","defaultExtension":"js"},"@angular/platform-browser":{"main":"index.js","defaultExtension":"js"},"@angular/platform-browser-dynamic":{"main":"index.js","defaultExtension":"js"},"@angular/router-deprecated":{"main":"index.js","defaultExtension":"js"},"@angular/http":{"main":"index.js","defaultExtension":"js"},"rxjs":{"defaultExtension":"js"}}});
14  
15          SystemJS.import("/scripts/app")
16     </script>
17 </head>
18 
19 <body>
20     <app>Loading...</app>
21   
22 </body>
23 
24 </html>
View Code