实现的效果是点击左侧导航，切换右侧视图内容。
首先创建一个固定视图的代码片段文件，这个这个代码片段分为两块区域，一块为左侧导航固定内容，一块为右侧更换内容的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>
2271
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
