Tuesday 8 November 2016

Quick Guide to Use Ionic Framework Side Menu

This post will guide you to quickly set side menu in Ionic Framework.

Firstly, we need to set up the routes in app.js file. In this case we have our menu template in menu.html file. We need to name the menu state (e.g. app) and then all other pages will have states with this syntax menuStateName.pageStateName. We will also need to set abstract: true for the menu state.

Below is an example:
ionicApp.config(['$stateProvider', '$urlRouterProvider',
    function ($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('app', {
                url: '/app',
                abstract: true,
                templateUrl: 'menu.html'
            })
          .state('app.add', { // add item page
              url: "/add",
              views: {
                  'menuContent': {
                      templateUrl: 'add-item.html'
                  }             
              }
          })
          .state('app.list', { // list items page
              url: "/list",
              views: {
                  'menuContent': {
                      templateUrl: 'list.html'
                  }             
              }
         })
         .state('app.edit', { // edit item page
             url: "/edit/:itemId",
             views: {
                 'menuContent': {
                     templateUrl: 'edit-item.html'
                 }             
             }
         });
        // if none of the above states are matched, use this as the fallback
        $urlRouterProvider.otherwise('/app/add');
    }
]);

On index.html, we just need to put <ion-nav-view></ion-nav-view>.
<body ng-app="ionicApp">
      <ion-nav-view></ion-nav-view>
  </body>

Then on each page file, we have ion-view and ion-content:
<ion-view view-title="PageTitle">
  <ion-content>
    ... your markup content ...
  </ion-content>
</ion-view>

Then on the menu markup file (menu.html), we have something like this:
<ion-side-menus enable-menu-with-back-views="true">
    <ion-side-menu-content>
        <ion-nav-bar class="bar">
            <!--<ion-nav-back-button>
            </ion-nav-back-button>-->
            <ion-nav-buttons side="left">
                <button class="button button-icon ion-navicon" menu-toggle="left"></button>
            </ion-nav-buttons>
        </ion-nav-bar>
        <ion-nav-view name="menuContent"></ion-nav-view>
    </ion-side-menu-content>
    <ion-side-menu side="left">
        <ion-header-bar class="custom-brown">
            <div class="title">Menu Title</div>
        </ion-header-bar>
        <ion-content>
            <ion-list>
                <ion-item menu-close href="#/app/add">
                    <b>Add Item</b>
                </ion-item>
                <ion-item menu-close href="#/app/list">
                    <b>List Items</b>
                </ion-item>
                <ion-item menu-close href=". . .">
                    <b>. . .</b>
                </ion-item>
                <ion-item menu-close href=". . .">
                    <b>. . .</b>
                </ion-item>
            </ion-list>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>
On the example above, I use enable-menu-with-back-views="true" so that the menu icon will always be displayed. I also commented out <ion-nav-back-button></ion-nav-back-button> to hide the back button so only the menu icon will be displayed.

We can also have the menu items populated dynamically. We could use something like below:
                <ion-item menu-close ng-repeat="item in vm.items" ui-sref="app.edit({itemId: {{item.itemId}}})">
                    <b>Edit :</b> {{item.name}}
                </ion-item>