angular-单页面多行数据展示-自定义命名-ui-view
来源:互联网 发布:python turtle 坐标 编辑:程序博客网 时间:2024/06/16 03:41
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/lib/AngularJS/angular.min.js"></script>
<script src="js/lib/ui0.4.2/angular-ui-router.js"></script>
<!--
指令:ui-view
该指令主要用于进行目标视图模板的展示
链接:ui-sref
该属性,主要用于替换HTML中a标签的href属性,用于指定目标路由的名称
服务:$stateProvider
该服务主要用于进行路由状态的定义~ 路由URL和视图模板的绑定
-->
<style>
.active {
font-size: 18px;
color: red;
}
</style>
</head>
<body>
<ul>
<li><a ui-sref="hello" ui-sref-active="active">hello</a></li>
<li><a ui-sref="world" ui-sref-active="active">world</a></li>
</ul>
<div>
<!--<ui-view></ui-view> 另一种写法-->
<ui-view name="header"></ui-view>
<div ui-view></div>
<ui-view name="footer"></ui-view>
</div>
<script>
var app = angular.module("myApp", ["ui.router"]);
/* 配置路由信息 */
/*
$stateProvider: Ui路由中的状态服务提供者
*/
app.config(["$stateProvider", "$urlRouterProvider",
function ($stateProvider,$urlRouterProvider) {
$urlRouterProvider.otherwise("/hello");
$stateProvider.state({
name: "hello", /* 状态名称,用于链接中使用 */
url: "/hello", /* 显示路径,在url地址中显示*/
views:{
"":{
template:"<h1>默认路由中显示的内容</h1>"
},
"header":{
template:"<h2>这是hello页面的头部内容</h2>"
},
"footer":{
template:"<h2>这是hello页面的页面底部内容</h2>"
}
}
}).state({
name: "world",
url: "/world",
views:{/*用于进行多数据展示的情况下*/
"":{
template:"<h1>这是默认路由ui-view中展示的内容</h1>"
},
"header":{
template:"<h1>这是world链接,展示在header中的内容</h1>"
},
"footer":{
template:"<h1>这是world链接,footer</h1>"
}
}
});
}]);
</script>
</body>
</html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/lib/AngularJS/angular.min.js"></script>
<script src="js/lib/ui0.4.2/angular-ui-router.js"></script>
<!--
指令:ui-view
该指令主要用于进行目标视图模板的展示
链接:ui-sref
该属性,主要用于替换HTML中a标签的href属性,用于指定目标路由的名称
服务:$stateProvider
该服务主要用于进行路由状态的定义~ 路由URL和视图模板的绑定
-->
<style>
.active {
font-size: 18px;
color: red;
}
</style>
</head>
<body>
<ul>
<li><a ui-sref="hello" ui-sref-active="active">hello</a></li>
<li><a ui-sref="world" ui-sref-active="active">world</a></li>
</ul>
<div>
<!--<ui-view></ui-view> 另一种写法-->
<ui-view name="header"></ui-view>
<div ui-view></div>
<ui-view name="footer"></ui-view>
</div>
<script>
var app = angular.module("myApp", ["ui.router"]);
/* 配置路由信息 */
/*
$stateProvider: Ui路由中的状态服务提供者
*/
app.config(["$stateProvider", "$urlRouterProvider",
function ($stateProvider,$urlRouterProvider) {
$urlRouterProvider.otherwise("/hello");
$stateProvider.state({
name: "hello", /* 状态名称,用于链接中使用 */
url: "/hello", /* 显示路径,在url地址中显示*/
views:{
"":{
template:"<h1>默认路由中显示的内容</h1>"
},
"header":{
template:"<h2>这是hello页面的头部内容</h2>"
},
"footer":{
template:"<h2>这是hello页面的页面底部内容</h2>"
}
}
}).state({
name: "world",
url: "/world",
views:{/*用于进行多数据展示的情况下*/
"":{
template:"<h1>这是默认路由ui-view中展示的内容</h1>"
},
"header":{
template:"<h1>这是world链接,展示在header中的内容</h1>"
},
"footer":{
template:"<h1>这是world链接,footer</h1>"
}
}
});
}]);
</script>
</body>
</html>
0 0
- angular-单页面多行数据展示-自定义命名-ui-view
- angular-单页面跳转ui-view
- angular 自定义指令命名
- jqGrid选择多行数据展示
- 3、Angular-Ui Router 多个命名视图
- Kendo UI开发教程(25): 单页面应用(三) View
- Kendo UI开发教程(25): 单页面应用(三) View
- angular-ui-router页面路由
- angular ui-router:简单的单页面嵌套路由的实现过程
- angular实现单页面步骤
- angular+路由+不同页面展示$routeProvider
- 自定义view下载进度条展示
- 自定义view加列表展示
- Easy UI datagrid 多行数据操作
- jquery ui选中表格多行数据
- UI 自定义view
- UI篇 -- 自定义view
- UI之自定义View
- springmvc常用注解标签详解
- NYOJ-1235-A/B Problem
- C/C++:宏定义中的#与##
- Redis学习系列——Redis安装
- Problem A: 时间类的构造和输出
- angular-单页面多行数据展示-自定义命名-ui-view
- Problem B: 时间类的成员读写
- linux_2-LDAP网络用户账户
- Spring Boot搭建spring+springMVC+Mybatis简单Demo
- 如何优雅的“编写”api接口文档
- PAT-A-1024. Palindromic Number (25)
- Problem C: 时间类的输入
- 内存页替换算法C++
- LeetCode121. Best Time to Buy and Sell Stock题解