大家好，我是IT修真院武汉分院第10期学员余佳贝，一枚正直善良的web程序员。
今天给大家分享一下，修真院官网js任务6，深度思考中的知识点——如何使用ui-router？
一.背景介绍
我们都知道angular js经常用于开发客户端的单页面应用 所以要在一个页面呈现不同的视图,路由起到了至关重要的作用 angular.js 为我们封装好了一个路由工具 ngRoute ,它是一种靠url改变去切换视图. angularUI 也为我们封装了一个独立的路由模块 ui-router ,它是一种靠状态 state 来切换视图. 在学习ui-router之前可以先了解一下 angulajs中路由和原生路由ngroute相关的概念
二.知识剖析
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#/second
当我们点击以上任一一个链接时，向服务器请求的地址都是https://www.baidu.com/index/index.html ，而＃号之后的内容在向服务器端请求时会被浏览器忽略掉， 所以我们在客户端实现＃号后面的功能实现即可。简单来说，路由通过＃＋标记帮助我们区分不同逻辑页面，并将其绑定到对应的控制器上。
2.2通过angularjs中的路由模块，实现ng-route的步骤
（1）载入包含ng-route的JS文件 (2）包含了 ngRoute 模块作为主应用模块的依赖模块 （3）使用指令ng-view （4）我们在html中定义链接，可以实现一个单页应用
var app=angular.module('app',['ngRoute']);
app.config(['$routeProvider',function($routeProvider) {
$routeProvider.
when('/login',{
templateUrl:'login.html'}).
when('/list',{
templateUrl:'list.html'}).
AngularJS 路由也可以通过不同的模板来实现。$routeProvider.when 函数的第一个参数是 URL 或者 URL 正则规则，第二个参数为路由配置对象。
路由配置对象语法规则如下：
$routeProvider.when(url, {template:string,//用于指定视图模板，也可以是一个方法 该方法必须返回html模板内容
templateUrl:string,//视图模板路径
controller:string,function或 array,//控制器名称或控制器构造方法
controllerAs:string,//通过控制器标识符名称引用控制器
resolve: object类型,//用于指定注入控制器中的内容});
ui-router是一个可以用来替换AngularJS原生路由的插件，它最大的特点就是支持嵌套路由
那么，什么是嵌套路由呢？
原生路由刚才也给大家说了 angular的视图是通过ng-view这个指令进行加载的 然后通过控制器来加载相应的视图模板 如果说我们有一个网页，左边是菜单栏，右边是各个菜单所对应的视图。 那么，如果按照这样的定义，点击每个菜单项，岂不得刷新整个网页？ 而我们想要的只是右边的视图刷新。所以，这就要用到嵌套路由了。
三.常见问题
如何实现嵌套路由？
四.解决方案
ui-route子路由可以继承父路由,也就是说 state 设置可以嵌套,通过名称中的.(点)来区分层次.
五.编码实战
六.拓展思考
在 Angularjs 中 ui-sref 和 $state.go 如何传递参数？
1.ui-sref、$state.go 的区别
ui-sref一般使用在a链接中
$state.go一般使用在控制器中
这两者的本质上是一样的 ui-sref源码里面最后调用的还是$state.go的方法
2.如何传递参数
首先，要在目标页面定义接受的参数：
$stateProvider.state("page1",{
url:"/page2",
templateUrl:"page2.html",
controller:"p2",
params:{name:null}//在目标页面定义接收的参数
});
在目标页面的controller里注入$stateParams，然后$stateParams.参数名获取
app.controller("p2",function($scope,$state,$stateParams){
console.log($stateParams.name);//接收参数
});
$state.go("page1.page2",{name:'rose'});//传参
<a ui-sref="page1.page3({name:'jack'})</a>
七.参考文献
八.更多讨论
1.如何激活状态？
有三种方式来激活特定的状态
使用ui-sref绑定的连接
直接导航到与状态关联的url
使用$state.go()方法
2.多个页面可能使用相同的html模板,我们是要同样的代码写N遍吗？
（1）在html中给ui-view添加名字
（2）在路由配置中添加配置信息
3.我们经常会需要用到路由去传参,例如编辑一条信息,获取单个信息,应该如何去做呢?
angular-ui-router提供了一个$stateParams的service,可直接获取.在controller中的使用示例 有人肯定会疑问,$stateParams从何而来,在上面我们给angular.module中已经将其初始化,挂在到$rootScope.
undefined_腾讯视频
网友评论