ui-router多视图+嵌套视图+传参综合练习
ui-router多视图：页面上存在的多个ui-view，它们以名字区分；
嵌套视图：一个ui-view的一个状态下对应了一个html，这个html里面又有一个ui-view。
视图之间传参：用ui.sref="stateName({data:'123'})"或者$state.go("stateName",{data:123})；
传参的时候目标视图的state中要定义接收的参数params如url:"/home?data"或者params:{data:null};
在目标视图的控制器用$stateParams.data接收。
状态名代表一个状态，自定义的名字，url对应地址栏中的地址，views的名字对应ui-view的名字。
文件列表：index.html，home.html,home1.html,chat.html,our.html；
index.html内容如下：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>ui-view</title>
</head>
<body ng-controller="myCtrl">
<div ui-view></div>
<a ui-sref="homestate.home1({h1:'home-home1'})">跳到home1页面</a>
<a ui-sref="chatstate({data:'home-chat'})">跳到chat页面</a>
<a ui-sref="ourstate">跳到our页面</a>
<button ng-click="goour()">index下的按钮跳转到our</button>
<p>v1状态:</p>
<div ui-view="v1"></div>
<p>v2状态:</p>
<div ui-view="v2"></div>
</body>
<script src="http://lib.baomitu.com/angular.js/1.6.4/angular.min.js"></script>
<script src="http://lib.baomitu.com/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<script type="text/javascript">
var app = angular.module("myApp",["ui.router"]);
app.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.when('',"/home");
$stateProvider
.state('homestate', {
url: "/home",//控制地址栏跳转的地址
views:{
//"","v1","v2"是ui-view的名字
"":{
controller:"homeCtrl",
templateUrl: 'home.html'
},
"v1":{
template:"<p>homestate状态</p>"
}
}
})
.state("homestate.home1",{
url:"/home1/?h1?id",
//params:{h1:null,id:null},//写法同上;
views:{
"":{
controller:function($scope,$stateParams){
console.log($stateParams.h1);//ui-sref传参
console.log($stateParams.id);//state.go传参
},
templateUrl: 'home1.html'
},
//由于home1是home的子页面,所以v1和v2页面设置是无效的,因为v1和v2不在home页面里而是在index页面
}
})
.state("homestate.home2",{
url:"/home2",
views:{
"":{
controller:function($scope){
// console.log($stateParams.h1);
},
template: '<h2>我是home的子页面home2</h2>'
},
}
})
.state("chatstate",{
url:"/chat",
params:{data:null},
views:{
"":{
controller:function($scope,$stateParams){
console.log($stateParams.data);
},
templateUrl: 'chat.html'
},
"v1":{
template:"<p>chatstate状态</p>"
}
}
})
.state("ourstate",{
url:"/our",
params:{"id":null},//或者url:"/our:id"
views:{
"":{
controller:function($scope,$stateParams){
console.log($stateParams.id);
},
templateUrl: 'our.html'
},
"v2":{
template:"<p>ourstate状态</p>"
}
}
})
$urlRouterProvider.otherwise('/home');
}); app.controller("myCtrl",function($scope,$state){
$scope.goour = function (){
$state.go("ourstate",{id:"index-our"});
}
});
app.controller("homeCtrl",function($scope,$state){
$scope.goour = function (){
$state.go("ourstate",{id:"home-our"});
};
$scope.gohome1 = function(){
$state.go("homestate.home1",{id:"home-home1"});
};
$scope.gohome2 = function(){
$state.go("homestate.home2",{id:"home-home2"});
}
});
//注释：多视图views可以实现多个ui-view，根据地址或状态的不同使这几个ui-view分别显示不同内容(也可以不显示)，而且这几个状态是同级关系
//而嵌套视图的子视图是在父视图下的，父视图下应该有ui-view
</script>
</html>
home.html内容如下：
<h1>我是home界面</h1>
<button ng-click="gohome1()">跳转home1</button>
<button ng-click="gohome2()">跳转home2</button> <button ng-click="goour()">跳转our</button>
<div ui-view></div>
home1.html内容如下：
<h2>我是home的子页面home1</h2>
chat.html内容如下：
<h1>我是chat页面</h1>
our.html内容如下：
<h1>我是our界面</h1>
ui-router多视图+嵌套视图+传参综合练习的更多相关文章
- [Vue 牛刀小试]：第十三章 - Vue Router 基础使用再探（命名路由、命名视图、路由传参）
一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...
- vue router使用query和params传参的使用
传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,希望可以帮到大家. Vue ...
- Vue Router的params和query传参的使用和区别
vue页面跳转有两种方式分别是:name和path this.$router.push({name: 'HelloWorld2}) this.$router.push({path: '/hello-w ...
- （转）vue router 如何使用params query传参，以及有什么区别
写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞 ...
- vue router 如何使用params query传参，以及有什么区别
写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞 ...
- 视图向控制器传参@RequestMapping()和@RequestParam()
@RequestMapping()和@RequestParam()注解在spring-web-4.3.18.RELEASE.jar包下,当然可以是其他版本,所在包名如下: @RequestMappin ...
- vue 中 this.$router.push() 路由跳转传参 及 参数接收的方法
传递参数的方法:1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则params将无效.需要用name ...
- 我的一个React路由嵌套（多级路由），路由传参之旅
在上一篇react路由之旅中,我们简单地配置了react,进行了react路由及相关知识的学习,引入以及实现一个局部跳转的功能,接下来就是深入学习路由的嵌套以及传参,这是工作中主要用要的. 我的rea ...
- Vue的Router路由传参
一.文件结构 二.vue.js 打开此链接 https://cdn.bootcss.com/vue/2.6.10/vue.js 复制粘贴页面的所有内容 三.vue-router.js 打开此链接 h ...
随机推荐
- Java：从面试题“i++和++i哪个效率高？"开始学习java字节码
今天看到一道面试题,i++和++i的效率谁高谁低. 面试题的答案是++i要高一点. 我在网上搜了一圈儿,发现很多回答也都是同一个结论. 如果早个几年,我也会认同这个看法,但现在我负责任的说,这个结论是 ...
- 受限玻尔兹曼机（RBM）原理总结
在前面我们讲到了深度学习的两类神经网络模型的原理,第一类是前向的神经网络,即DNN和CNN.第二类是有反馈的神经网络,即RNN和LSTM.今天我们就总结下深度学习里的第三类神经网络模型:玻尔兹曼机.主 ...
- [微信小程序]初试——成绩分析小程序问题总结
文件类型说明 第一次打开微信小程序的开发者工具,就是下面这个样子. 好多已经存在的默认文件 .js .json .wxml .wxss 首先当然要搞懂这些文件都是干什么的 app.js是小程序的脚本代 ...
- oracle删除字段中的空格、回车及指定字符
create or replace procedure PROC_test is --Description:删除字段中的指定字符(回车chr(13).换行chr(10)) --By LiChao - ...
- Object-C定时器,封装GCD定时器的必要性!!! (一)
实际项目开发中经常会遇到延迟某件任务的执行,或者让某件任务周期性的执行.然后也会在某些时候需要取消掉之前延迟执行的任务. iOS中延迟操作有三种解决方案: 1.NSObject的方法:(对象方法) p ...
- 高吞吐koa日志中间件
Midlog中间件 node服务端开发中少不了日志打点,而在koa框架下的日志打点在多进程环境中日志信息往往无法对应上下文,而且在高并发下直接进行写buffer操作(内核调用writev)也会造成内存 ...
- Service详解
/** * 后台执行的定时任务 */ public class LongRunningService extends Service { @Override public IBinder onBind ...
- 在应用程序中使用Xml文件
用于操作Xml的文档主要有XmlNode.XmlDocument.XmlComment.XmlElement.XmlAttribute.XmlText.XmlNodeList 下面用一段代码来具体说明 ...
- JavaScript--------------------jQuery中.bind() .live() .delegate() .on()的区别 和 三种方式写光棒事件 动画
bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数. $("a").bind("click",function(){alert( ...
- sublime前端开发工具常用技巧
ctrl+N//新建文件夹ctrl+shift+p//打开命令行!,ctrl+E//快速生成html模板ctrl+E//自动补齐ctrl+P(#@)//goto 任何地方,其中#查找元素,@查找样式c ...