如何使用ui-router

深圳分院:林健凡

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

什么是ui-router

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.知识剖析

ng-router --------- ui-router
$routeProvider -- urlRouterProvider/stateProvider
$route ------------- urlRouter/state
$routeParams ---- stateParams
ng-view ------------ ui-view

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

$state / $stateProvider:管理状态定义、当前状态和状态转换。包含触发状态转换的事件和回调函数,异步解决目标状态的任何依赖项,更新$location到当前状态。由于状态包含关联的 url,通过$urlRouterProvider生成一个路由规则来执行转换的状态

ui-view指示器:渲染状态中定义的视图,是状态中定义的视图的一个占位符

$urlRouter / $urlRouterProvider:管理了一套路由规则列表来处理当$location发生变化时如何跳转。最低级的方式是,规则可以是任意函数,来检查$location,并在处理完成时候返回true。支持正则表达式规则和通过$urlMatcherFactory编译的UrlMatcher对象的 url 占位符规则。

3、常见问题

如何使用ui-router

4、解决方案

5、编码实战

6、扩展思考

7、参考文献

https://blog.csdn.net/huwei2003/article/details/52278013

8、更多讨论

鸣谢

感谢观看

BY ︱林健凡