How to build single side menu for all pages?

ionic-v1
1

Hi,
I’m pretty new to ionic. Currently, I’m trying to build an android app. I’ve already built the Login, Session management & Logout thing. After, Login into the app, there are many other pages(Ex: P1, P2, P3…) and in each page I’ve a side menu which has the constant set of links.

I know how to add side menu in any page but, What I need is… I want to a build single Side menu & use in all the pages. So, if in future I need to do any kind of modification inside the menu(Add/Remove links) then I don’t have to do any kind of modification in all pages.

I googled a lot about it but, didn’t get any suitable answer. There is some answer I got where peoples are adding all side menus in index.html file one below another, which I really don’t want to do. I want to keep my index.html file neat & clean.

Below is my current index page code. For all other pages, I’ve built different templates which I include by using ‘stateProvider’.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title></title>

        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">

        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <script src="cordova.js"></script>

        <script src="js/app.js"></script>
        <script src="js/ng-cordova.min.js"></script>

    </head>

    <body ng-app="empLogin">
        <ion-nav-view>
        </ion-nav-view>.
    </body>
</html>

My app config section is like this -

app.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('login', {
            url: '/login',
            templateUrl: 'templates/login.html',
            controller: 'LoginController'
        })
        .state('home', {
            url: '/home',
            templateUrl: 'templates/home.html',
            controller: 'HomeController'
        });
    $urlRouterProvider.otherwise('/home');
});

Need some advice to handle this.

2

Are you looking for something similar as the side menu starter template? https://github.com/driftyco/ionic-starter-sidemenu

3

It looks good for me. I think, this template is also mentioned in ionic’s Getting Started guide

But, I’ve one doubt and that is… It’ll add side menu in all pages without any problem(the way I want) but, suppose in some place where I need a page without any side menu ex: login page then how I can able to do that?

4

Add your login state on the template and use it as default state: $urlRouterProvider.otherwise(’/login’);
On your login controller, set the state on success login.

5

Ok. Here is a piece of code I got from that link where ‘Starter Side menu’ template has been used.

// 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 <body> 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
angular.module('starter', ['ionic', 'starter.controllers'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

    .state('app', {
      url: "/app",
      abstract: true,
      templateUrl: "menu.html",
      controller: 'AppCtrl'
    })

    .state('app.search', {
      url: "/search",
      views: {
        'menuContent' :{
          templateUrl: "search.html"
        }
      }
    })

    .state('app.browse', {
      url: "/browse",
      views: {
        'menuContent' :{
          templateUrl: "browse.html"
        }
      }
    })
    .state('app.playlists', {
      url: "/playlists",
      views: {
        'menuContent' :{
          templateUrl: "playlists.html",
          controller: 'PlaylistsCtrl'
        }
      }
    })

    .state('app.single', {
      url: "/playlists/:playlistId",
      views: {
        'menuContent' :{
          templateUrl: "playlist.html",
          controller: 'PlaylistCtrl'
        }
      }
    });
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/playlists');
});

In this code, ‘playlists’ is used as a default route & here is the code.

.state('app.playlists', {
  url: "/playlists",
  views: {
    'menuContent' :{
      templateUrl: "playlists.html",
      controller: 'PlaylistsCtrl'
    }
  }
})

According to this code I think it’ll show the playlists page with Side menu which actually I don’t want. I want that playlists page without any side menu. Any idea, how to do that?