How to Reload Page in AngularJS

1. Reload Page Using the reload() Method in AngularJS
2. Reload Page Using location.reload() in AngularJS

This article will tackle how to reload the route rather than the complete page or application since refreshing the entire page for a few minor errors might sometimes be problematic. We’ll also look at how to reload the overall page from the server.

AngularJS implements its data binding through two-way data binding, which automatically updates the view whenever the model changes and vice versa. There are two ways of AngularJS page reloading.

One way is using the windows.location.reload(), which can be accessed through the $locationProvider provider, and the other uses the reload method.

Let’s deep dive into the topic and discuss these methods in detail.

Reload Page Using the reload() Method in AngularJS

Reloading the page is a common way of refreshing any content. The reload() method in AngularJS is one of the best ways to achieve this.

Rather than restarting the entire program, AngularJS provides a route service called the reload() method, which identifies the main route to reload/re-render.

The route’s controller includes services that are named in a case when the controller is constructed, and we may recall these exact services to refresh the information when a condition occurs.

The reload() method refreshes all the content on a web page and clears any cached data. It is useful when we want to show new data that has been updated or if we want to refresh some content that may have been inadvertently cached.

The reload() method in AngularJS is an efficient way to refresh pages, as it doesn’t require us to write any code, similar to JavaScript setInterval function manually.

Here is an example of reloading a page using the reload() method in AngularJS.

app.controller('myapp',
['$scope', '$route', function($scope, $route) {
function reload()
$scope.reloadRoute  = function(){
$route.reload();
}; }]);

Reload Page Using location.reload() in AngularJS

The location.reload() method is when a user clicks the refresh button or presses F5 on their keyboard.

It reloads the current page and clears any cookies set in the previous request to this server. It also causes all images, stylesheets, scripts, and other files to be reloaded.

It is a beneficial method when you are debugging your AngularJS application.

Below is an example of page reloading using the location.reload() method.

HTML code:

<h1 id="text">Open the Magic Box</h1>
<button onclick="start()">Click here</button>
<button onclick="reload()">Reload page</button>

JavaScript code:

var log = msg => div.innerHTML += "<p>" + msg + "</p>";
function start() {
    document.getElementById("text").innerHTML = "Hello, How are you? Are you enjoying your day?";
}
function reload() {
    log("loading...");
    location.reload(true);
}

Here in the JavaScript code, we set location.reload() to true; why did we do this? Because this method loads the page from the cache by default.

However, if we change it to true, the page is refreshed from the server.

Click here to check the working of the code provided above.