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

javascript

angularjs

performance-considerations

re-rendering-techniques

byAnton Shumikhin·Jan 14, 2025

To refresh an AngularJS page, call the $route.reload() function. This is all about recreating the current route.

Example:

// In your controller. Where the magic happens.
app.controller('MainCtrl', function($scope, $route) {
  $scope.reload = function() {
    $route.reload(); // Abracadabra... and it's refreshed, just like that!
  };
});

To bind it to a UI action, you can do so as illustrated below:

<button ng-click="reload()">Refresh</button>

This immediately triggers a refresh of the view, while preserving the state. It's as easy as changing a light bulb, only that you'll need fewer attempts. 😜

For a complete reload from the server—pretty much like your good old F5 key—inject $window and call $window.location.reload(true). But be warned, this will clear everything in your application scope, a bit like a fire drill, only less smoke and chaos.

Behind-the-scenes: Understanding the reload

Performance-enhanced reloading with `$window.location.reload()`

Running $window.location.reload(true), makes your browser run to the server to get the freshest version—kind of like your dog fetching the morning paper, only quicker.

If you're part of the UI-Router fan club

If you're using Angular UI-Router, the $state.reload() function is the way to go. It's just like $route.reload(), but on UI-Router's 'steroids'.

Custom maneuvering with `$scope.myLoadingFunction`

Giving your app a personal touch is easy with $scope.myLoadigFunction. This little trick can help pre-load data and get things ready before executing a route refresh. Think of it as the warm-up before the big game!

Check your mirrors: Managing data and state

Re-rendering an AngularJS page can have implications on your data state, so use AngularJS' data and state management services like $cacheFactory, $rootScope, $watch to keep them in check. Kind of like a sheepdog keeping all the sheep together.

Look both ways: Performance considerations

Be aware that calling $window.location.reload() could slow your application down, and nobody likes a slow app, right? So, measure the impact on the app's performance first.

Advanced re-rendering techniques

Changing the scene using `$location.path('/newPath')`

If you need to alter the context prior to re-rendering, you can change the route using $location.path('/newPath'). This is comparable to changing the scene in a play before the act continues.

Dance to the tune of AngularJS

To avoid having to repeat HTTP requests every time you want to refresh a page, use AngularJS's built-in methods to automate the refresh process. Basically, let AngularJS pull the weight for you.

For the Angular 2+ enthusiasts

If working with Angular 2+, take note of whatever makes AngularJS's DOCUMENT object special. It's a magnificent InjectionToken that enables direct manipulation of a page—like a golden ticket to Willy Wonka's factory.

explain-codes / Javascript / How to reload or re-render the entire page using AngularJS

Linked

What is the difference between angular-route and angular-ui-router?



Reloading the page gives wrong GET request with AngularJS HTML5 mode



How do I refresh a page using JavaScript?



In Angular, how do you determine the active route?



How do search engines deal with AngularJS applications?

