Categories: Mobility

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

This article represents tips and code samples on creating an ionic app without side menus. Note the “menu.html” and “login.html” file for the code to include appropriate header text. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos.

Following are the key files required to make such an Ionic App:

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>

Author
Recent Posts

Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. I would love to connect with you on Linkedin.
Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking.