ionic之ui-view嵌套视图配置路由
来源:互联网 发布:nginx单机多域名 编辑:程序博客网 时间:2024/05/24 04:49
实现的效果是点击左侧导航,切换右侧视图内容。
首先创建一个固定视图的代码片段文件,这个这个代码片段分为两块区域,一块为左侧导航固定内容,一块为右侧更换内容的ui-view视图
<body>
<h1>欢迎来到邮箱</h1>
<div class="row">
<div class="col col-33">
<ion-list>
<ion-item ui-sref="sider.home">收件箱</ion-item>
<ion-item ui-sref="sider.detail">发件箱</ion-item>
</ion-list>
</div>
<div class="col">
<div ui-view></div>
</div>
</div>
</body>
在完整的HTML视图承载文件中创建一个主ui-view视图
<body>
<ion-header-bar class="bar-balanced" align-title="center">
<h1 class="title">项目首页头</h1>
</ion-header-bar>
<ion-content>
<div ui-view> </div>
</ion-content>
<ion-footer-bar class="bar-balanced">
<h1 class="title">项目首页尾</h1>
</ion-footer-bar>
</body>
配置路由,相对于普通路由配置而言,就是在配置每个要加载到右侧区域的内容代码片段文件时,路由名称前加上固定页面的路由配置名称
<script>
var app = angular.module('myApp', ['ionic']);
app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider .state("sider", { //配置固定导航代码片段路由
url: '/mySider',
templateUrl: 'template/sider.html',
})
.state("sider.home", { //配置右侧更换内容的路由,注意在路由名称前加上固定导航代码片段路由的名称
url: '/myHome',
templateUrl: 'template/main.html',
})
.state("sider.detail", { //配置右侧更换内容的路由,注意在路由名称前加上固定导航代码片段路由的名称
url: '/myDetail/:id',
templateUrl: 'template/detail.html',
});
$urlRouterProvider.otherwise('mySider') //配置异常处理,当url错误时自动跳转到指定的页面
})
</script>
- ionic之ui-view嵌套视图配置路由
- ionic路由嵌套
- 初学AngularJs路由(五):Ui-router-视图嵌套
- angularJs模块ui-router之状态嵌套和视图嵌套
- ionic之路由跳转
- AngularJS ui-router (嵌套路由)
- AngularJS ui-router (嵌套路由)
- AngularJS ui-router (嵌套路由)
- AngularJS ui-router (嵌套路由)
- AngularJS ui-router (嵌套路由)
- AngularJS ui-router (嵌套路由)
- AngularJS ui-router (嵌套路由)
- AngularJS ui-router (嵌套路由)
- AngularJS ui-router (嵌套路由)
- AngularJS ui-router (嵌套路由)
- AngularJS ui-router (嵌套路由)
- AngularJS ui-router (嵌套路由)
- vue嵌套路由配置
- hdu6013Kirinriki 尺取法
- 【BZOJ】T3240 矩阵游戏
- 训练总结 8.10
- 安卓实用常用的开发工具
- B
- ionic之ui-view嵌套视图配置路由
- Hue的安装
- spoj394
- RGB转灰度图像
- spring mvc基础篇(十一):注解配置深入
- gradle 汉化
- URAL 1517. Freedom of choice(后缀数组:最长公共连续子串)
- Lecture note 2: TensorFlow Ops
- JDBC存储过程的通用分页