user3086325 user3086325 - 3 months ago 23
AngularJS Question

How do I set my (open) side menu to be the default view in Ionic mobile app

My setup:

$ ionic info

Your system information:

Cordova CLI: 6.2.0
Gulp version: CLI version 3.9.1
Gulp local:
Ionic CLI Version: 2.0.0
Ionic App Lib Version: 2.0.0-beta.20
OS: Distributor ID: LinuxMint Description: Linux Mint 17.1 Rebecca
Node Version: v0.12.2


I am building an Ionic based mobile app for android. This app has both a sidemenu & tabbed bar component. I would like them open sidemenu to be the default view that loads up when the app is launched. Below is my routes.js file. I have tinkered with $urlRouterProvider.otherwise() and tried all kinds of things but I can't get it to launch with the side menu open. Please assist. Thanks

routes.js

angular.module('app.routes', [])

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

// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider



.state('menu.latestICDLNews', {
url: '/news',
views: {
'side-menu21': {
templateUrl: 'templates/latestICDLNews.html',
controller: 'latestICDLNewsCtrl'
}
}
})

.state('menu.iCDLModules', {
url: '/modules',
views: {
'side-menu21': {
templateUrl: 'templates/iCDLModules.html',
controller: 'iCDLModulesCtrl'
}
}
})

.state('menu.trainingExams', {
url: '/training',
views: {
'side-menu21': {
templateUrl: 'templates/trainingExams.html',
controller: 'trainingExamsCtrl'
}
}
})

.state('menu', {
url: '/side-menu',
templateUrl: 'templates/menu.html',
abstract:true
})

.state('menu.accreditedICDLCenters', {
url: '/centers',
views: {
'side-menu21': {
templateUrl: 'templates/accreditedICDLCenters.html',
controller: 'accreditedICDLCentersCtrl'
}
}
})

.state('menu.becomeACenter', {
url: '/becomecenter',
views: {
'side-menu21': {
templateUrl: 'templates/becomeACenter.html',
controller: 'becomeACenterCtrl'
}
}
})

.state('menu.fAQS', {
url: '/faq',
views: {
'side-menu21': {
templateUrl: 'templates/fAQS.html',
controller: 'fAQSCtrl'
}
}
})

.state('menu.credits', {
url: '/credits',
views: {
'side-menu21': {
templateUrl: 'templates/credits.html',
controller: 'creditsCtrl'
}
}
})

.state('menu.introductoryModules', {
url: '/introductory-modules',
views: {
'side-menu21': {
templateUrl: 'templates/introductoryModules.html',
controller: 'introductoryModulesCtrl'
}
}
})

.state('menu.baseModules', {
url: '/base-modules',
views: {
'side-menu21': {
templateUrl: 'templates/baseModules.html',
controller: 'baseModulesCtrl'
}
}
})

.state('menu.standardModules', {
url: '/standard-modules',
views: {
'side-menu21': {
templateUrl: 'templates/standardModules.html',
controller: 'standardModulesCtrl'
}
}
})

.state('menu.advancedModules', {
url: '/advanced-modules',
views: {
'side-menu21': {
templateUrl: 'templates/advancedModules.html',
controller: 'advancedModulesCtrl'
}
}
})

.state('menu.contactUs', {
url: '/contactus',
views: {
'side-menu21': {
templateUrl: 'templates/contactUs.html',
controller: 'creditsCtrl'
}
}
})

$urlRouterProvider.otherwise('/side-menu/modules')

});


2nd App

routes.js:

angular.module('app.routes', [])

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

// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider



.state('menu.latestICDLNews', {
url: '/news',
views: {
'side-menu21': {
templateUrl: 'templates/latestICDLNews.html',
controller: 'latestICDLNewsCtrl'
}
}
})

.state('menu.iCDLModules', {
url: '/modules',
views: {
'side-menu21': {
templateUrl: 'templates/iCDLModules.html',
controller: 'iCDLModulesCtrl'
}
}
})

.state('menu.trainingExams', {
url: '/training',
views: {
'side-menu21': {
templateUrl: 'templates/trainingExams.html',
controller: 'trainingExamsCtrl'
}
}
})

.state('menu', {
url: '/side-menu',
templateUrl: 'templates/menu.html',
abstract:true
})

.state('menu.accreditedICDLCenters', {
url: '/centers',
views: {
'side-menu21': {
templateUrl: 'templates/accreditedICDLCenters.html',
controller: 'accreditedICDLCentersCtrl'
}
}
})

.state('menu.becomeACenter', {
url: '/becomecenter',
views: {
'side-menu21': {
templateUrl: 'templates/becomeACenter.html',
controller: 'becomeACenterCtrl'
}
}
})

.state('menu.fAQS', {
url: '/faq',
views: {
'side-menu21': {
templateUrl: 'templates/fAQS.html',
controller: 'fAQSCtrl'
}
}
})

.state('menu.credits', {
url: '/credits',
views: {
'side-menu21': {
templateUrl: 'templates/credits.html',
controller: 'creditsCtrl'
}
}
})

.state('menu.introductoryModules', {
url: '/introductory-modules',
views: {
'side-menu21': {
templateUrl: 'templates/introductoryModules.html',
controller: 'introductoryModulesCtrl'
}
}
})

.state('menu.baseModules', {
url: '/base-modules',
views: {
'side-menu21': {
templateUrl: 'templates/baseModules.html',
controller: 'baseModulesCtrl'
}
}
})

.state('menu.standardModules', {
url: '/standard-modules',
views: {
'side-menu21': {
templateUrl: 'templates/standardModules.html',
controller: 'standardModulesCtrl'
}
}
})

.state('menu.advancedModules', {
url: '/advanced-modules',
views: {
'side-menu21': {
templateUrl: 'templates/advancedModules.html',
controller: 'advancedModulesCtrl'
}
}
})

.state('menu.contactUs', {
url: '/contactus',
views: {
'side-menu21': {
templateUrl: 'templates/contactUs.html',
controller: 'creditsCtrl'
}
}
})

$urlRouterProvider.otherwise('/side-menu/modules')



});


menu.html:

<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-calm">
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="side-menu21"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left" id="side-menu21">
<ion-header-bar class="bar-calm">
<div class="title">Menu</div>
</ion-header-bar>
<ion-content padding="false" class="side-menu-left has-header">
<div class="">
<img src="img/icdl.png" width="100%" height="auto" style="display: block; margin-left: auto; margin-right: auto;">
</div>
<ion-list id="menu-list3" class=" ">
<ion-item class="calm " id="menu-list-item1" ui-sref="menu.latestICDLNews" menu-close="">Latest ICDL News</ion-item>
<ion-item class="calm " id="menu-list-item2" ui-sref="menu.iCDLModules" menu-close="">ICDL Modules</ion-item>
<ion-item class="calm " id="menu-list-item3" ui-sref="menu.trainingExams" menu-close="">ICDL Training &amp; Exams</ion-item>
<ion-item class="calm " id="menu-list-item4" href="#" onclick="window.open('http://www.icdlprofilezw.org/', '_system', 'location=yes'); return false;">ICDL Online Profile</ion-item>
<ion-item class="calm " id="menu-list-item5" href="#" onclick="window.open('http://icdlafrica.org/find-a-test-centre', '_system', 'location=yes'); return false;" >Accredited ICDL Centers</ion-item> <!-- ui-sref="menu.accreditedICDLCenters" menu-close="" -->
<ion-item class="calm " id="menu-list-item6" ui-sref="menu.becomeACenter" menu-close="">Become an ICDL Center</ion-item>
<ion-item class="calm " id="menu-list-item8" ui-sref="menu.fAQS" menu-close="">FAQ's</ion-item>
<ion-item class="calm " id="menu-list-item10" href="/contactus" ui-sref="menu.contactUs" menu-close="">Contact Us</ion-item>
<ion-item class="calm " id="menu-list-item9" ui-sref="menu.credits" menu-close="">Credits</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>

Answer

you can define

$ionicSideMenuDelegate.toggleLeft();

or

$ionicSideMenuDelegate.toggleRight();

in you app.run method. or you can define a controller in your abstract state and write the above code in that controller