angularjs ui-router中路由的二级嵌套


Posted in Javascript onMarch 10, 2017

关于ui-router中嵌套路由中的问题

1.首先我们的页面层次为

angularjs ui-router中路由的二级嵌套 

其中Main.html是我们的主页,我们要在main.html中对路由进行统一的管理。

main.html页面中有一个ui-view在这里将填充PageTab.html,同时被填充的PageTab.html中也有一个ui-view

这样就实现了嵌套路由。

最终效果:

angularjs ui-router中路由的二级嵌套 

当我们点击Page-1时出现的是Page1中的内容,同理点击Page-2。

下面是实际的代码:

Main.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js"></script>
<script src="js/angular-ui-router.js"></script>
<script>  
</script>
</head>
<body>
<h3>Main page</h3>
  <div>
    <div ui-view></div>
  </div>
<script>
  angular.module("myApp",["ui.router"])
  .config(function($stateProvider){
    $stateProvider
    .state("PageTab",{
      url:"",
      templateUrl:"PageTab.html"
    })
    .state("PageTab.Page1",{
      url:"/Page1",
      templateUrl:"Page1.html"
    })
    .state("PageTab.Page2",{
      url:"/Page2",
      templateUrl:"Page2.html"
    })
  })
</script>
</body>
</html>

PageTab.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>PageTab</h2>
  <div>
     <span style="width:100px" ui-sref=".Page1"><a href="">Page-1</a></span>
     <span style="width:100px" ui-sref=".Page2"><a href="">Page-2</a></span>
  </div>
  <div ui-view=""></div>
</body>
</html>

Page1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page1</title>
</head>
<body>
  <h2>Page1</h2>
</body>
</html>

Page2.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page2</title>
</head>
<body>
  <h2>Page2</h2>
</body>
</html>

以上是全部的页面代码,Main.html中js库需要手动导入。

下面我们重点看Main.html中对路由统一管理的部分也就是这段js代码

<script>
  angular.module("myApp",["ui.router"])
  .config(function($stateProvider){
    $stateProvider
    .state("PageTab",{
      url:"",
      templateUrl:"PageTab.html"
    })
    .state("PageTab.Page1",{
      url:"/Page1",
      templateUrl:"Page1.html"
    })
    .state("PageTab.Page2",{
      url:"/Page2",
      templateUrl:"Page2.html"
    })
  })
</script>

一共三个状态:

第一个状态

.state("PageTab",{
      url:"",
      templateUrl:"PageTab.html"
    })

在第一个中我们定义了初始状态名为PageTab,url状态为空,这时候在母版中将会在ui-view中填充PageTab.html这个页面。

第二个状态

.state("PageTab.Page1",{
      url:"/Page1",
      templateUrl:"Page1.html"
    })

我们把这个状态名字命名为PageTab.Page1 这时候的路由将会交给PageTab来处理,即在PageTab.html页面中的ui-view中填充Page1.html中的内容。同理如果state命名为PageTab.Page2 那么处理它的就会是PageTab.html这个页面。

希望本文所述对你有所帮助,angularjs ui-router中路由的二级嵌套就给大家介绍到这里了。希望大家继续关注我们的网站!想要学习angularjs可以继续关注本站。

Javascript 相关文章推荐
Prototype使用指南之range.js
Jan 10 Javascript
javascript DOM编程实例(智播客学习)
Nov 23 Javascript
jquery实现excel导出的方法
Apr 04 Javascript
javascript实现信息增删改查的方法
Jul 25 Javascript
使用递归遍历对象获得value值的实现方法
Jun 14 Javascript
node.js学习之base64编码解码
Oct 21 Javascript
微信小程序 增、删、改、查操作实例详解
Jan 13 Javascript
JS基于正则表达式实现的密码强度验证功能示例
Sep 21 Javascript
js实现二级菜单点击显示当前内容效果
Apr 28 Javascript
JavaScript遍历数组和对象的元素简单操作示例
Jul 09 Javascript
JS防抖和节流实例解析
Sep 24 Javascript
为什么node.js不适合大型项目
Apr 28 Javascript
AngularJS ui-router (嵌套路由)实例
Mar 10 #Javascript
微信小程序手势操作之单触摸点与多触摸点
Mar 10 #Javascript
Web纯前端“旭日图”实现元素周期表
Mar 10 #Javascript
微信小程序 MD5的方法详解及实例代码
Mar 10 #Javascript
jQuery实现扑克正反面翻牌效果
Mar 10 #Javascript
AngularJS之页面跳转Route实例代码
Mar 10 #Javascript
Angular多选、全选、批量选择操作实例代码
Mar 10 #Javascript
You might like
安装ImageMagick出现error while loading shared libraries的解决方法
2014/09/23 PHP
php设计模式之策略模式应用案例详解
2019/06/17 PHP
让人印象深刻的10个jQuery手风琴效果应用
2012/05/08 Javascript
jQuery取id有.的值的方法
2014/05/21 Javascript
浅谈Unicode与JavaScript的发展史
2015/01/19 Javascript
jQuery实现为控件添加水印文字效果(附源码)
2015/12/02 Javascript
BootStrap table使用方法分析
2016/11/08 Javascript
ztree简介_动力节点Java学院整理
2017/07/19 Javascript
详解使用vuex进行菜单管理
2017/12/21 Javascript
解决vue 打包发布去#和页面空白的问题
2018/09/04 Javascript
js事件on动态绑定数据,绑定多个事件的方法
2018/09/15 Javascript
vue使用pdfjs显示PDF可复制的实现方法
2018/12/14 Javascript
浅谈Webpack多页应用HMR卡住问题
2019/04/24 Javascript
vue实现路由懒加载及组件懒加载的方式
2019/06/11 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
ES6 Iterator接口和for...of循环用法分析
2019/07/31 Javascript
.netcore+vue 实现压缩文件下载功能
2020/09/24 Javascript
[02:39]DOTA2英雄基础教程 极限穿梭编织者
2013/12/05 DOTA
说一说Python logging
2016/04/15 Python
Python3中条件控制、循环与函数的简易教程
2017/11/21 Python
Python操作mysql数据库实现增删查改功能的方法
2018/01/15 Python
TensorFlow实现MLP多层感知机模型
2018/03/09 Python
对Python中的条件判断、循环以及循环的终止方法详解
2019/02/08 Python
pandas 强制类型转换 df.astype实例
2020/04/09 Python
关于python tushare Tkinter构建的简单股票可视化查询系统(Beta v0.13)
2020/10/19 Python
End Clothing美国站:英国男士潮牌商城
2018/04/20 全球购物
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
Linux面试经常问的文件系统操作命令
2015/11/05 面试题
外语系毕业生找工作的求职信
2013/11/28 职场文书
银行实习的自我鉴定
2013/12/10 职场文书
兽医医药专业求职信
2014/07/27 职场文书
孙振耀退休感言
2015/08/01 职场文书
《认识钟表》教学反思
2016/02/16 职场文书
Vue鼠标滚轮滚动切换路由效果的实现方法
2021/08/04 Vue.js
python函数的两种嵌套方法使用
2022/04/02 Python
我的收音机情缘
2022/04/05 无线电