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 相关文章推荐
jQuery 核心函数以及jQuery对象
Mar 23 Javascript
javascript 面向对象的JavaScript类
May 04 Javascript
javascript 常用功能总结
Mar 18 Javascript
多种方法判断Javascript对象是否存在
Sep 22 Javascript
AJAX跨域请求json数据的实现方法
Nov 11 Javascript
一个js控制的导航菜单实例代码
Dec 03 Javascript
JSONP原理及简单实现
Jun 08 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
Oct 10 Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 Javascript
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
详解Vue组件实现tips的总结
Nov 01 Javascript
关于layui的动态图标不显示的解决方法
Sep 04 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
PHP实现读取一个1G的文件大小
2013/08/24 PHP
PHP中Session和Cookie是如何操作的
2015/10/10 PHP
PHP从零开始打造自己的MVC框架之类的自动加载实现方法详解
2019/06/03 PHP
JavaScript传递变量: 值传递?引用传递?
2011/02/22 Javascript
使用jQuery设置disabled属性与移除disabled属性
2014/08/21 Javascript
js实现div在页面拖动效果
2016/05/04 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
2017/04/11 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
2018/02/26 Javascript
vue forEach循环数组拿到自己想要的数据方法
2018/09/21 Javascript
jQuery AJAX与jQuery事件的分析讲解
2019/02/18 jQuery
vue实现简单计算商品价格
2020/09/14 Javascript
python实现探测socket和web服务示例
2014/03/28 Python
Python数据库的连接实现方法与注意事项
2016/02/27 Python
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
python操作mysql数据库
2017/03/05 Python
Tensorflow简单验证码识别应用
2017/05/25 Python
python中for用来遍历range函数的方法
2018/06/08 Python
Python学习小技巧总结
2018/06/10 Python
Python二叉搜索树与双向链表转换算法示例
2019/03/02 Python
关于python pycharm中输出的内容不全的解决办法
2020/01/10 Python
Finishline官网:美国一家领先的运动品牌鞋类、服装零售商
2016/07/20 全球购物
Hotels.com韩国:海外国内旅行所需的酒店和住宿预订网站
2020/05/08 全球购物
环境工程毕业生自荐信
2013/11/17 职场文书
给领导的致歉信范文
2014/01/13 职场文书
给老师的一封建议书
2014/03/13 职场文书
股份转让协议书
2014/04/12 职场文书
计算机网络及管理学专业求职信
2014/06/05 职场文书
初中优秀教师事迹材料
2014/08/18 职场文书
财务科长个人对照检查材料
2014/09/18 职场文书
考试作弊被抓检讨书
2014/10/02 职场文书
群众路线剖析材料范文
2014/10/09 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
MySQL单表千万级数据处理的思路分享
2021/06/05 MySQL
MySQL主从切换的超详细步骤
2022/06/28 MySQL
html原生table实现合并单元格以及合并表头的示例代码
2023/05/07 HTML / CSS