Multi tool use

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

After rendering the entire page based on several user contexts and having made several $http requests, I want the user to be able to switch contexts and re-render everything again (resending all $http requests, etc). If I just redirect the user somewhere else, things work properly:

$http

$http

$scope.on_impersonate_success = function(response) {
//$window.location.reload(); // This cancels any current request
$location.path('/'); // This works as expected, if path != current_path
};

$scope.impersonate = function(username) {
return auth.impersonate(username)
.then($scope.on_impersonate_success, $scope.on_auth_failed);
};


If I use $window.location.reload(), then some of the $http requests on auth.impersonate(username) that are waiting for a response get cancelled, so I can't use that. Also, the hack $location.path($location.path()) doesn't work either (nothing happens).

$window.location.reload()

$http

auth.impersonate(username)

$location.path($location.path())

Is there another way to re-render the page without manually issuing all requests again?

11 Answers
11

For the record, to force angular to re-render the current page, you can use:

$route.reload();


According to AngularJS documentation:

Causes $route service to reload the current route even if $location hasn't changed.

As a result of that, ngView creates new scope, reinstantiates the controller.

$route.reload()

$route

angular.js file

$routeProvider

angular-route.js

$route.reload() will reinitialise the controllers but not the services. If you want to reset the whole state of your application you can use:

$route.reload()

$window.location.reload();


This is a standard DOM method which you can access injecting the $window service.

If you want to be sure to reload the page from the server, for example when you are using Django or another web framework and you want a fresh server side render, pass true as a parameter to reload, as explained in the docs. Since that requires interaction with the server, it will be slower so do it only if necessary

true

reload

The above applies to Angular 1. I am not using Angular 2, looks like the services are different there, there is Router, Location, and the DOCUMENT. I did not test different behaviors there

Router

Location

DOCUMENT

For reloading the page for a given route path :-

$location.path('/path1/path2');
$route.reload();


If you are using angular ui-router this will be the best solution.

$scope.myLoadingFunction = function() {
$state.reload();
};


Well maybe you forgot to add "$route" when declaring the dependencies of your Controller:

app.controller('NameCtrl', ['$scope','$route', function($scope,$route) {
// $route.reload(); Then this should work fine.
}]);


Just to reload everything , use window.location.reload(); with angularjs

Check out working example

HTML

angularJS

var myApp = angular.module('myApp',);

function MyCtrl($scope) {
$scope.reloadPage = function(){window.location.reload();}
}


http://jsfiddle.net/HB7LU/22324/

Easiest solution I figured was,

add '/' to the route that want to be reloaded every time when coming back.

eg:

instead of the following

$routeProvider
.when('/About', {
templateUrl: 'about.html',
controller: 'AboutCtrl'
})


use,

$routeProvider
.when('/About/', { //notice the '/' at the end
templateUrl: 'about.html',
controller: 'AboutCtrl'
})


/

//

If you want to refresh the controller while refreshing any services you are using, you can use this solution:

i.e.

app.controller('myCtrl',['$scope','MyService','$state', function($scope,MyService,$state) {

//At the point where you want to refresh the controller including MyServices

$state.reload();

//OR:

$state.go($state.current, {}, {reload: true});
}


This will refresh the controller and the HTML as well you can call it Refresh or Re-Render.

I got this working code for removing cache and reloading the page

View

<a class="btn" ng-click="reload()">
<i class="icon-reload"></i>
</a>


Controller

Injectors: $scope,$state,$stateParams,$templateCache

$scope.reload = function() { // To Reload anypage
$templateCache.removeAll();
$state.transitionTo($state.current, $stateParams, { reload: true, inherit: true, notify: true });
};


Use the following code without intimate reload notification to the user. It will render the page

var currentPageTemplate = $route.current.templateUrl;
$templateCache.remove(currentPageTemplate);
$window.location.reload();


I've had a hard fight with this problem for months, and the only solution that worked for me is this:

var landingUrl = "http://www.ytopic.es"; //URL complete
$window.location.href = landingUrl;


$window.location.reload()

Thank you for your interest in this question.
Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).


Would you like to answer one of these unanswered questions instead?