Angularjs + Ionic Framework: How to create a new route that shows the ion-tabs navigation but without defining a tab for itself?

Question

Long title but here is a better explanation.

I have a template html file called "Login". I define a route in app.js like so

.state('login', {
  url: '/login',
  templateUrl: 'templates/login.html',
  controller: 'createAccountCtrl'
})

By using ui-sref="login" I can link to this template from anywhere which is perfect for my needs.

However the main app uses an abstract route "tab" to load the tabs template which contains the main navigation.

.state('tab.about', {
  url: '/about',
  views: {
    'about-tab': {
       templateUrl: 'templates/about.html',
       controller: 'aboutCtrl'
     }
   }
})

  <ion-tabs tabs-style="tabs-icon-top" tabs-type="tabs-default">

    <!-- Home Tab -->
    <ion-tab title="Home" icon="icon ion-home" href="#/tab/home">
      <ion-nav-view name="home-tab"></ion-nav-view>
    </ion-tab>

    <!-- Products Tab -->
    <ion-tab title="Earn Points" icon="icon ion-ios7-plus-outline" href="#/tab/retail-store">
      <ion-nav-view name="retail-store-tab"></ion-nav-view>
    </ion-tab>

  </ion-tabs>

My problem is this. I want the Login page to have the main app's navigation like every other page has. That way a user who makes it to the login page, if they don't to login can still navigate off to the home or about page. But, I do not want a navigation tab/icon of its own to show.

Is is possible to just add the tabs html directly to the login.html template file or possibly hide the login icon/tab. I am open to suggestions and help. Thank you!

Answer 1

The tabs are meant to have their own tab icon. So you can't put the login page inside the tabs abstract view without creating a tab icon for it.

Instead of putting the login page under the tab abstract view, you should just put a separate tabbed navigation for the login page.

Load the following view into your index page.

<ion-view title="'Login'">

<ion-content has-header="true" has-footer="true" padding="true">

Login page content goes here 

</ion-content>

<div class="tabs tabs-icon-left">
  <a class="tab-item" href="#/tab/home">
   Home
  </a>
  <a class="tab-item" href="#/tab/about">
    About
  </a>
</div>

</ion-view>