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 ...
随机推荐
- WebX框架学习笔记之二----框架搭建及请求的发起和处理
框架搭建 执行环境:windows.maven 执行步骤: 1.新建一个目录,例如:D:\workspace.注意在盘符目录下是无法执行成功的. 2.执行如下命令: mvn archetype:gen ...
- Linux MTD子系统 _从模型分析到Flash驱动模板
MTD(Memory Technology Device)即常说的Flash等使用存储芯片的存储设备,MTD子系统对应的是块设备驱动框架中的设备驱动层,可以说,MTD就是针对Flash设备设计的标准化 ...
- Linux中的sed命令
sed - stream editor for filtering and transforming text 流编辑器的过滤和转换文本 sed [-nerf] [动作] 参数: -i 修改源文件 危 ...
- python复习。知识点小记
1.对于单个字符的编码,Python提供了ord()函数获取字符的整数表示,chr()函数把编码转换为对应的字符: >>> ord('A') >>> ord('中' ...
- JavaScript对象原型写法区别
体现对象原型分步式写法 //原型分步式写法 //构造函数 function Person(){} //对象原型 Person.prototype.name = 'Avensatr'; Pers ...
- How do you make an awesome team?(来考验一下自己的英语能力吧)
How do you make an awesome team? I was talking to my awesome friend Amy Hanlon (who is a software en ...
- 如何把phpStorm打造成自己的专属IDE
1.如何设置phpStorm的默认编码,例如UTF-8?phpStorm的编码分为IDE Encoding 和Project Encoding,设置方法是打开File->Setting-> ...
- 用Caffe生成对抗样本
同步自我的知乎专栏:https://zhuanlan.zhihu.com/p/26122612 上篇文章 瞎谈CNN:通过优化求解输入图像 - 知乎专栏 中提到过对抗样本,这篇算是针对对抗样本的一个小 ...
- vue.js中，input和textarea上的v-model指令到底做了什么？
v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...
- [SinGuLaRiTy] 字节大小
[SinGuLaRiTy-1006] Copyright (c) SinGuLaRiTy 2017. All Rights Reserved. 16位编译器 char 1个字节 char*(即指针变量 ...