Ionic Framework – How to Create an Ionic App without Side Nav Menus

• App.js to manage states
• Controllers.js to include controllers
• Menu.html to include code related with navigation
• Login.html to include code specific to login page

App.js to Manage States

Make sure your app.js looks like following. Place the file in www/js folder.

angular.module('starter', ['ionic', 'starter.controllers' ])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
   
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);

    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
})

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

 $stateProvider

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

 .state('app.login', {
    url: '/login',
    views: {
      'menuContent': {
        templateUrl: function($state, $stateParams) {
         return 'templates/login.html';
        },
        controller: 'LoginCtrl'
      }
    }
  });

  $urlRouterProvider.otherwise('/app/login');

 });

Controllers.js to include controllers

Make sure your controller looks like following. Place the file in www/js folder.

angular.module('starter.controllers', ['ionic'])

.run(function($ionicPlatform, $state) {
  $ionicPlatform.ready(function() {    
  })
})

.controller('AppCtrl', function($scope) {
})

.controller('LoginCtrl', function($scope) {
});

Menu.html to include Code related with Navigation

Create a page namely “menu.html” and paste following code:

<ion-nav-bar class="bar-royal">
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>

Login.html Template to include Code related with Login

Create a file login.html in www/templates folder and place following code:

<ion-view view-title="Login">
  <ion-pane class="login-page">
    <ion-content scroll="false">
    </ion-content>
  </ion-pane>
</ion-view>