一：路由基础
- 什么是路由：
在web开发中，路由的概念由来已久，简而言之，就是利用URL的唯一性来指定特定的事物，这个事物可以是文件、状态、数据等等。服务器端路由早已有之，随着近几年REST理念的流行，为更多的人接受和使用。而浏览器客户端路由，则是随着单页应用 (SPA)的兴起，才被越来越多的前端框架所实现。在Angular中，页面由组件构成，因此URL和页面的对应关系实质上就是URL和组件的对应关系。
restFul架构风格 linkhttp://www.ruanyifeng.com/blog/2011/09/restful
名词：路由组件（含有路由的组件）
创建带路由模块的项目请使用：ng new xxx --routing
在Angular路由的工作流程
- 当用户在浏览器输入URL后，Angular讲获取该URL并将其解析生成一个UrlTree实例
- 在路由配置中寻找并激活UrlTree实例匹配的配置项（orutes）。
- 为配置项中指定的组件创建实例
- 将该组件渲染于路由组件的模板中<router-outlet>指令所在位置。
具体步骤：
- Routes路由配置项
- 设置<router-outlet>占位符
- 设置触发转跳功能(<a routerLink> / router.navigate())
具体对象以及参数信息如下图
| 路由器部件 | 含义 |
|---|---|
| Router(路由器) | 为激活的URL显示应用组件。管理从一个组件到另一个组价的导航 |
| RouterModule(路由器模块) | 一个独立的Angular模块，用于提供所需的服务提供商，以及用来在应用视图之间进行导航的指令 |
| Routes(路由数组) | 定义了一个路由数组，每一个都会把一个URL路径映射到一个组件 |
| Route（路由） | 定义路由器该如何根据URL模式（pattern）来导航到组件。大多数路由都由路劲和组件类构成。 |
| RouterOutlet(路由出口) | 该指令(<router-outlet>)用来标记出路由器该在哪里显示视图。 |
| RouterLink（路由链接） | 该指令用来把一个可点击的HTML元素绑定到路由。点击带有绑定到字符串或链接参数数组的routerLink指令的元素就会触发一次导航。 |
| RouterLinkActive（活动路由链接） | 当HTML元素上或元素内的routerLink变为激活或非激活状态时，该指令为这个HTML元素添加或移除CSS类。 |
| ActivateRoute（激活的路由） | 为每个路由组件提供的一个服务，它包含特定于路由的信息，比如路由参数、静态数据、解析数据、全局查询参数和全局碎片（fragment） |
| RouterState（路由器状态） | 路由器的当前状态包含了一颗由程序中激活的路由构成的树。它包含一些用于遍历路由树的快捷方法。 |
| 链接参数数组 | 这个数组会被路由器解释成一个路由操作指南。我们可以把一个RouterLink绑定到该数组，或者把它作为参数传给Router.navigate方法。 |
| 路由组件 | 一个带有RouterOutlet的Angular组件，它根据路由器的导航来显示相应的视图。 |
- 后端路由：
在express中路由长这样：
router.get('/user', function(req, res){
res.send('hello world')
})
在Ruby中路由长这样：
get''/user', to:'pages#user'
classPagesController<actionController::Base
defablout
render
end
end
- 路由策略:
路由策略决定Angular讲使用URL的哪一部分和路由配置项的path属性进行匹配。Angular提供了PathLocationStrategy 和 HashLocationStrategy两种策略。
Path(Angular默认)策略时：http://localhost:4200/home
Hash策略时：http://localhost:4200/#/home
Hash策略特点：
- 浏览器向服务器发送请求时不会带上hash部分的内容。只发http://localhost:4200
- 更改URL的hash部分不会向服务器重新发起请求。这样子在跳转的时候就不会引发页面的刷新和应用的重新加载。
Path策略特点：
- 使用URL的path部分来进行路由的匹配，会将URL原封不动的发送给服务器。
Path优点：
- 为服务器渲染提供了可能。
Path条件：
- 浏览器需要支持HTML5的histroy.pushState()方法。
- 需要在服务器端进行配置，将所有的URL重定向到应用首页。实际URL在服务器并不存在相对应的文件结构。
- 需要设置一个base路径。Angular讲以base路径作为前缀。可以区分不同应用的不同请求。
- 重点：1、 当你要把Angular程序部署在对HTML5支持不足环境下时，请使用Hash策略。2、 当传统的集成式部署的时候，请使用Hash策略。
- 路由跳转：
对于Angular构建的单页应用而言，页面跳转实质上就是一个配置项跳转到另一个配置项的行为。
指令跳转：[routerLink]指令，其值是需要跳转的路径。这个指令可以写在任何HTML元素上。触发是click事件。行为：1、拦截click事件，2、根据传递的值跳转。
代码跳转：Router.navigate()方式。
- 注意事项：
不要在path参数中添加斜杠，请使用path:'home'
二：路由参数
Angular组件间传递数据的三种方式，我们今天来介绍二种路由参数。
- Path参数(使用最多)
顾名思义是通过解析URL的path部分来获取参数。
- 配置路由配置项：例如path:'contact/:id'
- 修改我们的指令（代码）的参数："['/contact', 1]"
- 占位符不用修改
- 接收数据ActivatedRoute.snapshot.params['id']
- Query参数
在查询参数中传递数据
- 路由配置项不用修改
- 修改我们的指令（代码）的参数："['/contact']"[queryParams]="{id: 1}"
- 占位符不用修改
- 接收数据ActivatedRoute.snapshot.queryParams['id']
- Data参数(基本不用)
直接在路由配置项中指定参数值
路由配置项：
{path:/content, component: ContentComponent, data:[{isContent:true}]指令（代码）不用修改
占位符不用修改
ActivatedRoute.data[0][isContent]=true
参数订阅和参数快照
参数快照：snapshot。 ngOnInit只会调用一次。
参数订阅：会以数据流的形式来监控参数的变化。在我们的Router中可以不用取消订阅，而在其他的订阅中你需要手动的来取消。
三、重定向路由
我们有时候需要对初始化的地址，或者已经不存在的地址进行重定向，这是可以使用重定向路由的语法。使用方式：
- 路由配置项中使用redirectTo指向需要重定向的地址。
- 设置pathMatch可能的值为 full 或者 prefix
当值为full时候需要跟重定向的path完全匹配，当值为 prefix的时候匹配开头。作用：
- 可以让我们的首页进来就跳转到你需要展示的页面比如（home）。
- 使用prefix 的时候可以让我们快速的把整个路径全部都统一处理。
场景：当我们的项目上线之后，用户已经收藏了一堆堆的链接。而我们的项目由于版本更新或者迭代把原先的路径废除了，这个时候就可以快速重定向。
四、路由通配符
解决查找不到或者丢失页面的情况。（比如用户收藏你的网站地址，但是你们网站刚好又进行更新，那么有些链接就会丢失，这时候就需要通配符了）。步骤：
- 在路由表中：{ path: '**', component: NotFoundComponent }
五、子路由
一个组件可以被嵌入到另外一个组件中，从而建立起组件之间的多级嵌套关系。与此类似，Angular也允许一个路由组件被嵌入到另一个路由组件中，建立多级路由嵌套关系。
步骤：
- 配置路由配置项：例如
{
path: 'contact/:id', component: ContactComponent,children: [
{path: '', component: SiqiComponent},
{path: 'daocheng', component: DaochengComponent}
]
}
- 不用修改父路由的指令，而要添加子路由的指令在含有子路由的模板中。
- 需要添加子路由的占位符，在含有子路由的模板中。ContactComponent中
注意：子路由的指令需要配置. 例如："['./derry']"
Matrix参数：矩阵URL标记法
特点：
可以配置我们路由可选参数：this.router.navigate(['/xxx', {id: userId, color: 'block'})
能够精确定位我们不同层次的路由需要的同名的数据参数。
localhost:4200/contact/name/1 //无法区分不同的参数
localhost:4200/contact;id=1/name;id=2
六、辅助路由
Angular允许一个路由组件包含多个Outlet（路由插座）,从而可以在一个路由组件中同时显示多个组件。
主要Outlet（Primary Outlet）有且仅有一个，附属Outlet（Auxiliary Outlet）可以有任意多个，各个附属Outlet通过不同的命名加以区分。每一个Outlet均可以通过路由配置来指定可以显示的组件，这使得Angular可以灵活地对各个组件进行组合，从而满足不同场景需求。步骤：
- 路由配置项需要定义要被显示在的插座的名称例如：
{ path: 'chat', component: ChatComponent, outlet: 'aux'}
上面的aux是自己定义的名称。
- 指令需要修改成如下的方式：
"[{outlets: {aux: ['chat']}}]"
- 占位符需要新建一个，其名称为aux。
七、路由守卫
Angular的路由守卫（路由拦截），允许在从一个配置项跳转到另外一个配置项之前执行指定的逻辑，并根据执行的结果来决定是否进行跳转。Angular提供了五类路由拦截：
- CanActivate 激活守卫
功能：处理进入路由的情况
参数：
- ActivatedRouteSnapshot，表示所要激活的目标配置项（被使用到的路由的信息）。
- RouterStateSnapshot，表示应用当前所处的路由状态，其包含了当前所需的所以配置项。
通过实现CanActivate接口创建守卫服务。该接口只包含了一个canActivate()方法，最简单的情况，该方法返回true，则表示通过守卫。返回false时，表示不允许，则对守卫目标不允许激活（不允许访问）。
场景： 防止我们的用户去访问一些他根本没有权限访问的内容。
- CanActivateChild 子路由激活守卫
本路由用于控制是否允许激活子路由配置项，其用法与CanActivate守卫相似，大家自行尝试。具体案例参考官网。
- CanDeactivate 反激活守卫
功能：处理离开路由的情况
通过实现CanDeactivate接口创建守卫服务，跟CanActivate相比，该方法除了第一个参数为目标配置项对应组件的实例外，其余使用方式与CanAtivate()方法一样。
场景：用户在输入写非常关键的信息，或者进行保存前的操作的时候，我们要避免不小心退出了当前的页面。
- Resolve 数据预加载守卫
通过实现Resolve<T>泛型接口创建守卫服务。该服务只有一个resolve()方法，用于执行数据预加载逻辑。该方法可以直接将数据返回，在异步情况下也可以通过Observable对象触发。其返回的任何数据（包括false）都将存放于配置项的data参数部分，如果没有预加载到期望的数据，只能通过代码跳转的方式来达到不激活目标配置项的目的。
场景：我们有时候加载表单内容的时候，会出现页面已经出来了，但是数据还没有加载完成。
- CanLoad 模块加载守卫
通过实现CanLoad接口创建守卫服务，当Url匹配到延迟加载的配置项，canload守卫就会对其拦截判断是否能加载。
八、懒加载
Angular应用由一个根模块和任意多个特性模块组成。由于一个大型的项目通常会包含许多的特性模块，如果在首屏加载时便将所有的特性模块加载进来，对于用户体验和服务器负载都会有影响。所以Angular提供了延迟加载（异步加载/懒加载），使得只有在真正需要使用到的时候才加载进来。
使用方式：
- {path: 'async', loadChildren: "app/async/async.module#AsyncModule"}
注意：懒加载的模块，不能放在根模块同级目录下。
