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操作referer详细解析
Mar 10 Javascript
JavaScript事件类型中UI事件详解
Jan 14 Javascript
jquery.validate使用详解
Jun 02 Javascript
CodeMirror js代码加亮使用总结
Mar 25 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
Jun 23 Javascript
BootStrap Fileinput上传插件使用实例代码
Jul 28 Javascript
浅谈Vue Element中Select下拉框选取值的问题
Mar 01 Javascript
Angular2进阶之如何避免Dom误区
Apr 02 Javascript
Node.js Windows Binary二进制文件安装方法
May 16 Javascript
微信小程序文章详情页跳转案例详解
Jul 09 Javascript
基于JS实现简单滑块拼图游戏
Oct 12 Javascript
quickjs 封装 JavaScript 沙箱详情
Nov 02 Javascript
基于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
php 购物车完整实现代码
2014/06/05 PHP
php计算两个日期相差天数的方法
2015/03/14 PHP
php中 ob_start等函数截取标准输出的方法
2015/06/22 PHP
PHP数据分析引擎计算余弦相似度算法示例
2017/08/08 PHP
表单元素事件 (Form Element Events)
2009/07/17 Javascript
JS无限树状列表实现代码
2011/01/11 Javascript
document.createElement()用法
2013/03/13 Javascript
javascript实现原生ajax的几种方法介绍
2013/09/21 Javascript
JQuery设置时间段下拉选择实例
2014/12/30 Javascript
JavaScript弹出对话框的三种方式
2016/03/23 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
如何用JS判断两个数字的大小
2016/07/21 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
2016/09/01 Javascript
node.js缺少mysql模块运行报错的解决方法
2016/11/13 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
Javascript实现页面滚动时导航智能定位
2017/05/06 Javascript
详解webpack2异步加载套路
2018/09/14 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
2019/08/01 Javascript
微信小程序按顺序同步执行的两种方式
2019/12/20 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:奇迹哥卡尔秀翻全场
2017/03/28 DOTA
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
对python 判断数字是否小于0的方法详解
2019/01/26 Python
在python中画正态分布图像的实例
2019/07/08 Python
python3.6编写的单元测试示例
2019/08/17 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
2012/06/04 HTML / CSS
html5 canvas 画图教程案例分析
2012/11/23 HTML / CSS
Ray-Ban雷朋西班牙官网:全球领先的太阳眼镜品牌
2018/11/28 全球购物
美国在线和移动免费会员制批发零售商:Boxed(移动端的Costco)
2020/01/02 全球购物
生产部经理岗位职责
2013/12/16 职场文书
企业车辆管理制度
2014/01/24 职场文书
招聘专员岗位职责
2014/03/07 职场文书
岗位明星事迹材料
2014/05/18 职场文书
golang 在windows中设置环境变量的操作
2021/04/29 Golang
如何有效防止sql注入的方法
2021/05/25 SQL Server
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
2021/11/11 HTML / CSS