My page is experiencing continuous refreshing and calling $stateChangeStart after the first call to $state.go. I believe this issue may be related to the StateProvider configuration. Can anyone offer suggestions on what might be going wrong?
Check out this gif demonstrating the problem, as well as the questionable code below:
angular.module('ticketingSystemApp', ['ui.router', 'ngCookies', 'ticketingSystemApp.filters', 'ticketingSystemApp.directives', 'ticketingSystemApp.controllers', 'ticketingSystemApp.services'])
.run(['$state', '$rootScope', function ($state, $rootScope) {
$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
alert("ToState=" + toState.name + " FromState=" + fromState.name + " url=" + fromState.Url);
if (($rootScope.username == null || $rootScope.password == null) && toState.name !== "login") {
$state.go("login");
e.preventDefault();
} else if ($state.name === "") {
$state.go('userpanel');
e.preventDefault();
}
});
}
]);
.config([
'$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.hashPrefix('!').html5Mode(true);
$stateProvider
.state('login', {
url:'/login',
views: {
"mainContent": {
templateUrl: '/Account/Login'
}
}
})
.state('userpanel', {
url:'/userpanel',
views: {
"mainContent": {
templateUrl: '/UserPanel'
}
}
});
$urlRouterProvider.otherwise(function ($injector, $location) {
var $state = $injector.get('$state');
if ($state.name === undefined) {
$state.go('userpanel');
return;
}
});
}
])