如何使用ui-router

1.背景介绍

AngularUI Router是AngularUI 团队开发的一个AngularJS路由模块，相比AngularJS的标准路由ngRoute，它更灵活。

与集成的ngRoute服务不同的是，UI-Router可以将视图嵌套，因为它基于的是操作状态而仅非URL。与传统做法使用ng-view不同的是，在ui-Route里需要使用ui-view服务。当在ui-router中处理路由和状态时，开发者的重心是当前的状态是什么以及在哪一个页面里。

UI-Router被认为是AngularUI为开发者提供的最实用的一个模块，它是一个让开发者能够根据URL状态来组织和控制界面UI的渲染，而不是仅仅只改变路由（传统AngularJS应用实用的方式）。该模块为开发者提供了很多视图（view）的控制。开发者可以创建嵌套分层的视图、在同一个页面使用多个视图、让多个视图控制某个视图等更多的功能。即使是非常复杂的web应用，UI-Router也可以极佳地驾驭。

在单页面应用中要把各个分散的视图给组织起来就是通过路由机制来实现的。

路由就是一个用于请求URL分发和跳转的一个应用组件。

2.知识剖析

$urlRouterProvider(服务提供者) -- 用来配置路由重定向 
$statePorvider(服务提供者) -- 用来配置路由 
$state(服务) -- 用来显示当前路由状态信息及一些路由方法，例如跳转 
$stateParams(服务) -- 用来存储路由匹配时的参数 
ui-view(指令) -- 路由模版渲染，对应的dom相关联 

3.常见问题

如何使用ui-router

首先要引入angularjs的文件跟ui-router的js文件

接着上app.js里面定义我们的路由

4.解决方案
5.编码实战
6.扩展思考

7.参考文献

https://blog.youkuaiyun.com/huwei2003/article/details/52278013

8.更多讨论

1 js文件引入顺序有要求吗

答：对于需要依赖的js文件，则有要求，例如ui-router依赖于angularjs，所以angular.js就需要放置在ui-router的js文件前面

2 页面之间如何传递参数

答：首先要在路由中定义要接受的参数，然后在控制器中传递参数，最后通过$stateParams获得参数

3 ui-router跟ng-router的区别

答：ui-router扩展性比ng-router更好，可以实现嵌套路由还有多视图