Loading data before loading controllers & views - angularjs

Question

I'm having a bit of trouble here.
I have an AngularJS application that connects to an API and allows users to login, register, etc. The user receives a token that is then stored to $localStorage (via ngstorage).
$localStorage[JWT] = data.token;
When a user visits my application with a token stored, I want to present him with a loading page (regardless of which page he is trying to view) until I verify his token is correct, and then load views/controllers as usual.
I've looked into different ways of doing this, but I couldn't figure out any. Any pointers are appreciated!
Thanks.

Answer 1

You can use the default ngRoute module for the simple cases such as this.
First you configure the route with a default resolve properties. Here we are saying that the resolve should contain a list of movies.
app.config(function($routeProvider){
$routeProvider.when('/',{
templateUrl:'initial.html',
controller:'MainCtrl'
})
.when('/two',{
templateUrl: 'post.html',
controller: 'PostCtrl',
resolve: {
movieList: function($movies) {
return $movies.get();
}
}
})
.otherwise({
redirectTo:'/'
});
});
Secondly, we are interested into hooking into critical events of the angular system. Hence for this small example app we want to disable the button used to trigger the page change, as well as show the text loading... when the page change process starts...
(app.js):
app.controller('MainCtrl', function($scope, $location) {
$scope.go = function() {
$location.path('/two');
};
$scope.$on('$routeChangeStart', function(evt){
$scope.showLoading = true;
});
$scope.showLoading = false;
});
(initial.html):
Go
<br>
<p ng-if="showLoading" style="color:red">Loading...</p>
Entire code here
More info about ngRoute