【ionic】ion-side-menuとion-tabsを同じ画面で使う

ionic javascript

はじめに

今回やりたかったのはこんな画面
f:id:yoppy0066:20170309204501g:plain:w250

スタートテンプレートでサイドメニューとタブのものがそれぞれあるのでそれらを参考にした。

実装

まずはベースとなるHTMLを作る。ion-nav-viewがあるだけ。

index.html

<body ng-app="starter">
  <ion-nav-view></ion-nav-view>
</body>

app.jsで、
menu.html > tabs.html > content1.html、contents2.html、contents3.htmlと階層構造になるように設定する。

js/app.js

angular.module('starter', ['ionic', 'starter.controllers'])

    ・・・

    .config(function($ionicConfigProvider, $stateProvider, $urlRouterProvider) {

	$stateProvider
            .state('app', {
                url: '/app',
		abstract: true,
                templateUrl: 'templates/menu.html',
                controller: 'AppCtrl'
            })

        // メニューの下にタブを置く
            .state("app.tab", {
                url: "/tab",
                views: {
                    "menuContent": {
                        templateUrl: "templates/tabs.html",
                        controller: "TabCtrl"
                    }
                }
            })

        // タブ1
            .state("app.tab.content1", {
                url: "/content1",
                views: {
                    "tab-content1": {
                        templateUrl: "templates/content1.html",
                        controller: "Content1Ctrl"
                    }
                }
            })

        // タブ2、タブ3の中身を同様に
        ・・・

        // デフォルト
        $urlRouterProvider.otherwise("app/tab/content1");
    });

コントローラはとりあえず作っただけ。何もしてない。
js/controllers.js

angular.module('starter.controllers', [])

    // 共通コントローラー
    .controller("AppCtrl", function($scope, $ionicModal, $timeout) {
    })

    // タブコントローラー
    .controller("TabCtrl", function($scope, $stateParams) {
    })

    // コンテンツ1
    .controller("Contents1Ctrl", function($scope, $stateParams) {
    })

    // コンテンツ2、コンテンツ3も同様に

templates/menu.html

<ion-side-menus>

  <!-- 左メニュー -->
  <ion-side-menu side="left">
    <ion-header-bar class="bar-stable">
      <h1 class="title">メニュー</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item menu-close ng-click="showInformation()">メニュー1</ion-item>
        <ion-item menu-close ng-click="showInformation()">メニュー2</ion-item>
        <ion-item menu-close ng-click="showInformation()">メニュー3</ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>

  <!-- メインコンテンツ -->
  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>
      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>

    <!-- ここにtabs.htmlを差し込む形 -->
    <ion-nav-view name="menuContent"></ion-nav-view>

  </ion-side-menu-content>

</ion-side-menus>

templates/tabs.html

<ion-tabs class="tabs-icon-top tabs-color-active-positive">
  <ion-tab title="タブ1" icon-off="ion-ios-book" icon-on="ion-ios-book" href="#/app/tab/contents1">
    <ion-nav-view name="tab-contents1"></ion-nav-view>
  </ion-tab>

  ・・・

</ion-tabs>

templates/contents1.html

<ion-view view-title="タブ1">
  <ion-content>
    <p>タブ1</p>
  </ion-content>
</ion-view>

コードばっかりになってしまったけど、なんとなくイメージはできました。
以上です