Make AngularJS Transition cleaner without preloading

Question

I remember reading a guide on how to make sure angular doesn't preload the {{ }} and other various bits before the final render for a few milliseconds, but I can't dig it up.

Can anyone point me in the right direction?

Answer 1

You can use $stateChangeStart event of ui-route to check whether user try to go to a state which requires authentication. You need to listen to that event during run phase of your app, you can check the following.

angular.module("yourApp").run(function($rootScope, $state){
    $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
         if(toState === "yourStateWhichRequiresAuthentication" && authenticationFailed){
         event.preventDefault();
         $state.go("loginState");

} }) });

Even better you can add data to your states and define which states need authentication and check whether toState needs authentication using that data value as the following:

//Data Definition in your state definition
$stateProvider
  .state("main", {
    url: "main",
    template: "<div>Main State</div>",
    data: {needsAuthentication: true})

if (toState.data && toState.data.needsAuthentication) {
   if (!$rootScope.isAuthenticated()) { // user is not logged in
      event.preventDefault();
      $state.go("login");
   }
}