ui-router多视图+嵌套视图+传参综合练习
2024-08-28 16:06:51
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>
最新文章
- WebApp上滑加载数据...
- Android-两种方式实现走马灯效果
- iOS提交后申请加急审核
- Socket Server-基于线程池的TCP服务器
- container error log
- MyEclipse对Struts2配置文件较检异常 Invalid result location value/parameter
- WAMPSERVER 与 IIS冲突 及如何修改网站根目录
- MyBatis+MySQL 返回插入的主键ID
- DBA_Oracle AWR Report性能监控报表（案例）
- JQuery_给元素添加或删除类等以及CSS()方法
- 简单的jquery左侧导航栏和页面选中效果
- Windows服务的安装卸载及错误查找
- 51nod 1503 猪和回文（dp滚存）
- 拓扑排序基础 hdu1258,hdu2647
- unity的三种update
- 网络构建入门技术（3）——IP地址分类
- Ubuntu18.10安装网易云音乐（图文并茂！）
- iOS UI-微博案例（通过代码自定义Cell）
- centos7修改静态ip地址
- 如何创建一个基于Node的HTTP服务器