AngularJS – How to avoid Flicker switching pages

There are multiple ways to achieve it,

1- Use Resolve in route, $routeProvider resolve property allows delaying of route change until data is loaded.

.config(function ($routeProvider) {
    $routeProvider
      .when('/page2', {
        templateUrl: 'views/page2.html',
        controller: 'Page2Ctrl',
        controllerAs: 'page2', 
        resolve: {
            myData: function($q, $http){ 
                var deferred = $q.defer();

                // USE it to load data and delay page transition.
                return deferred.promise;
            }
        }
      })
      .otherwise({
        redirectTo: '/'
      });
  })

2 - Use ngCloak Use a simple tag to display page loading icon and place ng-cloack after it. ngCloack will hide everything after tag above till page is fully loaded.

<div ng-app="">

<p ng-cloak> // Your normal HTML page</p>

</div>

See this example here.