How to Reload/Re-render the Entire Page Using AngularJS?

Introduction

As we have been working with AngularJs, we will come across when we want our users to switch the contexts and re-render everything again. AngularJs provides us with a method to reload/re-render the entire page. In this article, we will go through how we can reload/re-render the whole page or application as a refreshing page as the whole for even small chances may get problematic from time to time. AngularJs provides us with two ways to reload/re-render the page as a whole. 

Let’s discuss these methods in detail.

Ways to Reload/Re-render 

The two methods which are used to reload/ re-render the entire page are:

1. To reload/re-render using windows.location.reload: In AngularJs, a page can reload/ re-render using windows.location method. This method is used to reload/re-render an entire page, and this optionally forces a re-download of the content. This method gives us the same result as when using the refresh or reload button. This method resets our entire website state. This method loads the entire page from the cache by default, and only when we set the forceGet property to true, does the page gets reloaded from the server. We don't have any return type. 
   The syntax of this method is:

location.reload(forceGet)

You can also try this code with Online Javascript Compiler

Run Code

2. To reload/re-render using the reload() method: AngularJS provides a route service called the reload() method, which is used to share the current route to reload/re-render instead of reloading the entire application. We can say that the route's controller has services that are called upon the instance when the controller is instantiated, and we can re-call these same services when a condition matches to refresh the data. The syntax to follow is

route.reload()

You can also try this code with Online Javascript Compiler

Run Code

Now we have seen how we can use the two available methods to reload/re-render the Angular application and the difference between the use cases of these methods. 

Examples

Let's go through some examples of these methods to understand how they function and integrate them into our application. 
Example for the windows.location.reload method:  
In this example, the forceGet parameter is an optional parameter to be used only when we want to force the complete website to reload/re-render from the server.  
The javascript code:

function locationreloadcn() {
// For reloading the entire page from the server.
location.reload();
}

You can also try this code with Online Javascript Compiler

Run Code

If we don't use the forceGet property, the website is reloaded from the cache.  
Let's go through the following example for reload() method: 
The following example shows how we can reload a component in AngularJs.

reloadComponent() {
  let currentUrl = this.router.url;
      this.router.routeReuseStrategy.shouldReuseRoute = () => false;
      this.router.onSameUrlNavigation = 'reload';
      this.router.navigate([currentUrl]);
  }

You can also try this code with Online Javascript Compiler

Run Code

Another example for the reload() method is,

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

You can also try this code with Online Javascript Compiler

Run Code

Let’s go through some Frequently Asked Questions about how to reload/re-render the entire page using AngularJs.