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>
Latest posts by Ajitesh Kumar (see all)
- Gradient Descent in Machine Learning: Python Examples - April 19, 2024
- Loss Function vs Cost Function vs Objective Function: Examples - April 19, 2024
- Model Parallelism vs Data Parallelism: Examples - April 19, 2024
Leave a Reply