AngularJS基于ui-route实现深层路由的方法【路由嵌套】


Posted in Javascript onDecember 14, 2016

本文实例讲述了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下的路径建议使用绝对路径的形式。

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

AngularJS基于ui-route实现深层路由的方法【路由嵌套】

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

AngularJS基于ui-route实现深层路由的方法【路由嵌套】

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

AngularJS基于ui-route实现深层路由的方法【路由嵌套】

这里介绍了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'
});

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

AngularJS基于ui-route实现深层路由的方法【路由嵌套】

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

AngularJS基于ui-route实现深层路由的方法【路由嵌套】

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

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

Javascript 相关文章推荐
JavaScript 组件之旅(一)分析和设计
Oct 28 Javascript
js 针对html DOM元素操作等经验累积
Mar 11 Javascript
JavaScript中的this关键字使用详解
Aug 14 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
Apr 17 Javascript
JS求解三元一次方程组值的方法
Jan 03 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
Mar 01 Javascript
提高JavaScript执行效率的23个实用技巧
Mar 01 Javascript
ES6新增数据结构WeakSet的用法详解
Aug 07 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
vue 自动化路由实现代码
Sep 03 Javascript
JS数组方法reverse()用法实例分析
Jan 18 Javascript
vue绑定class的三种方法
Dec 24 Vue.js
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
Dec 14 #Javascript
Bootstrap实现圆角、圆形头像和响应式图片
Dec 14 #Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
Dec 14 #Javascript
深入理解jquery中的each用法
Dec 14 #Javascript
Bootstrap基本模板的使用和理解1
Dec 14 #Javascript
Bootstrap栅格系统的使用和理解2
Dec 14 #Javascript
jQuery的extend方法【三种】
Dec 14 #Javascript
You might like
解密ThinkPHP3.1.2版本之模块和操作映射
2014/06/19 PHP
PHP操作Redis常用命令的实例详解
2020/12/23 PHP
LBS blog sql注射漏洞[All version]-官方已有补丁
2007/08/26 Javascript
javascript 动态修改样式和层叠样式表代码
2010/04/27 Javascript
js escape,unescape解决中文乱码问题的方法
2010/05/26 Javascript
javascript 隔行换色函数代码
2010/10/24 Javascript
JavaScript中“+”的陷阱深刻理解
2012/12/04 Javascript
JS 操作Array数组的方法及属性实例解析
2014/01/08 Javascript
Js获取下拉框选定项的值和文本的实现代码
2014/02/26 Javascript
js与jquery回车提交的方法
2015/02/03 Javascript
jQuery UI设置固定日期选择特效代码分享
2015/08/27 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
2016/01/27 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
详解关于微信setData回调函数中的坑
2019/02/18 Javascript
Node.js事件的正确使用方法
2019/04/05 Javascript
vue组件化中slot的基本使用方法
2019/05/01 Javascript
vue在线动态切换主题色方案
2020/03/26 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
2020/10/13 Javascript
[43:47]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第一局
2016/03/05 DOTA
python脚本爬取字体文件的实现方法
2017/04/29 Python
用python制作游戏外挂
2018/01/04 Python
Python Django的安装配置教程图文详解
2019/07/17 Python
Python定时任务工具之APScheduler使用方式
2019/07/24 Python
Python遍历字典方式就实例详解
2019/12/28 Python
基于python实现地址和经纬度转换
2020/05/19 Python
品管员岗位职责
2013/11/10 职场文书
管理科学大学生求职信
2013/11/13 职场文书
班主任工作经验材料
2014/02/02 职场文书
国贸专业毕业求职信
2014/06/11 职场文书
2015年公司中秋节致辞
2015/07/31 职场文书
vue使用节流函数的踩坑实例指南
2021/05/20 Vue.js
python中%格式表达式实例用法
2021/06/18 Python
Redis 持久化 RDB 与 AOF的执行过程
2021/11/07 Redis
Lakehouse数据湖并发控制陷阱分析
2022/03/31 Oracle
Python+Matplotlib图像上指定坐标的位置添加文本标签与注释
2022/04/11 Python