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 相关文章推荐
js传值 判断
Oct 26 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
Jun 27 Javascript
如何实现textarea里的不同文本显示不同颜色
Jan 20 Javascript
javascript实现checkBox的全选,反选与赋值
Mar 12 Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 Javascript
JS区分浏览器页面是刷新还是关闭
Apr 17 Javascript
angular2中Http请求原理与用法详解
Jan 11 Javascript
VUE基于NUXT的SSR 服务端渲染
Nov 30 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
May 10 Javascript
基于vue如何发布一个npm包的方法步骤
May 15 Javascript
react-router-dom 嵌套路由的实现
May 02 Javascript
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
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
服务器变量 $_SERVER 的深入解析
2013/07/02 PHP
分享50个提高PHP执行效率的技巧
2015/12/26 PHP
PHP多维数组元素操作类的方法
2016/11/14 PHP
ThinkPHP简单使用memcache缓存的方法
2016/11/15 PHP
PHP读取Excel类文件
2017/05/15 PHP
实例讲解php将字符串输出到HTML
2019/01/27 PHP
JS 类型转换常见方法小结
2010/05/31 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
2013/10/15 Javascript
JS动态加载当前时间的方法
2015/02/09 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
2015/12/31 Javascript
JavaScript中的Number数字类型学习笔记
2016/05/26 Javascript
js跨域资源共享 基础篇
2016/07/02 Javascript
基于slideout.js实现移动端侧边栏滑动特效
2016/11/28 Javascript
使用BootStrap实现悬浮窗口的效果
2016/12/13 Javascript
浅析BootStrap中Modal(模态框)使用心得
2016/12/24 Javascript
JavaScript 中 apply 、call 的详解
2017/03/21 Javascript
JavaScript实现的商品抢购倒计时功能示例
2017/04/17 Javascript
Vue.js鼠标悬浮更换图片功能
2017/05/17 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
2020/12/19 Vue.js
[06:53]DOTA2每周TOP10 精彩击杀集锦vol.3
2014/06/25 DOTA
简单使用Python自动生成文章
2014/12/25 Python
Python类属性的延迟计算
2016/10/22 Python
深入理解Python中的 __new__ 和 __init__及区别介绍
2018/09/17 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
Python基础学习之类与实例基本用法与注意事项详解
2019/06/17 Python
Python3运算符常见用法分析
2020/02/14 Python
Python中有几个关键字
2020/06/04 Python
美国时装品牌:Nautica(诺帝卡)
2016/08/28 全球购物
查找廉价航班和发现新目的地:Kiwi.com
2019/02/25 全球购物
阿尔卡特(中国)的面试题目
2014/08/20 面试题
Python如何定义一个函数
2015/09/01 面试题
党的群众路线教育实践活动对照检查材料(个人)
2014/09/24 职场文书
保险内勤岗位职责
2015/04/13 职场文书
学习心理学心得体会
2016/01/22 职场文书