CODEWITHSUNDEEP
angularjsangular-ui-routerionic-framework
Simran Kaur
Simran Kaur

Reputation: 1101

How are multiple views rendered in one url using Ionic

I intended to render tabs as well as a navigation bar in the default page when the ionic application starts.

I have been able to get this exact functionality taking hints from internet and with hit And try. But I am still not sure what part of it was important to have nav bar as well as tabs on same page of the app.

I have a file called menu.html that contains the code for navbar.

It looks like this:

<ion-side-menus>

       <ion-side-menu-content>
          <ion-nav-bar class="bar-light">
            <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-buttons side="right">
              <button class="button button-icon button-clear ion-more" menu-toggle="right">
              </button>
            </ion-nav-buttons>
          </ion-nav-bar>
        -->

          <ion-nav-buttons side="right">
          <button class="button button-icon ion-more" ng-click="popover.show($event)"></button>
        </ion-nav-buttons>

          <ion-nav-view name="menuContent"></ion-nav-view>
        </ion-side-menu-content> 

        <ion-side-menu side="left">
          <ion-header-bar class="bar-assertive">
            <h1 class="title">Left Menu</h1>
          </ion-header-bar>
          <ion-content>
          <ul class="list">
              <a href="#/menu/tabs" class="item" menu-close>Tabs</a>
              <a href="#/menu/home" class="item" menu-close>About</a>
            </ul>

          </ion-content>
        </ion-side-menu>

    <!-- <ion-side-menu side="right">
          <ion-header-bar class="bar-assertive">
            <h1 class="title">Right menu</h1>
          </ion-header-bar>
          <ion-content>

          <ul class="list" ng-controller ="AppCtrl">
              <a href="#" class="button" ng-click="popover.show($event)" menu-close>POPOVER</a>
              <a href="#/menu/home" class="item" menu-close>About</a>
            </ul>


          </ion-content>


        </ion-side-menu>-->


      </ion-side-menus>

tabs.html looks like this:

<ion-tabs class="tabs-icon-top tabs-positive">

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

        <ion-tab title="About" icon="ion-help-circled" href="#/menu/about">
          <ion-nav-view name="About"></ion-nav-view>
        </ion-tab>

        <ion-tab title="Contact" icon="ion-arrow-expand" href="#/menu/contact">
          <ion-nav-view name="contact-tab"></ion-nav-view>
        </ion-tab>

      </ion-tabs>

app.js where I have defined states is as follows:

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

          }
        }
      })

      .state('menu.tabs', {
        url: "/tabs",
        views: {
          'menuContent': {
            templateUrl: "templates/tabs.html"
          }
        }
      })

Now, Can I please get some idea of how basically it displays navbar from menu.html as well as tabs from tabs.html in one view ?

Upvotes: 1

Views: 3775

Answers (1)

MHX
MHX

Reputation: 1601

In your index.html file, you will find a ion-nav-view tag.

<ion-nav-view></ion-nav-view>

This is displaying your abstract 'menu' state with its controller and menu.html template.

Inside your menu.html template, there's another ion-nav-view tag but this time with an extra name-attribute.

<ion-nav-view name="menuContent"></ion-nav-view>

menuContent is the name of the ui-view you're using inside menu.html. This matches the view property inside some states inside the $stateProvider.

Basically these are nested ui-view directives of ui-router at work here. I strongly suggest you to read the documentation, which will give you a much better explanation about this matter.

Upvotes: 5

Related Questions