angular2 系列教程（三）路由

一. 路由

1. 嵌入在app.module.ts
   1. 创建路由： 
      1. 在src/app/app.module.ts中引入RouterModule：import { RouterModule } from '@angular/router';
      2. 定义和配置路由数组，我们暂时只为login来定义路由，仍然在src/app/app.module.ts中的imports中
      3. 
   2. 使用路由：
      1. 把<router-outlet></router-outlet>写在src\app\app.component.html的末尾
   3. 注意：如果一个路径同时匹配多个路径配置的规则的话，以第一个规则为准
2. 创建单独文件定义
   1. 创建路由：
      1. 新建文件“app.routes.ts”
      2. 
      3. 组成：
         1. export const routes: Routes=[];   //路由数组
         2. export const routing = RouterModule.forRoot(routes);  //定义路由
   2. 在app.modules.ts中的imports数组中引入routing
3. 在页面上点击链接跳转到对应路由的模块
   1. "<a routerLink="/todo/ALL">All</a>"
4. 通过路由传递参数：
   1. 在路由定义的时候写成
      1. 
   2. 接受参数（编辑xxxComponent.ts）
      1.  在构造中注入ActivatedRoute和Router。
         1. 
      2. 然后在ngOnInit()中添加下面的代码，一般的逻辑代码如果需要在ngOnInit()中调用。
         1. 
5. 模块懒加载：
   1. 创建父子路由，子路由导入父路由的module中，设置forChild(routes)
      1. 
   2. 在xxx.module.ts中导入路由模块
      1. 
   3. 在根路由中导入上面的模块路由，并设置loadChildren：
      1. 
6. 路由守卫：
   1. 分类：
      1. CanActivate来处理导航到某路由的情况。
      2. CanActivateChild处理导航到子路由的情况。
      3. CanDeactivate来处理从当前路由离开的情况。
      4. Resolve在路由激活之前获取路由数据。
      5. CanLoad来处理异步导航到某特性模块的情况。
   2. 检查顺序：从最深的子路由下往上检查守护条件。然后按照从上到下的顺序检查CanActivate守卫。
   3. 步骤：
      1. 在路由定义中添加对应的方法（如CanActivate）
         1. 
      2. 创建路由守卫的service，实现对应的方法（如CanActivate）
         1. 构造器中注入路由
         2. 对应方法（如CanActivate）的具体实现，返回一个boolean类型值
         3. 

---

二. 建立模拟web服务（内存服务）和异步操作

1. 首先我们需要安装angular-in-memory-web-api，输入npm install --save angular-in-memory-web-api"
2. 创建xxx-data.ts
   1. 建立InMemoryTodoDbService类，实现 InMemoryDbService的内存数据库
   2. 
   3. 然后在app.modules.ts中的imports数组中加上 InMemoryWebApiModule.forRoot(InMemoryTodoDbService),。
3. 在xxxService中调用假服务
   1. 定义api_url：“private api_url = 'api/todos';”
   2. 设置请求头：“private headers = new Headers({'Content-Type': 'application/json'});”
   3. 在constructor中注入http：“constructor(private http: Http) { }”
   4. 编写链式函数
      1. .post(this.api_url, JSON.stringify(tod), {headers: this.headers})：
         1. 构造一个POST类型的HTTP请求，返回一个Observable可观察对象
         2. RESTful的其他分类：（ 如果url是api/todos）
            1. 查询所有待办事项：以GET方法访问api/todos
            2. 查询单个待办事项：以GET方法访问api/todos/id，比如id是1，那么访问api/todos/1
            3. 更新某个待办事项：以PUT方法访问api/todos/id
            4. 删除某个待办事项：以DELETE方法访问api/todos/id
            5. 增加一个待办事项：以POST方法访问api/todos
      2. .toPromise()使返回值返回一个Promise。Promise提供异步的处理
      3. .then后面的=>是lambda表达式，相当于匿名函数，res是参数，后面是函数体
      4. 
4. 更改xxxComponent的add方法
   1. 
   2. this.todos = [...this.todos, todo] 相当于todos.push(todo)。但是push是新建立一个数组
5. 弊端：
   1. 无法封装子模块

---

三. 建立模拟web服务（json-server）

1. 创建服务
   1. 使用npm install -g json-server安装json-server。
   2. 在xxx目录下建立xxx-data.json
   3. 实例：
2. 其他同上但是更改url和链式函数
   1. 更改url
   2. 更改链式函数then中的 res.json().data替换成res.json()。
3. 开启json服务：命令行输入“ json-server ./src/app/todo/todo-data.json”