Comment recharger ou rendre à nouveau la page entière à l'aide d'AngularJS ?

Question

Après avoir rendu la page entière sur la base de plusieurs contextes d'utilisateur et après avoir fait plusieurs $http je veux que l'utilisateur puisse changer de contexte et tout restituer à nouveau (en renvoyant toutes les demandes d $http demandes, etc). Si je redirige simplement l'utilisateur ailleurs, les choses fonctionnent correctement :

$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);
};

Si j'utilise $window.location.reload() alors certains des $http demandes sur auth.impersonate(username) qui sont en attente d'une réponse sont annulées, donc je ne peux pas utiliser ça. De plus, le hack $location.path($location.path()) ne fonctionne pas non plus (rien ne se passe).

Existe-t-il un autre moyen de rendre à nouveau la page sans relancer manuellement toutes les requêtes ?

Answer 1

Pour mémoire, pour forcer angular à refaire le rendu de la page courante, vous pouvez utiliser :

$route.reload();

Selon AngularJS documentation :

Demande au service $route de recharger l'itinéraire actuel même si $location n'a pas changé.

En conséquence, ngView crée une nouvelle portée, réinstalle le contrôleur.

Answer 2

$route.reload() réinitialisera les contrôleurs mais pas les services. Si vous voulez réinitialiser l'état entier de votre application, vous pouvez utiliser :

$window.location.reload();

Il s'agit d'un méthode standard DOM auquel vous pouvez accéder en injectant le $fenêtre service.

Si vous voulez être sûr de recharger la page depuis le serveur, par exemple lorsque vous utilisez Django ou un autre framework web et que vous voulez un nouveau rendu côté serveur, passez la commande true en tant que paramètre de reload comme expliqué dans les docs . Comme cela nécessite une interaction avec le serveur, cela sera plus lent, alors ne le faites que si nécessaire.

Angulaire 2

Ce qui précède s'applique à Angular 1. Je n'utilise pas Angular 2, il semblerait que les services soient différents dans ce cas. Router , Location et le DOCUMENT . Je n'y ai pas testé de comportements différents

Answer 3

Pour recharger la page pour un chemin d'accès donné :-.

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

Answer 4

Si vous utilisez angulaire ui-routeur ce sera la meilleure solution.

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

Answer 5

Peut-être avez-vous oublié d'ajouter "$route" lors de la déclaration des dépendances de votre contrôleur :

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