本文介绍了一种基于AngularJS实施深ui-route.share你参考路由方法，如下：

1。在我们前面，我们通过一个简单的NG路由实现了一个简单的层次结构，我们可以用UI路由来实现深路由。

（1）NG路由的限制：一页不能嵌套多个视图，也就是说，页面只能有一个包含一个页面和一个控制器的开关。

（2）用户界面路由的改进：在富客户端的单页面应用中，需要在一个页面中呈现不同的视图，通过用户界面路由实现路由嵌套。

使用2。UI的路线

（1）首先加载angular-ui-route.js







（2）设置HTML页面，这与NG路由中的NG视图不同。



首页
水果
蔬菜





（3）在JS中配置路由

（因为含铬不支持本地文件的访问，和FF支持它，它不想建立一个本地服务器，并可以进行调试与火狐浏览器）。

配置路由的代码如下所示：


Angular.module（'myapp，{ 'ui。路由器}）
。配置（功能（stateprovider美元，美元urlrouterprovider）{
urlrouterprovider.otherwise美元（指数）；
stateprovider.state美元（'fruit，{
网址：水果，
TemplateUrl：'fruit HTML。
}）
国家（'vegetable，{。
网址：蔬菜，
TemplateUrl：'vegetable HTML。
}）
国家（'index，{。
URL：索引，
模板：这是网页
}）；
}）；




因为我们是在这里与fruit.html和vegetable.html地方index.html

在同一目录下，模板下的路径建议使用绝对路径。

效果如下，当初始默认接口是：



点击水果并切换到水果页。



点击蔬菜并切换到蔬菜页。



这里介绍了UI路由页面的基本用法。这种用法基本上与NG路由实现的功能相同。让我们来看一下所有配置属性的基本含义。

我templateurl）模板/

模板：字符串方式的模板内容，或返回HTML的函数

TemplateUrl：模板路径或一个函数，返回模板路径

TemplateProvider：一个函数返回的HTML内容

例如：在我们的例子中


国家（'vegetable，{。
网址：蔬菜，
TemplateUrl：'vegetable HTML。
}）
国家（'index，{。
URL：索引，
模板：这是网页
}）；




（二）控制器

控制器返回对应于URL模板的控制器的名称，或对应于URL模板的控制器函数。如果没有相应的模板定义，则不会创建控制器对象。

（三）解决

使用解决功能，我们可以准备一套用来注入到控制器的依赖对象，ngroute，解决在实际绘制解决承诺。解析选项提供一个对象，对象中的键是准备注入控制器的依赖项名称，其值是创建对象的工厂。

三.通过用户界面路由实现深度路由嵌套

我们在水果页添加了一个新HTML。



一个橘子
苹果
香蕉






我们发现，在第一级导航栏下，有两个级别的导航栏（不止一个UI视图）。

重新配置JS路由，进一步嵌套在第一级路由水果的基础上，以及js代码

如下：


stateprovider.state美元（'fruit，{
网址：水果，
TemplateUrl：'fruit HTML。
}）
国家（'vegetable，{。
网址：蔬菜，
TemplateUrl：'vegetable HTML。
}）
国家（'index，{。
URL：索引，
模板：这是网页
}）
。状态（'fruit。橙色，{
URL：橙，
TemplateUrl：'orange HTML，
}）
（'fruit。状态。苹果，{
URL：苹果，
TemplateUrl：'apple HTML。
}）
。状态（'fruit香蕉{。
URL：香蕉，
TemplateUrl：'banana HTML。
}）；




最后，我们看看效果：现在点击第一级开关页显示水果：



点击橙、苹果或香蕉的效果是，两级转换页面的效果是：



4。另外，UI路由还可以实现多视图路由，功能是相同的状态，整个页面被分成几个小页面来显示不同的值。

更多的读者在AngularJS相关内容感兴趣的可以看看网站：AngularJS入门和进阶教程和AngularJS MVC架构概述

希望这篇文章能帮助的AngularJS程序设计。