ionic tabs 和 侧边框

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'
          }
        }
      }) );
  });