Left side menu with tab


#1
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <!-- angularjs scripts -->
    <script src="bower_components/ionic/release/js/ionic.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="bower_components/ionic/release/js/ionic-angular.js"></script>

     <script src="js/service.js"></script>
     <script src="js/controller.js"></script>
    <script src="js/app.js"></script>

    <title>HijauKuningApp</title>
</head>
<body ng-app="hijaukuningAPP" animation="slide-left-right-ios7">
    <side-menus>
       
      <!-- Center content -->
      <pane side-menu-content>
        <header class="bar bar-header bar-balanced">
              <button class="button" ng-click="toggleMenu()"><i class="icon ion-navicon"></i></button>
            <h1 class="title">Hijau Kuning App</h1>
        </header >

        <nav-view></nav-view>

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

          <tab title="Calendar" icon-on="icon ion-home" icon-off="icon ion-home" href="#/tab/calendar">
            <nav-view name="pets-tab"></nav-view>
          </tab>

          <tab title="Fixtures" icon-on="icon ion-ios7-clock" icon-off="icon ion-ios7-clock-outline" href="#/tab/fixture">
            <nav-view name="fixture-tab"></nav-view>
          </tab>

          <tab title="Count Up" icon-on="icon ion-ios7-gear" icon-off="icon ion-ios7-gear-outline" href="#/tab/counter">
            <nav-view name="counter-tab"></nav-view>
          </tab>

        </tabs>

      </pane>

      <!-- Left menu -->
      <side-menu side="left">
        <header class="bar bar-header bar-balanced">
            <h1 class="title">hijaukuningapp.com</h1>
        </header>
        <content has-header="true">
        <div class="list">

             <a class="item item-icon-left" href="#/list/about">
                <i class="icon ion-email"></i>
                About
              </a>
        </div>
    </content>
      </side-menu>
    </side-menus>
</body>

I’m having problem with the navigation in the left menu. It’s not display the my about page in the side menu content. What i’m doing wrong here?

here my app.'s

// Ionic Starter App, v0.9.20

// angular.module is a global place for creating, registering and retrieving Angular modules
// ‘starter’ is the name of this angular module example (also set in a attribute in index.html)
// the 2nd parameter is an array of ‘requires’
// ‘starter.services’ is found in services.js
// ‘starter.controllers’ is found in controllers.js
var hijaukuningAPP = angular.module(‘hijaukuningAPP’, [‘ionic’,‘starter.services’,‘starter.controllers’]);
hijaukuningAPP.config(function($stateProvider, $urlRouterProvider) {

$stateProvider
.state('calendar', {
  url: "/tab/calendar",
  views: {
    'pets-tab': {
      templateUrl: 'templates/calendar.html',
      //controller: 'PetIndexCtrl'
    }
	}
})
.state('fixture', {
  url: "/tab/fixture",
  views: {
    'fixture-tab': {
      templateUrl: 'templates/fixture.html',
      controller: 'FixtureController'
    }
	}
})
.state('countup', {
  url: "/tab/counter",
  views: {
    'counter-tab': {
      templateUrl: 'templates/countup.html',
      //controller: 'PetIndexCtrl'
    }
	}
})
.state('about', {
  url: "/list/about",
  templateUrl: "templates/about.html"
});
$urlRouterProvider.otherwise('/tab/calendar');

});


#2

Can you put this on a Codepen or Plunker? It’s hard to see what’s going on without a working example.


#3

here the code


#4

I played with this a bit. I couldn’t get the menu to open via the button because of where the controller was located. I’ve fixed that and added a bit of code.

When you navigate to the “About/One” page, the router really is taking you there. The new second alert tells you that. However, the tabs are all encompassing because they are placed outside the nav-view. You are ONLY going to see those tabs I think.


#5

@calendee thanks for this code. I am trying to create a template from the ionic seed that has a tab bar with navigation history and a side menu. I found this code and started trying to bring it into the seed, but the scripts it requires are 0.9.23 and I see that it has deprecated tags like <side-menus> in stead of <ion-side-menus> etc.

Is there a version of this plunker http://plnkr.co/edit/JHsnlUdCqIPgL4Ud8lIW23 that works with the 0.9.26 seed ?


#6

See here for a starting point : Seed with working tab bar on bottom of page *and* working side menu?