AngularJS基于ui-route实现深层路由的方法【路由嵌套】  更新时间:2016年12月14日 09:39:22   作者:小小小小小亮   这篇文章主要介绍了AngularJS基于ui-route实现深层路由的方法,涉及AngularJS路由嵌套操作相关实现步骤与技巧,需要的朋友可以参考下 本文实例讲述了AngularJS基于ui-route实现深层路由的方法。分享给大家供大家参考,具体如下: 1.前面我们通过了简单的ng-route实现了简单层次的路由,对于深层次的路由,我们可以通过ui-route来实现。 (1)ng-route的局限性:一个页面无法嵌套多个视图,也就是说一个页面只能有包含一个页面一个控制器的切换。 (2)ui-route的改进:在具有富客户端的单页应用中,要在一个页面中呈现不同的视图,我们可以通过ui-route实现路由的嵌套。 2 . ui-route的使用方法 (1)首先加载angular-ui-route.js (2)设置HTML页面,这里不同于ng-route中的ng-view 首页 水果 蔬菜 (3)在JS中配置路由 (因为chorme不支持本地文件访问,而FF支持,这里不想搭建本地服务器的,可以用火狐浏览器调试) 配置路由的代码如下: angular.module(‘myapp’,[‘ui.router’]) .config(function($stateProvider,$urlRouterProvider){ $urlRouterProvider.otherwise(‘/index’); $stateProvider.state(‘fruit’,{ url:’/fruit’, templateUrl:’fruit.html’ }) .state(‘vegetable’,{ url:’/vegetable’, templateUrl:’vegetable.html’ }) .state(‘index’,{ url:’/index’, template:’这是首页’ }); }); 因为在这里我们将index.html和fruit.html以及vegetable.html放置在 了同一个目录下,template下的路径建议使用绝对路径的形式。 效果如下,当初始默认界面为: 点击水果,切换到水果页面: 点击蔬菜,切换到蔬菜页面: 这里介绍了ui-route页面的基础用法,这个用法与ng-route实现的功能大体上是一致的,下面我们来看各个配置属性的基本含义: I)template/templateUrl template:字符串方式的模板内容,或者是一个返回html的函数 templateUrl:模板路径或者是返回模板路径的函数 templateProvider:返回HTML内容的函数 例如:在我们的例子中所写的 .state(‘vegetable’,{ url:’/vegetable’, templateUrl:’vegetable.html’ }) .state(‘index’,{ url:’/index’, template:’这是首页’ }); II).controller 控制器,返回对应url模板的控制器名称,或者是对应url模板的控制器函数。如果没有对应的模板定义,控制器对象就不会被创建 III).resolve 使用resolve功能,我们可以准备一组用来注入到控制器的依赖对象。在ngRoute中,resolve可以在实际渲染之前解决掉promise,resolve选项提供一个对象,对象中的key就是准备注入到controller中的依赖名称,值则是这个创建对象的工厂。 3.通过ui-route实现深层次的路由嵌套 我们在水果页面加上了新的html: 橘子 苹果 香蕉 我们发现现在一级导航栏底下,多了一个二级导航栏(多了一个ui-view) 重新配置JS路由,在第一级路由fruit的基础上进一步进行嵌套,JS代码 如下: $stateProvider.state(‘fruit’,{ url:’/fruit’, templateUrl:’fruit.html’ }) .state(‘vegetable’,{ url:’/vegetable’, templateUrl:’vegetable.html’ }) .state(‘index’,{ url:’/index’, template:’这是首页’ }) .state(‘fruit.orange’,{ url:’/orange’, templateUrl:’orange.html’, }) .state(‘fruit.apple’,{ url:’/apple’, templateUrl:’apple.html’ }) .state(‘fruit.banana’,{ url:’/banana’, templateUrl:’banana.html’ }); 最后我们来看效果:现在点击水果一级切换页面之后显示为: 在点击橘子,苹果或者香蕉进行选择,其效果为,即二级切换页面的效果为: 4.此外ui-route还可以实现多视图路由,这个功能同一个state下,全页面分为几个细小的页面分别显示不同的值。 更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》 希望本文所述对大家AngularJS程序设计有所帮助。 您可能感兴趣的文章: angularjs ui-router中路由的二级嵌套 AngularJS ui-router (嵌套路由)实例 AngularJS使用ui-route实现多层嵌套路由的示例 AngularJS ui-route 路由 相关文章 前后端如何实现登录token拦截校验详解 这篇文章主要给大家介绍了关于前后端如何实现登录token拦截校验的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 2018-09-09 在angularJs中进行数据遍历的2种方法 今天小编就为大家分享一篇在angularJs中进行数据遍历的2种方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-10-10 angular内容投影详解 这篇文章主要为大家介绍了angular内容投影,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助 2021-12-12 angular4 获取wifi列表中文显示乱码问题的解决 这篇文章主要介绍了angular4 获取wifi列表中文显示乱码问题的解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-10-10 AngularJS实践之使用NgModelController进行数据绑定 大家都知道AngularJS中的指令是其尤为复杂的一个部分,但是这也是其比较好玩的地方。这篇文章我们就来说一说如何在我们自定义的指令中,利用ngModel的controller来做双向数据绑定,本文对大家学习AngularJS具有一定的参考借鉴价值,有需要的朋友们可以参考借鉴。 2016-10-10 AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码 本篇文章主要介绍了AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码,具有一定的参考价值,有兴趣的可以了解一下。 2016-12-12 详解Angular Karma测试的持续集成实践 这篇文章主要介绍了详解Angular Karma测试的持续集成实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 2019-11-11 angularjs实现多张图片上传并预览功能 这篇文章主要为大家详细介绍了angularjs实现多张图片上传并预览功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-02-02 angular将html代码输出为内容的实例 今天小编就为大家分享一篇angular将html代码输出为内容的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-09-09 实例解析angularjs的filter过滤器 本文对angularjs的filter过滤器进行系统介绍,附上实例解析,便于理解。具有很好的参考价值,需要的朋友可以看下 2016-12-12 最新评论

本文实例讲述了AngularJS基于ui-route实现深层路由的方法。分享给大家供大家参考,具体如下:

1.前面我们通过了简单的ng-route实现了简单层次的路由,对于深层次的路由,我们可以通过ui-route来实现。

(1)ng-route的局限性:一个页面无法嵌套多个视图,也就是说一个页面只能有包含一个页面一个控制器的切换。
(2)ui-route的改进:在具有富客户端的单页应用中,要在一个页面中呈现不同的视图,我们可以通过ui-route实现路由的嵌套。

2 . ui-route的使用方法

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

 <script src="js/angular-ui-router.js"></script>

(2)设置HTML页面,这里不同于ng-route中的ng-view

<ul>
  <li><a ui-sref="index">首页</a></li>
  <li><a ui-sref="fruit">水果</a></li>
  <li><a ui-sref="vegetable">蔬菜</a></li>
 </ul>

(3)在JS中配置路由

(因为chorme不支持本地文件访问,而FF支持,这里不想搭建本地服务器的,可以用火狐浏览器调试)

配置路由的代码如下:

angular.module('myapp',['ui.router'])
.config(function($stateProvider,$urlRouterProvider){
  $urlRouterProvider.otherwise('/index');
  $stateProvider.state('fruit',{
    url:'/fruit',
    templateUrl:'fruit.html'
  })
  .state('vegetable',{
    url:'/vegetable',
    templateUrl:'vegetable.html'
  })
  .state('index',{
    url:'/index',
    template:'<h2>这是首页</h2>'
  });
});

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

效果如下,当初始默认界面为:

点击水果,切换到水果页面:

点击蔬菜,切换到蔬菜页面:

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

I)template/templateUrl

template:字符串方式的模板内容,或者是一个返回html的函数
templateUrl:模板路径或者是返回模板路径的函数
templateProvider:返回HTML内容的函数

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

 .state('vegetable',{
    url:'/vegetable',
    templateUrl:'vegetable.html'
  })
  .state('index',{
    url:'/index',
    template:'<h2>这是首页</h2>'
  });

II).controller

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

III).resolve

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

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

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

 <ul>
  <li><a ui-sref="fruit.orange">橘子</a></li>
  <li><a ui-sref="fruit.apple">苹果</a></li>
  <li><a ui-sref="fruit.banana">香蕉</a></li>
 </ul>
 <div ui-view></div>

我们发现现在一级导航栏底下,多了一个二级导航栏(多了一个ui-view)

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

$stateProvider.state('fruit',{
    url:'/fruit',
    templateUrl:'fruit.html'
})
.state('vegetable',{
    url:'/vegetable',
    templateUrl:'vegetable.html'
})
.state('index',{
    url:'/index',
    template:'<h2>这是首页</h2>'
})
.state('fruit.orange',{
    url:'/orange',
    templateUrl:'orange.html',
})
.state('fruit.apple',{
    url:'/apple',
    templateUrl:'apple.html'
})
.state('fruit.banana',{
    url:'/banana',
    templateUrl:'banana.html'
});

最后我们来看效果:现在点击水果一级切换页面之后显示为:

在点击橘子,苹果或者香蕉进行选择,其效果为,即二级切换页面的效果为:

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

更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

您可能感兴趣的文章:

  • angularjs ui-router中路由的二级嵌套
  • AngularJS ui-router (嵌套路由)实例
  • AngularJS使用ui-route实现多层嵌套路由的示例
张贴在3