【ionic】タブの中に入れ子でタブをいれる方法メモ - ion-tabs

はじめに

今回やりたかったのはこんな画面。
イマイチできるのか不安だったけど無事できた。

ionicは海外の情報が多くて「ionic tabs inside tabs」とか「ionic tab nested」ってみんな検索してるみたい。

イメージはこんなかんじ

アプリ特有?かわからないけど、タブごとにナビゲーションをつくってタブごとに遷移していくようなイメージ。

実装

app.js

angular.module('ionicApp', ['ionic'])

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

    $stateProvider

    // ベースとなるタブ
      .state('tabs', {
        url: "/tab",
        abstract: true,
        templateUrl: "templates/tabs.html"
      })

    // ホーム
      .state('tabs.home', {
        url: "/home",
        views: {
          'home-tab': {
            templateUrl: "templates/home.html"
          }
        }
      })

    // ニュースタブの中のタブ
      .state('tabs.news', {
        url: "/news",
        abstract: true,
        views: {
          'news-tab': {
            templateUrl: "templates/news.html"
          }
        }
      })

    // 新着ニュース一覧
      .state('tabs.news.new', {
        url: "/new",
        views: {
          'news-page': {
            templateUrl: "templates/news-new.html"
          }
        }
      })

    // お気に入りニュース一覧
      .state('tabs.news.favorite', {
        url: "/favorite",
        views: {
          'favorite-page': {
            templateUrl: "templates/news-favorite.html"
          }
        }
      })

    // 新着ニュース詳細
      .state('tabs.news.new-detail', {
        url: "/new-detail",
        views: {
          'news-page': {
            templateUrl: "templates/news-detail.html"
          }
        }
      })

    // お気に入りニュース詳細
      .state('tabs.news.favorite-detail', {
        url: "/favorite-detail",
        views: {
          'favorite-page': {
            templateUrl: "templates/news-detail.html"
          }
        }
      })
    ;

    $urlRouterProvider.otherwise("/tab/home");

  });

templates/tabs.html

<ion-tabs class="tabs-icon-top tabs-positive">
  <ion-tab title="ホーム" icon="ion-home" href="#/tab/home">
    <ion-nav-view name="home-tab"></ion-nav-view>
  </ion-tab>
  <ion-tab title="ニュース" icon="ion-document" href="#/tab/news/new">
    <ion-nav-view name="news-tab"></ion-nav-view>
  </ion-tab>
</ion-tabs>

templates/home.html

<ion-view title="ホーム">
  <ion-content class="padding">
    <p>ホーム</p>
  </ion-content>
</ion-view>

templates/news.html

<ion-view title="ニュース">
  <ion-tabs class="tabs-icon-top tabs-positive tabs-top">
    <ion-tab title="新着" href="#/tab/news/new" icon="ion-ios-clock-outline">
      <ion-nav-view name="news-page"></ion-nav-view>
    </ion-tab>
    <ion-tab title="お気に入り" href="#/tab/news/favorite" icon="ion-bookmark">
      <ion-nav-view name="favorite-page"></ion-nav-view>
    </ion-tab>
  </ion-tabs>
</ion-view>

templates/news-new.html

<ion-view title="新着ニュース一覧">
  <ion-content class="padding has-tabs-top">
    <p>新着ニュース一覧</p>
    <a href="#/tab/news/new-detail">詳細へ</a>
  </ion-content>
</ion-view>

templates/news-favorite.html

<ion-view title="お気に入りニュース一覧">
  <ion-content class="padding has-tabs-top">
    <p>お気に入りニュース一覧</p>
    <a href="#/tab/news/favorite-detail">詳細へ</a>
  </ion-content>
</ion-view>

templates/news-detail.html

<ion-view title="ニュース詳細">
  <ion-content class="padding has-tabs-top">
    <p>ニュース詳細</p>
  </ion-content>
</ion-view>

ずらずら書いたけど以上です。

参考
http://codepen.io/Glitchbone/pen/GEcae