UI-Router

UI-Router

ng-route 与 ui-route 的区别·:

（1）ng-route的局限性：一个页面无法嵌套多个视图，也就是说一个页面只能有包含一个页面一个控制器的切换。

（2）ui-route的改进：在具有富客户端的单页应用中，要在一个页面中呈现不同的视图，我们可以通过ui-route实现路由的嵌套。

什么是UI-Router？

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

ui-router的使用方法：

1、首先在视图中链接这个库：

2、设置HTML页面，这里不同于ng-route中的ng-view

3、在JS中配置路由

因为在这里我们将index.html和fruit.html以及vegetable.html放置在了同一个目录下，template下的路径建议使用绝对路径的形式。

效果如下，当初始默认界面为：

点击水果，切换到水果页面：

点击蔬菜，切换到蔬菜页面：

这里介绍了ui-route页面的基础用法，这个用法与ng-route实现的功能大体上是一致的，下面我们来看各个配置属性的基本含义：

I）template/templateUrl

template：字符串方式的模板内容，或者是一个返回html的函数

templateUrl：模板路径或者是返回模板路径的函数

templateProvider：返回HTML内容的函数

例如：在我们的例子中所写的

II）.controller

控制器，返回对应url模板的控制器名称，或者是对应url模板的控制器函数。如果没有对应的模板定义，控制器对象就不会被创建

III）.resolve

使用resolve功能，我们可以准备一组用来注入到控制器的依赖对象。在ngRoute中，resolve可以在实际渲染之前解决掉promise，resolve选项提供一个对象，对象中的key就是准备注入到controller中的依赖名称，值则是这个创建对象的工厂。

3.通过ui-route实现深层次的路由嵌套

我们在水果页面加上了新的html：

我们发现现在一级导航栏底下，多了一个二级导航栏（多了一个ui-view）

重新配置JS路由，在第一级路由fruit的基础上进一步进行嵌套，JS代码

如下：

即二级切换页面的效果为：

4.此外ui-route还可以实现多视图路由，这个功能同一个state下，全页面分为几个细小的页面分别显示不同的值。

一级路由默认项设置用  otherwise

$urlRouterProvider.otherwise('home');//默认状态下将路由重定向至home

二级路由默认项用  $state.go()

$urlRouterProvider.otherwise(‘default');//默认状态下将路由重定向至default