As I recently started working with "ionic", I am facing a problem making a "tabs navigation".

I was following a simple tutorial, I made a navigation with two tabs, but I couldn't make three tabs, it doesn't work properly, I'm afraid I didn't understand the concept of these tabs.

CODEPEN CODE + DEMO

Here is my awesome code :

<ion-tabs class="tabs-striped tabs-top tabs-background-dark tabs-color-energized">

        <ion-tab title="help"ui-sref="help">
           <ion-nav-view name="help"></ion-nav-view>
        </ion-tab>

        <ion-tab title="home" ui-sref="home">
            <ion-nav-view name="home"></ion-nav-view> 
        </ion-tab>

     <ion-tab title="contact" ui-sref="contact">
            <ion-nav-view name="contact"></ion-nav-view> 
        </ion-tab>



    </ion-tabs> 
 <script type="text/ng-template" id="home.html">
  <ion-view title="Home">
    <ion-content padding="true">
      <h2>Home Page</h2>
      <p>Here's the main route for the app.</p>
    </ion-content>
  </ion-view>
</script>

<script type="text/ng-template" id="help.html">
  <ion-view title="Help">
    <ion-content padding="true">
       <h2>Using the app</h2>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis architecto hic officia quasi excepturi sequi deleniti maiores consectetur veritatis sint?</p>
    </ion-content>
  </ion-view>
</script>

      <script type="text/ng-template" id="contact.html">
  <ion-view title="Contact">
    <ion-content padding="true">
       <h2>Using the app</h2>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis architecto hic officia quasi excepturi sequi deleniti maiores consectetur veritatis sint?</p>
    </ion-content>
  </ion-view>
</script>

app.js :

.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/')

$stateProvider
    .state('home', {
  url: '/home',
  views: {
    home: {
      templateUrl: 'home.html'
    }
  }
})

 .state('help', {
  url: '/help',
  views: {
    help: {
      templateUrl: 'help.html'
    }
  }
})

.state('contact', {
  url: '/contact',
  views: {
    help: {
      templateUrl: 'contact.html'
    }
  }
})


})

As I recently started working with "ionic", I am facing a problem making a "tabs navigation".

I was following a simple tutorial, I made a navigation with two tabs, but I couldn't make three tabs, it doesn't work properly, I'm afraid I didn't understand the concept of these tabs.

CODEPEN CODE + DEMO

Here is my awesome code :

<ion-tabs class="tabs-striped tabs-top tabs-background-dark tabs-color-energized">

        <ion-tab title="help"ui-sref="help">
           <ion-nav-view name="help"></ion-nav-view>
        </ion-tab>

        <ion-tab title="home" ui-sref="home">
            <ion-nav-view name="home"></ion-nav-view> 
        </ion-tab>

     <ion-tab title="contact" ui-sref="contact">
            <ion-nav-view name="contact"></ion-nav-view> 
        </ion-tab>



    </ion-tabs> 
 <script type="text/ng-template" id="home.html">
  <ion-view title="Home">
    <ion-content padding="true">
      <h2>Home Page</h2>
      <p>Here's the main route for the app.</p>
    </ion-content>
  </ion-view>
</script>

<script type="text/ng-template" id="help.html">
  <ion-view title="Help">
    <ion-content padding="true">
       <h2>Using the app</h2>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis architecto hic officia quasi excepturi sequi deleniti maiores consectetur veritatis sint?</p>
    </ion-content>
  </ion-view>
</script>

      <script type="text/ng-template" id="contact.html">
  <ion-view title="Contact">
    <ion-content padding="true">
       <h2>Using the app</h2>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis architecto hic officia quasi excepturi sequi deleniti maiores consectetur veritatis sint?</p>
    </ion-content>
  </ion-view>
</script>

app.js :

.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/')

$stateProvider
    .state('home', {
  url: '/home',
  views: {
    home: {
      templateUrl: 'home.html'
    }
  }
})

 .state('help', {
  url: '/help',
  views: {
    help: {
      templateUrl: 'help.html'
    }
  }
})

.state('contact', {
  url: '/contact',
  views: {
    help: {
      templateUrl: 'contact.html'
    }
  }
})


})

http://codepen.io/stranger90/pen/MwjGPY

• javascript
• angularjs
• tabs
• ionic-framework

2 Answers 2

In your views at your contact state you still have help as a view:

.state('contact', {
    url: '/contact',
        views: {
            help: { // <-- Change this to 'contact'
                templateUrl: 'contact.html'
            }
        }
})

Codepen

I will try to explain you how that work.

So in your app.js file you have the configuration of routing. This routing will allow you to associate a state at an url and a template (file.html). ref: Ui-router

In your html page : This directive ui-sref="help" will call the state "help" and display a page (templateUrl). In this case this will display the content of help.html

    <ion-tab title="help"ui-sref="help">
       <ion-nav-view name="help"></ion-nav-view>
    </ion-tab>

In this exemple every html pages are in the main html page : Exemple : this is the help.html page

    <script type="text/ng-template" id="help.html">
       <ion-view title="Help">
         <ion-content padding="true">
          <h2>Using the app</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis architecto hic officia quasi excepturi sequi deleniti maiores consectetur veritatis sint?</p>
            </ion-content>
       </ion-view>
     </script>

There you have one mistake :

 .state('contact', {
  url: '/contact',
   views: {
      contact: { // here it's not help but contact
       templateUrl: 'contact.html'
     }
    }
 })

I hope this help you, sorry if my english is not correct. This tutorial can help you : Ionic routing tutorial