Skip to content
Related Articles

Related Articles

Improve Article
How to reload or re-render the entire page using AngularJS?
  • Last Updated : 14 May, 2020

While working with AngularJS we might come across a time when we want our user to switch contexts and re-render everything again.AngularJS provides a method by which we can re-render or even reload the entire page. So in this article, we will see how we can reload the route instead of just reloading the entire page or application as refreshing the entire page just for some small chances may get problematic from time to time as well as we will also see how we can reload the entire page from the server or from the cache itself. AngularJS mainly provides two different methods for reloading and refresh

Using reload() method: Angular route service reload() method is used when we want just the current route to be reloaded instead of making our entire application reloading or refreshing. Let’s say the route’s controller has services that are called when the controller is instantiated and you need to re-call those exact same services when some condition happens to refresh the data. So what we can basically do to minimize all this reloading task is we can jus call $route.reload(). This won’t refresh the entire page but will reload only the route which will re-instantiate the controller and therefore recall the services.

  • Example:




    app.controller('ControllerName',
                   ['$scope', '$route', function($scope, $route) {
        $scope.reloadRoute = function() {
      
            // Reload only the route which will re-instantiate
            $route.reload();
        };
    }]);

Usig location.reload() method: The location.reload() method is used to refresh or reload the entire page, optionally forcing a re-download of the content. This method gives the same result as when we use the refresh or reload button. It just reset our whole website state. By default, this method loads the page from the cache and when we set the forceGet property to true then the page gets reloaded from the server. This method doesn’t have any return type.

  • Syntax:
    location.reload(forceGet)
  • Example: The forceGet parameter is an optional parameter and should be only used when we want to force the entire website to reload from the server. Without forceGet property, the website will just be reloaded from the cache.




    function locationreload() { 
      
            // To reload the entire page from the server
            location.reload();       
            }
My Personal Notes arrow_drop_up
Recommended Articles
Page :