Open In App

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

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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

Javascript




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


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

Javascript




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


 


Last Updated : 13 Aug, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads