angularjs - What is a good practice for redirecting in an angular SPA -

angularjs - What is a good practice for redirecting in an angular SPA -

i building angular app , have encountered several instances redirect user page. info whether user should redirected or not typically received after server side request.

in time takes server request, original page starts rendering , hence creates bad ux.

a case in point redirecting login page when user unauthorized.

question 1 know how handle these cases individually. wondering if there standard pattern can follow solve issue.

question 2 there standard pattern command when start rendering page when info beingness fetched server. instance view has

{{user.name}}

and controller has next code:

userservice.load_user().then(function(user) { $scope.user = user; });

i don't want displayed till user loaded, maybe loading sign. can such:

//controller userservice.load_user().then(function(user) { $scope.user = user; $scope.loaded = true; });

and

<!-- view --> <div ng-show="!loaded"> <img src="loading.gif"/> </div> <div ng-show="loaded"> real code here. </div>

this gets complicated when want wait on more 1 requests.

use resolve property of routes. assuming you're using ngroutes or ui-router. both include resolve property on routes.

to add together spinner or similar while wait them resolve, hear view alter events within shell view controller (assuming have one) , add/remove spinner accordingly.

by shell controller mean highest level view within others nested. may or may not have controller, does. might have showspinner property on scope:

myapp.controller('mainctrl', function($scope){ $scope.showspinner = false; $scope.$on('$statechangestart', function(){ $scope.showspinner = true; }); $scope.$on('$statechangesuccess', function(){ $scope.showspinner = false; }); });

then utilize ng-show='showspinner' or ng-show='!showspinner' on spinner html element , view element respectively.

this basic idea. end more elaborate.

here plunker. there little more going on there (abstract state etc) requested, see how resolve property used , how state diverted.

angularjs redirect