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选择器之基本过滤选择器详解
Jan 27 Javascript
深入理解Javascript里的依赖注入
Mar 19 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
May 25 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
Aug 08 Javascript
ES6所改良的javascript“缺陷”问题
Aug 23 Javascript
AngularJS中的DOM操作用法分析
Nov 04 Javascript
JavaScript仿聊天室聊天记录
Dec 27 Javascript
Vuex简单入门
Apr 19 Javascript
PHP7新特性简述
Jun 11 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
Dec 25 Javascript
vue-cli3添加模式配置多环境变量的方法
Jun 05 Javascript
JavaScript中的几种继承方法示例
Dec 06 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
Search Engine Friendly的URL设计
2006/10/09 PHP
php将图片保存为不同尺寸图片的图片类实例
2015/03/30 PHP
php加密之discuz内容经典加密方式实例详解
2017/02/04 PHP
PHP常见字符串操作函数与用法总结
2019/03/04 PHP
javascript 控制 html元素 显示/隐藏实现代码
2009/09/01 Javascript
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
2014/01/12 Javascript
如何判断微信内置浏览器(通过User Agent实现)
2014/09/01 Javascript
ie8模式下click无反应点击option无反应的解决方法
2014/10/11 Javascript
一个php+js实时显示时间问题
2015/10/12 Javascript
浅析nodejs实现Websocket的数据接收与发送
2015/11/19 NodeJs
原生JS和jQuery版实现文件上传功能
2016/04/18 Javascript
bootstrap table分页模板和获取表中的ID方法
2017/01/10 Javascript
Vue.js -- 过滤器使用总结
2017/02/18 Javascript
微信小程序实战之自定义抽屉菜单(7)
2017/04/18 Javascript
express框架实现基于Websocket建立的简易聊天室
2017/08/10 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
2018/07/31 jQuery
vue基础之使用get、post、jsonp实现交互功能示例
2019/03/12 Javascript
通过jQuery学习js类型判断的技巧
2019/05/27 jQuery
js实现图片区域可点击大小随意改变(适用移动端)代码实例
2019/09/11 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
[58:25]VP vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python监控linux内存并写入mongodb(推荐)
2017/09/11 Python
python 中文件输入输出及os模块对文件系统的操作方法
2018/08/27 Python
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
Python生命游戏实现原理及过程解析(附源代码)
2019/08/01 Python
Python中join()函数多种操作代码实例
2020/01/13 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
python根据字典的键来删除元素的方法
2020/08/16 Python
python输入中文的实例方法
2020/09/14 Python
HTML5实现Notification API桌面通知功能
2016/03/02 HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
毕业生自我推荐
2013/11/04 职场文书
活动总结怎么写
2014/04/28 职场文书
干部考核工作总结2015
2015/07/24 职场文书
新手开公司创业注意事项有哪些?
2019/07/29 职场文书