ui-router redirect using onEnter
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<p>
The dashboard state is properly redirecting to the student state on first load.
</p>
<p>
Click on student and profile to switch states.
</p>
<p>
From profile state click on one of the `dashboard' links, it should go to dashboard state and then redirect to student, instead throws the error: "TypeError: Cannot read property 'globals' of null at $state.transition.resolved.then.$state.transition "
</p>
<div class="container" ng-app="myApp">
<ui-view name="header"></ui-view>
<ui-view name="content"></ui-view>
<ui-view name="footer"></ui-view>
</div>
CSS
.error {
color: red;
}
.container {
padding: 24px;
}
a {
display: inline-bock;
padding: 10px;
margin-right: 10px;
color: white;
background-color: black;
font-weight: bold;
border-radius: 6px;
}
a.error {
background-color: red;
color: white;
}
JavaScript
angular.module('myApp', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/?page=a");
$stateProvider
.state('root', {
abstract: true,
views: {
'footer@': {
template: '<h1> ==== footer ====</h1><hr />'
}
},
})
.state('dashboard', {
parent: 'root',
url: '/',
onEnter: function($state) {
$state.go('student');
},
})
.state('student', {
parent: 'root',
url: '/student',
views: {
'header@': {
template: '<a ui-sref="student"> STUDENT</a><a ui-sref="student.profile"> PROFILE</a> <a href="" class="error" ng-click="goToDashboard();">DASHBOARD ng-click</a> <a class="error"ui-sref="dashboard">DASHBOARD ui-sref</a>',
controller: function($scope, $state) {
$scope.goToDashboard = function() {
$state.go('dashboard');
}
}
},
'content@': {
template: '<h1> ==== student ====</h1><hr />'
}
}
})
.state('student.profile', {
url: '/profile',
views: {
'content@': {
template: '<h1> ==== profile ====</h1><hr />'
}
}
})
.state('root.app.error', {
views: {
'body@root': {
template: '<div class="error">ERROR</div>'
}
}
});
}
]);