Hello, I need to show partial side menu after the login. But always show itemList page. After that, I need to show the page full screen, just the menu partially at the begin. It’s possible??
if I change $urlRouterProvider.otherwise(’/app/itemList’); with (’/app/menu’) the result is a white page.
thanks in advance.
app.js
var example = angular.module('starter', ['ionic', 'starter.controllers','starter.services', 'ngCordova'])
.run(function($ionicPlatform, $cordovaSQLite) {
$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();
}
});
});
example.controller("ExampleController", function($scope) {
example.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.search', {
url: '/search',
views: {
'menuContent': {
templateUrl: 'templates/search.html'
}
}
})
.state('app.menu', {
url: '/menu',
views: {
'menuContent': {
templateUrl: 'templates/menu.html'
}
}
})
.state('app.browse', {
url: '/browse',
views: {
'menuContent': {
templateUrl: 'templates/browse.html'
}
}
})
.state('app.itemList',{
url: '/itemList',
views: {
'menuContent' : {
templateUrl: 'templates/itemList.html',
controller: 'itemListCtrl'
}
}
})
.state('app.item',{
url: '/item/:itemId',
views: {
'menuContent' : {
templateUrl: 'templates/item.html',
controller: 'itemCtrl'
}
}
})
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
})
;
function ContentController($scope, $ionicSideMenuDelegate) {
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.canDragContent(true);
$ionicSideMenuDelegate.toggleLeft();
};
}
// vista default
$urlRouterProvider.otherwise('/app/itemList');
});
controller.js
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
/*
$scope.devWidth = function(){
((window.innerWidth > 0) ? window.innerWidth : screen.width);
};
*/
// Form data for the login modal
$scope.loginData = {};
// Create the login modal that we will use later
$ionicModal.fromTemplateUrl('templates/login.html', {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
$scope.modal.show();
});
// Triggered in the login modal to close it
$scope.closeLogin = function() {
$scope.modal.hide();
};
// Open the login modal
$scope.login = function() {
$scope.modal.show();
alert("mi apro");
};
// Perform the login action when the user submits the login form
$scope.doLogin = function() {
console.log('Doing login', $scope.loginData);
// Simulate a login delay. Remove this and replace with your login
// code if using a login system
$timeout(function() {
$scope.closeLogin();
}, 1000);
};
})
/*
.controller('LoginCtrl', function($scope, LoginService, $ionicPopup, $state) {
$scope.data = {};
$scope.login = function() {
LoginService.loginUser($scope.data.username, $scope.data.password).success(function(data) {
$state.go('tab.dash');
}).error(function(data) {
var alertPopup = $ionicPopup.alert({
title: 'Login failed!',
template: 'Please check your credentials!'
});
});
}
})
*/
.controller('itemListCtrl', function($scope, $rootScope){
$rootScope.itemList = [
{ title: 'Chiamata', id: 1 },
{ title: 'Mail', id: 2 },
{ title: 'Riunione', id: 3 },
{ title: 'Pranzo', id: 4 },
{ title: 'Non so', id: 5 },
{ title: 'Cena', id: 6 }
];
})
// nel for passo solo l'id e poi prendo le info invece che passare tutti i dati
.controller('itemCtrl', function($scope, $stateParams, $rootScope){
var id = $stateParams.itemId;
$scope.title = "";
for(var i = 0; i<$rootScope.itemList.length; i++){
if (id == $rootScope.itemList[i].id) {
$scope.title = $rootScope.itemList[i].title;
}
}
});
menu.html
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button class="button-clear">
<i class="ion-arrow-left-c"></i>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon button-assertive" menu-toggle="left">
</button>
</ion-nav-buttons>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-nav-bar>
</ion-side-menu-content>
<!--<ion-side-menu side="left" width="{{width}}" expose-aside-when="(min-width:275px)">-->
<!--<ion-side-menu side="left" is-enabled="true" width="200" expose-aside-when="(min-width:275px)">-->
<ion-side-menu side="left" width="200">
<header class="bar bar-header bar-stable">
<h1 class="title">Flussi</h1>
</header>
<ion-content class="has-header">
<ion-list>
<ion-item menu-close ng-click="login()">
<img src="img/rcm_menu_icon_black.png" width="30"/>
Login
</ion-item>
<ion-item menu-close href="#/app/search">
<img src="img/rda_menu_icon_black.png" width="30"/>
Search
</ion-item>
<ion-item menu-close href="#/app/browse">
<img src="img/mda_menu_icon_black.png" width="30"/>
Browse
</ion-item>
<ion-item menu-close href="#/app/playlists">
<img src="img/macop_menu_icon_black.png" width="30"/>
Item
</ion-item>
</ion-list>
</ion-content>