AngularJS基于ui-route实现深度路由的方法[路由嵌套]

本文通过一个实例说明了在AngularJS中实现基于ui-route的深度路由的方法。分享给大家参考，如下：

1.我们已经通过简单的ng-route实现了简单级别的路由，并且可以通过ui-route实现深层路由。

(1)1)ng-route的局限性：一个页面不能嵌套多个视图，也就是说一个页面只能有一个包含一个页面和一个控制器的开关。(2)ui-route的改进：在客户端丰富的单页应用中，为了在一个页面中呈现不同的视图，我们可以通过UI-route来嵌套路由。

2.如何使用用户界面路由

(1)首先加载angular-ui-route.js。

脚本src=' http : js/angular-ui-router . js '/脚本(2)设置HTML页面，与ng-route中的ng-view不同

Ul lia ui-sref='索引'主页/a/li lia ui-sref='水果'水果/a/li lia ui-sref='蔬菜'蔬菜/a/li /ul(3)在JS中配置路由

(因为chorme不支持本地文件访问，但是FF支持，如果不想在这里搭建本地服务器，可以用Firefox浏览器调试。)

配置路由的代码如下：

angular.module('myapp '，['ui.router'])。config(函数($stateProvider，$ urlRouterProvider){ $ urlRouterProvider . others('/index ')；$stateProvider.state('水果'，{ URL : '/水果'，templateUrl: '水果. html' })。状态('蔬菜'，{ url: '/蔬菜'，模板URL : '蔬菜. html'})。state ('index '，{url:'/index '，template :这是主页/H2 ' })；});因为我们这里把index.html、fruit.html、vegetable.html放在同一个目录下，所以建议使用绝对路径作为模板下的路径。

当初始默认界面为：

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

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

介绍了ui-route页面的基本用法，与ng-route实现的功能基本一致。让我们看看每个配置属性的基本含义：

I)模板/模板Url

模板：字符串形式的模板内容，或返回html的函数：模板Url:模板路径或模板提供程序：返回HTML内容的函数

例如，我们的例子中写了什么。state('素菜'，{ URL : '/'素菜'，templateurl3360 '素菜. html'})。state ('index '，{url3360'/index '，template3360这是主页/H2 ' })；二)。控制器

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

三)。分解

使用解析功能，我们可以准备一组依赖对象，以便注入控制器。在ngRoute中，解析可以在实际渲染之前解决承诺。resolve选项提供了一个对象，其中的键是要注入控制器的依赖项名称，值是创建对象的工厂。

3.通过ui-route实现深度路由嵌套

我们向水果页面添加了一个新的html:

Ul lia ui-sref='水果.橙子' orange /a/li lia ui-sref='水果.苹果' apple /a/li lia ui-sref='水果.香蕉' banana /a/li /ul div ui-view/div我们发现主导航栏下面还有一个辅助导航栏(。

重新配置JS路由，在一级路由果实的基础上进一步嵌套。JS代码如下：

$stateProvider.state('水果'，{ URL : '/水果'，templateUrl: '水果. html'})。状态('蔬菜'，{ url: '/蔬菜'，模板URL : '蔬菜. html'})。状态(' index '，{url:'/index '，模板：这是第一页/h2'})。state('水果. orange '，{url3360'/orange '，templateUrl:'orange.html '，})。state('水果.苹果'，{ URL : '/苹果'，templateUrl: '苹果. html'})。state('水果.香蕉'，{ URL : '/香蕉'，templateUrl: '香蕉. html ' })；最后来看看效果：现在点击水果一级切换页面，会显示为：

点击橙色、苹果或香蕉进行选择，效果为，即二次页面切换的效果为：

4.此外，ui-route还可以实现多视图路由。在相同的状态下，整个页面被分成几个小页面来显示不同的值。

更多对AngularJS感兴趣的读者可以查看本网站的主题：《AngularJS入门与进阶教程》和《AngularJS MVC架构总结》

希望本文对AngularJS编程有所帮助。