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 相关文章推荐
一些常用的JavaScript函数(json)附详细说明
May 25 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
Mar 29 Javascript
通过遮罩层实现浮层DIV登录的js代码
Feb 07 Javascript
Javascript实现禁止输入中文或英文的例子
Dec 09 Javascript
javascript验证邮件地址和MX记录的方法
Jun 16 Javascript
AngularJS中处理多个promise的方式
Feb 02 Javascript
深入理解requestAnimationFrame的动画循环
Sep 20 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
Aug 17 Javascript
jQuery层叠选择器用法实例分析
Jun 28 jQuery
微信小程序实现页面浮动导航
Jan 08 Javascript
js实现贪吃蛇游戏 canvas绘制地图
Sep 09 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
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
Window下PHP三种运行方式图文详解
2013/06/11 PHP
php获取操作系统语言代码
2013/11/04 PHP
PHP 面向对象程序设计(oop)学习笔记 (五) - PHP 命名空间
2014/06/12 PHP
3种方法轻松处理php开发中emoji表情的问题
2016/07/18 PHP
jQuery的初始化与对象构建之浅析
2011/04/12 Javascript
js判断上传文件的类型和大小示例代码
2013/10/18 Javascript
$.each与$().each的区别示例介绍
2014/03/20 Javascript
Jquery中Event对象属性小结
2015/02/27 Javascript
javascript实现的网站访问量统计代码
2015/12/20 Javascript
JavaScript中eval函数的问题
2016/01/31 Javascript
js css+html实现简单的日历
2016/07/14 Javascript
JS禁止查看网页源代码的实现方法
2016/10/12 Javascript
JS实现的tab切换选项卡效果示例
2017/02/28 Javascript
微信小程序显示下拉列表功能【附源码下载】
2017/12/12 Javascript
纯js代码生成可搜索选择下拉列表的实例
2018/01/11 Javascript
vue 中引用gojs绘制E-R图的方法示例
2018/08/24 Javascript
详解webpack4之splitchunksPlugin代码包分拆
2018/12/04 Javascript
详解JavaScript修改注册表的方法
2020/01/05 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
解决windows下Sublime Text 2 运行 PyQt 不显示的方法分享
2014/06/18 Python
Python两个内置函数 locals 和globals(学习笔记)
2016/08/28 Python
python 迭代器和iter()函数详解及实例
2017/03/21 Python
一文带你了解Python中的字符串是什么
2018/11/20 Python
Python基础教程之if判断,while循环,循环嵌套
2019/04/25 Python
Python列表list操作相关知识小结
2020/01/29 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
使用keras框架cnn+ctc_loss识别不定长字符图片操作
2020/06/29 Python
Python列表嵌套常见坑点及解决方案
2020/09/30 Python
python 提高开发效率的5个小技巧
2020/10/19 Python
中国跨境电子商务网站:NewFrog
2018/03/10 全球购物
留学自荐信写作方法
2014/01/27 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
财务部岗位职责
2015/02/03 职场文书
2015年社区环境卫生工作总结
2015/04/21 职场文书
浅谈node.js中间件有哪些类型
2021/04/29 Javascript
vue-element-admin项目导入和导出的实现
2021/05/21 Vue.js