I am creating an web app with a side menu and content. I can navigate locally and everything works fine. Remotely, the first page displays (login) however after login, the all other templates load, but nothing displays. I can see the routes working also. It doesn’t matter what browser or device I use, remotely, the pages after login do not display, so I figure it has to be something I’ve done. Any help would be appreciated.
Here is my index.html:
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development)
<script src="cordova.js"></script>-->
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/constants.js"></script>
<script src="js/controllers/controllers.js"></script>
<script src="js/controllers/AppCtrl.js"></script>
<script src="js/controllers/OverviewCtrl.js"></script>
<script src="js/services/AuthService.js"></script>
My app.js:
angular.module(‘na2web’, [‘ionic’, ‘na2web.controllers’])
.run(function($ionicPlatform, $rootScope, $state, $location, AuthService) {
$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();
}
$location.path('/login');
$rootScope.$apply();
$rootScope.$on('$stateChangeStart', function(event, next, nextParams, fromState) {
console.log('From: ', fromState.name, ' To ', next.name);
if (!AuthService.isAuthenticated()) {
console.log(next.name);
if (next.name !== 'app.login') {
event.preventDefault();
$state.go('login');
}
}
});
});
})
.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state(‘login’, {
url: ‘/login’,
templateUrl: ‘templates/login.html’,
controller: ‘LoginCtrl’
})
.state(‘app.overview’, {
url: ‘/overview’,
views: {
‘menuContent’: {
templateUrl: ‘templates/overview.html’,
controller: ‘OverviewCtrl’
}
}
});
$locationProvider.html5Mode(true);
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise(’/login’);
});
menu.html
<ion-nav-buttons side="left" expose-aside-when="large">
<button class="button button-icon ion-navicon menuButton" menu-toggle="left">
</button>
</ion-nav-buttons>
<ion-nav-buttons side="right" expose-aside-when="large">
<a class="button button-icon ion-log-out logoutButton" type="submit" ng-click="logout()" title="Log out">
<span class="list-inset menuUser">{{userName}}</span>
</a>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
<ion-content>
<ion-list>
<div class="menuItems" ng-repeat="group in groups">
<ion-item class="item-stable"
ng-click="toggleGroup(group)"
ng-class="{active: isGroupShown(group)}" ui-sref="{{group.uisref}}">
<i class="icon" ng-class="iconClass(group)"></i>
{{group.name}}
</ion-item>
<ion-item class="item-accordion"
ng-repeat="item in group.items"
ng-show="isGroupShown(group)"
ng-click="select(item)"
ng-class="{ 'activeItem': isActive(item) }"
menu-close ui-sref="{{item.uisref}}">
{{item.subId}}
</ion-item>
</div>
<div class="item" style="height: 52px;">
<label> Alerts </label>
<span class="menuAlerts"><img src="/img/information.png" style="width:22px" title="Information">{{numInformation}} </span>
<span class="menuAlerts"><img src="/img/warning.png" style="width:22px" title="Warning">{{numWarning}} </span>
<span class="menuAlerts" style="margin-left: 0px"><img src="/img/critical.png" style="width:22px" title="Critical">{{numCritical}} </span>
</div>
</ion-list>
</ion-content>
AppCtrl:
angular.module(‘na2web’).controller(‘AppCtrl’,
function($rootScope, $scope, AuthService, $state, $timeout, AUTH_EVENTS) {
$scope.userName = 'user';
$scope.numCritical = 0;
$scope.numWarning = 0;
$scope.numInformation = 0;
$scope.groups = [];
$scope.groups = [{
name: 'Overview',
id: 1,
uisref: 'app.overview'
}];
$scope.$on(AUTH_EVENTS.notAuthenticated, function(event) {
AuthenticationService.logout();
$state.go(‘app.login’);
console.log(‘Session lost. Please login again’);
});
$scope.toggleGroup = function(group) {
if ($scope.isGroupShown(group)) {
$scope.shownGroup = null;
}
else {
$scope.shownGroup = group;
}
};
$scope.isGroupShown = function(group) {
return $scope.shownGroup === group;
};
$scope.iconClass = function(group) {
if (group.name === 'About' || group.name === 'Device' || group.name === 'Preferences' || group.name === 'Overview') {
return '';
} else if ($scope.isGroupShown(group)) {
return 'ion-minus';
} else {
return 'ion-plus';
}
};
$scope.select = function(item) {
$scope.selected = item;
};
$scope.isActive = function(item) {
if ($scope.selected === item) {
return true;
}
return false;
};
$scope.logout = function() {
$rootScope.$emit('LOGOUT');
AuthService.logout();
$state.go('login');
};
$scope.init = function() {
if (!$scope.isGroupShown($scope.groups[0])) {
$scope.toggleGroup($scope.groups[0]);
}
$scope.setDefault();
/*var token = sessionService.getToken();
$scope.userName = sessionService.getUserName();
$scope.getAlarmsCount();
$rootScope.$broadcast(Constants.EVENT.HIDE_LOADING);*/
};
$scope.setDefault = function() {
/*$timeout(function() {
var activeItems = angular.element(
document.getElementsByClassName('activeItem'));
if (activeItems != null) {
var ae = angular.element(activeItems[0]);
ae.removeClass('activeItem');
}*/
if ($scope.groups[0].items !== undefined)
{
$scope.select($scope.groups[0].items[0]);
}
// });
};
$scope.init = function() {
if (!$scope.isGroupShown($scope.groups[0])) {
$scope.toggleGroup($scope.groups[0]);
}
$scope.setDefault();
/*var token = sessionService.getToken();
$scope.userName = sessionService.getUserName();
$scope.getAlarmsCount();
$rootScope.$broadcast(Constants.EVENT.HIDE_LOADING);*/
};
$scope.init();
});
Overview.html