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 ...
随机推荐
- requireJS 从概念到实战
requireJS 可以很轻易的将一个项目中的JavaScript代码分割成若干个模块(module).并且requireJS推荐一个模块就是一个文件,所以,你将获得一些零碎的具有互相依赖关系的JS文 ...
- socket bind详解
http://www.cnblogs.com/nightwatcher/archive/2011/07/03/2096717.html 在最开始接触bind的时候,只是在写基于tcp的server端的 ...
- codeforces 372E. Drawing Circles is Fun
tags:[圆の反演][乘法原理][尺取法]题解:圆の反演:将过O点的圆,映射成不过O的直线,相切的圆反演出来的直线平行.我们将集合S中的点做反演变换:(x,y)->(x/(x^2+y^2), ...
- JavaWeb之Cookie和Session的区别
Cookie和Session的区别 一.cookie机制和session机制的区别 ********************************************************** ...
- AngularJS1.X学习笔记1-整体看看
听说 明天是愚人节,这与我有什么关系呢!我可 不想被愚弄,但是但是,我这么笨怎么才能不被愚弄呢?左思右想,我决定从现在开始闭关,闭关干啥哩?学习!学习AngularJS.以前学习过Angular的,不 ...
- Uva 10006 Carmichael Numbers (快速幂)
题意:给你一个数,让你判断是否是非素数,同时a^n%n==a (其中 a 的范围为 2~n-1) 思路:先判断是不是非素数,然后利用快速幂对每个a进行判断 代码: #include <iostr ...
- PHP中的for循环
循环 循环是操作某一个功能(执行某段代码). ①循环四要素: a 循环初始值 b 循环的条件 c 循环状态 d 循环体 ②for循环 a 穷举:把所有的可能性的都一一列出来. b 迭代:每次循环都会把 ...
- JDBC基础学习(一)—JDBC的增删改查
一.数据的持久化 持久化(persistence): 把数据保存到可掉电式存储设备中以供之后使用.大多数情况下,数据持久化意味着将内存中的数据保存到硬盘上加以固化,而持久化的实现过程大多通过各 ...
- Xcode8.3 添加iOS10.3以下旧版本模拟器
问题起源 由于手边项目需要适配到iOS7, 但是手边的测试机都被更新到最新版本,所以有些潜在的bug,更不发现不了.最近就是有个用户提出一个bug,而且是致命的,app直接闪退.app闪退,最常见的无 ...
- web 项目中a标签传值（中文）到后台的乱码问题
web 项目中a标签传值(中文)到后台的乱码问题 jsp页面中的a标签: .............. <c:forEach items="${sellerList }" v ...