Angular 学习笔记之 ui-router

[Hugo-seth]

Angular有官方的路由功能，也就是ng-router。但我们在实际的开发过程中都不会用到，而是使用来自第三方的路由：ui-router。原因非常简单，那就是ui-router的功能可以把ng-router秒成渣。而它的最强之处无疑就是支持视图（ui-view）及状态（state）的嵌套。由于我还没有需要用到ui-view嵌套的情况，正确来说因为视图比较简单，我们是用ng-include避免了ui-view嵌套的发生，在我看来ui-view嵌套写法会更难理解，如果想了解，可以参考这篇文章。所以我只会谈到state嵌套。

因为是第三方的插件，首先我们得在定义module注入ui-router，这样我们才能使用。

angular .module('test', [ 'ui.router']);

我们首先需要配置router，注入$stateProvider和$urlRouterProvider，时刻记住：要想使用一个功能，必须先注入。其实这里还配置了两个非常有用的全局变量$state和$stateParams，稍后会详述。

上图可以看到state的嵌套写法：abstract和absolute是一个意思，写哪个都行，表示这个state是父state，以父state.开头的都是子state，例如client.home就是client的子state。 上图的例子中子state的url有两种情况（父state的url写不写）：写的话，那子state的url都会继承这个url，例如menmber.add的url就会是：/member/add，没写的话就直接是子state定义的url。那我们子state出现在父state的什么地方呢？上图中父state的template的div里有个ui-view属性，所以，子state的template会append在父state的template的有ui-view属性的标签里<div ui-view></div>。这样我们就可以把公用的视图放在父template里，例如侧边导航。

我们配置好了state和url，我们在本地起服务器运行我们的angular页面就可以切换url了。接下来谈谈上文提到的非常有用的$state和$stateParams。

我们在url写了？就说明我们配置了$stateParams对象，例如

/shops?status&provinceCode&cityCode&districtCode&name&page

首先我们先要理解这个url是什么意思，/表示这是一个新的路径，？表示这是同一个路径下的参数。

我们看一下这个url下的$stateParams对象：

可以非常明显的看出，url上的参数和$stateParams对象的属性是一一对应的，没有赋值的参数就是undefined。这时候我们就可以在controller里注入$stateParams实现向后台查询的等功能。

接下来我们来看一下$state对象：

这里有一些非常有用的属性，我就不一一解释了，大家只要把它console.log出来看一下就明白了。我只会讲我们常用的属性，第一个是它的go方法，它可以实现我们跳转到任何存在的url上，还可以加上参数，例如：

$state.go('admin.shopsFilter.shops', { provinceCode: 12, cityCode: 1202, districtCode: 120204, page: 1 });

第一个参数就是state，跳转到的是对应的url，这一点要清楚。第二个就是参数就是url参数。

第二个是它的params属性，从上图我们可以看出其实和$stateParams是一样的。大家肯定觉得这很正常，但不寻常的是我是在admin.shopsFilter也就是父state的controller里log出来的，在这个controller里$stateParams是空对象，因为父state的url是没有参数的，但是$state的params属性是可以得到子state的参数的，这是非常有用的一个属性，大家在实际的开发中肯定会感受到的。

再给大家介绍一个跟state有关的有用的方法：

当切换到ui-sref的state对应的url时，就会自动给元素加上active的class（当然className是可以自定义的，不一定要active），这样我们不用任何多余的js就可以实现一些样式了。