这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能。

本篇分享的是：【 如何使用ui-router？ 】

1.背景介绍

我们都知道js经常用于开发客户端的单页面应用  所以要在一个页面呈现不同的视图,路由起到了至关重要的作用

angular.js 为我们封装好了一个路由工具 ngRoute ,它是一种靠url改变去切换视图.

angularUI 也为我们封装了一个独立的路由模块 ui-router ,它是一种靠状态 state 来切换视图.

在学习ui-router之前可以先了解一下 angulajs中路由和原生路由ngroute相关的概念

2.知识剖析

2.1什么是路由

一般情况下，我们访问网页的时候，是通过url地址。比如我们通常访问一个网页:https://www.baidu.com/index/first.html

但是在angular中是这样的 https://www.baidu.com/index/index.html#/first

当我们点击以上任一一个链接时，向服务器请求的地址都是https://www.baidu.com/index/index.html ，而＃号之后的内容在向服务器端请求时会被浏览器忽略掉，

所以我们在客户端实现＃号后面的功能实现即可。简单来说，路由通过＃＋标记帮助我们区分不同逻辑页面，并将其绑定到对应的控制器上。

2.通过angularjs中的路由模块，实现ng-route的步骤

（1）载入包含ng-route的JS文件

(2）包含了 ngRoute 模块作为主应用模块的依赖模块

（3）使用指令ng-view

（4）我们在html中定义链接，可以实现一个单页应用

AngularJS 路由也可以通过不同的模板来实现。$routeProvider.when 函数的第一个参数是 URL 或者 URL 正则规则，第二个参数为路由配置对象。

ui-router是一个可以用来替换AngularJS原生路由的插件，它最大的特点就是支持嵌套路由

那么，什么是嵌套路由呢？

原生路由刚才也给大家说了 angular的视图是通过ng-view这个指令进行加载的 然后通过控制器来加载相应的视图模板

如果说我们有一个网页，左边是菜单栏，右边是各个菜单所对应的视图。

那么，如果按照这样的定义，点击每个菜单项，岂不得刷新整个网页？

而我们想要的只是右边的视图刷新。所以，这就要用到嵌套路由了。

3.常见问题

如何实现嵌套路由？

4.解决方案

ui-route子路由可以继承父路由,也就是说 state 设置可以嵌套,通过名称中的.(点)来区分层次

5.编码实战

上海分院

6.扩展思考

1.如何传递参数？

url传参，$state.go传参

2.ui-sref、$state.go 的区别

ui-sref一般使用在a链接中

$state.go一般使用在控制器中

这两者的本质上是一样的 ui-sref源码里面最后调用的还是$state.go的方法

7.参考文献

angular 系列八 ui-router详细介绍及ngRoute工具区别

AngularJS——ui-router详解

8.更多讨论

1.为什么用route

答：AJAX 请求不会留下 History 记录

      用户无法直接通过 URL 进入应用中的指定页面(保存书签、链接分享给朋友)

      AJAX 对 SEO 是个灾难

2.ui-sref和$state.go的区别

答：ui-sref一般使用在a链接中

     $state.go一般使用在控制器中

     这两者的本质上是一样的 ui-sref源码里面最后调用的还是$state.go的方法

3.怎么传递、获取参数

答：传递参数：ui-sref/$state.go

       获取参数$stateParams

9.鸣谢

感谢周能、何岳师兄，在两位师兄的帮助下顺利结束了本节小课堂，感谢！

PPT链接 视频链接

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~

------------------------------------------------------------------------------------------------------------
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，学习的路上不再迷茫。

技能树.IT修真院

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！