How to reload or re-render the entire page using AngularJS?

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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    function locationreload() { 
      
            // To reload the entire page from the server
            location.reload();       
            }

    chevron_right

    
    

My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.