angular路由

1.背景介绍

angular路由

      angular路由可以实现多视图的单页Web应用。当请求一个url时，根据路由配置匹配这个url，然后请求模板片段，并插入到ng-view中去。这种做法使网页局部刷新，减少了切换网页时带来的突兀感，也减少了项目的代码量。

2.知识剖析

ngRoute实现原理

我们知道，设置

锚点a

这样的锚点，a链接会在同一页面中跳转。ngRoute利用了这一特性将锚点出的文件设置为模板，在锚点被链接时，监听到url的变化，加载相应的模板文件。

3.常见问题

a.ngRoute的使用方法？

b.ngRoute的组成？

4.解决方案

a.ngRoute的使用：

1.引入两个文件，angular和angular-route：

2.主页面中设置容器ng-view

3.然后在ng-app中注入ngRoute

4.最后配置路由表

一个简单的ngRoute结构示例：

一个简单的ngRoute结构示例

b.ngRoute包含以下部分：

1．服务$routeProvider用来定义一个路由表，即地址栏与视图模板的映射

2．服务$routeParams保存了地址栏中的参数

3．服务$location用来实现用于获取当前url以及改变当前的url,并且存入历史记录

4．服务$route完成路由匹配，并且提供路由相关的属性访问及事件，如访问当前路由对应的controller

5．指令ngView用来在主视图中指定加载子视图的区域

$routeProvider提供了定义路由表的服务，它有两个核心方法，when(path,route)和otherwise(params)。

5.编码实战

ngRoute

完整ngRoute Demo

6.扩展思考

a.ngRoute的缺点？

1.页面中只能有一个ng-view视图

2.不支持嵌套，子模板中不能设置ng-view

b.其它实现angular路由的方式？

一般我们都用ui-router，作为angular的第三方插件，弥补了ngRoute上述的两个缺陷，其结构和ngRoute相识，但也有很多细节上的不同：

1.$when—>$state路由状态配置的时候

2.$routeParams —> $stateParams带参数的时候的配置

3.$routeProvider —> $stateProvider依赖注入的模块

4.'ng-view' —> 'ui-view'页面中绑定的指令

5.href="#/a" —> ui-sref="a"

ui-router根据状态(state)配置模板，逻辑更清晰。

Demo如下：

ui.router

完整ui.routerDemo

7.参考文献

参考一：angularJS学习小结——ngRoute（路由机制）

参考二：菜鸟教程-AngularJS路由

参考三：Angular 1.6版本路由中/#!/的解决方法

参考四：AngularJS路由二三事（一）：ngRoute

参考五：系列文章--学习ui-router -管理状态