index.html
<ion-tabs class="tabs-icon-top tabs-stable tabs-color-active-energized" >
<ion-tab title="主页" icon-on="ion-ios-home" icon-off="ion-ios-home-outline" ui-sref="home" >
<ion-nav-view name="home-nav">
</ion-nav-view>
</ion-tab>
<ion-tab title="测试" icon-on="ion-ios-people" icon-off="ion-ios-people-outline" ui-sref="massagist.listAll" >
<ion-nav-view name="test-nav"></ion-nav-view>
</ion-tab>
<ion-tab title="订单" icon-on="ion-ios-time" icon-off="ion-ios-time-outline" ui-sref="order" >
<ion-nav-view name="order-nav"></ion-nav-view>
</ion-tab>
<ion-tab title="我的" icon-on="ion-ios-person" icon-off="ion-ios-person-outline" ui-sref="my">
<ion-nav-view name="my-nav"></ion-nav-view>
</ion-tab>
</ion-tabs>
侧边框页:
<ion-view >
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-energized">
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-buttons side="right">
<button class="button button-light button-outline button-small " style="border-radius: 50%" menu-toggle="right"> 分类 </button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="test-item-nav" animation="slide-right-left"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="right">
<div class="bar bar-header bar-dark">
<h1 class="title" >分类</h1>
</div>
<ion-content class="has-header ">
<div class="list" >
<a class="item" menu-close ui-sref="button.default">全部</a>
<a class="item" menu-close ui-sref="button.default">搜索</a>
<div class="item item-divider">
服务项目
</div>
<a class="item" menu-close ui-sref="button.default">Item One</a>
<a class="item" menu-close ui-sref="button.block">Item Two</a>
<a class="item" menu-close ui-sref="button.full">Item Three</a>
<a class="item" menu-close ui-sref="button.small">Item Four</a>
<div class="item item-divider">
排行榜
</div>
<a class="item" menu-close ui-sref="button.large">Order One</a>
<a class="item" menu-close ui-sref="button.outline">Order Two</a>
<a class="item" menu-close ui-sref="button.clear">Order Three</a>
</div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</ion-view>
路由:
angular.module('app')
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('test', {
url: '/test',
abstract:true,
views: {
'test-nav': {
templateUrl: 'views/侧边框页.html',
controller: 'TestController'
}
}
}).state('test.listAll', {
url: '/listAll',
views: {
'test-item-nav': {
templateUrl: 'views/显示页.html',
controller: 'MassagistListController'
}
}
}) );
});