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 ...
随机推荐
- Unity SteamVR插件集成
重要组件 SteamVR_Camera VR摄像机,主要功能是将Unity摄像机的画面进行变化,形成Vive中的成像画面 使用方法: l 在任一个摄像机上增加脚本 l 点击Expand按钮 完成以上操 ...
- Linux 搭建svn版本库
一.安装svn服务器端yum install subversion 从镜像下载安装svn服务器端 如果后面执行“svnadmin create /usr/local/svn/sunny”提示 ...
- [.NET] 一步步打造一个简单的 MVC 电商网站 - BooksStore（四）
一步步打造一个简单的 MVC 电商网站 - BooksStore(四) 本系列的 GitHub地址:https://github.com/liqingwen2015/Wen.BooksStore &l ...
- table切换
// 自己加载正确路径的jQ <!doctype html> <html><head><meta charset="utf-8">& ...
- WPF 杂谈——开篇简言。
这俩年多来笔者一直在从事关于WPF的开发.虽然不能说是专家级别的.但是对于WPF的应用还是有一定的了解.论他的灵活性决对不在WinForm之下.WPF的出现更是引发一段热议.他的何去何从更是让很多人感 ...
- 极化SAR图像基础知识(1)
从今天开始学习极化SAR图像,记录于此. 极化散射矩阵S是用来表示单个像素散射特性的一种简便办法,它包含了目标的全部极化信息.
- Unity属性的封装、继承、方法隐藏
(一)Unity属性封装.继承.方法隐藏的学习和总结 一.属性的封装 1.属性封装的定义:通过对属性的读和写来保护类中的域. 2.格式例子: private string departname; // ...
- 在c++中，标准输入string时cin 与getline两个函数之间的区别
cin: cin函数是标准库的输入函数,在读取string时遵循以下规则: 1)读取并忽略开头所有的空白符(包括空格.换行符.制表符). 2)读取字符直到遇到空白符,读取终止. 例如: 当输入的是“ ...
- redis intset(整数集合)
redis intset (整数集合) 概述 intset 是集合的底层实现结构之一 intset 集合只包含整数 intset 自升级 intset 整数集合是有序的 intset 结构 结构 // ...
- URL传中文参数导致乱码的解决方案之encodeURI
通过URL传中文参数时,在服务端后台获取到的值往往会出现乱码问题,解决方案有很多种,本文主要介绍如何通过encodeURI来解决中文乱码问题: first:前端传递参数的时候需要对中文参数进行两次en ...