Following are the key files required to make such an Ionic App:
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');
});
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) {
});
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>
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>
Last updated: 2nd May, 2024 The success of machine learning models often depends on the…
When working on a machine learning project, one of the key challenges faced by data…
Last updated: 1st May, 2024 The bias-variance trade-off is a fundamental concept in machine learning…
Last updated: 1st May, 2024 As a data scientist, understanding the nuances of various cost…
Last updated: 1st May, 2024 In this post, you will learn the concepts related to…
Last updated: 26th April, 2024 In this blog post, we will discuss the logistic regression…