Comment recharger ou re-rendre la page entière en utilisant AngularJS

299

Après avoir rendu la page entière en fonction de plusieurs contextes utilisateur et avoir fait plusieurs $httpdemandes, je veux que l'utilisateur puisse changer de contexte et tout restituer à nouveau (renvoyer toutes les $httpdemandes, 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 certaines des $httpdemandes auth.impersonate(username)qui attendent une réponse sont annulées, donc je ne peux pas l'utiliser. De plus, le hack $location.path($location.path())ne fonctionne pas non plus (rien ne se passe).

Existe-t-il un autre moyen de restituer la page sans émettre à nouveau toutes les demandes manuellement?

andersonvom
la source
Comme le dit Alvaro Joao ci-dessous, vous devez utiliser angular-route.js pour que cela fonctionne. bennadel.com/blog/…
Yvonne Aburrow
Possible doublon d' AngularJs: page de rechargement
Alena Kastsiukavets

Réponses:

404

Pour mémoire, pour forcer angulaire à restituer la page courante, vous pouvez utiliser:

$route.reload();

Selon la documentation AngularJS :

Force $ route service à recharger la route actuelle même si $ location n'a pas changé.

À la suite de cela, ngView crée une nouvelle portée, rétablit le contrôleur.

andersonvom
la source
6
Merci pour le commentaire, pour une raison quelconque, je semble avoir un comportement légèrement différent lorsque j'utilise $route.reload()par rapport à un rafraîchissement normal. Par exemple, un onglet est configuré pour s'afficher initialement lors de l'actualisation, mais lorsque la méthode de rechargement semble recharger la page sans définir l'onglet, vous ne savez pas quel est le problème.
Doug Molineux
2
Est-ce que cela exécute également des filtres / services? Obtention d'un état persistant indésirable. Edit: Toujours voté pour avoir répondu correctement à la question et c'est très utile. Merci
accordez
10
N'oubliez pas d'injecter $routeau contrôleur pour que cela fonctionne.
Neel
6
@alphapilgrim Le module ngRoute ne fait plus partie du noyau angular.js file. Si vous continuez à utiliser, $routeProvidervous devrez maintenant inclure angular-route.jsdans votre code HTML:
Alvaro Joao
3
$ state.reload () si vous utilisez stateProvider
Lalit Rao
314

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

$window.location.reload();

Il s'agit d'une méthode DOM standard à laquelle vous pouvez accéder en injectant le service $ window .

Si vous voulez être sûr de recharger la page à partir du serveur, par exemple lorsque vous utilisez Django ou un autre framework web et que vous voulez un nouveau rendu côté serveur, passez trueen paramètre à reload, comme expliqué dans la documentation . Comme cela nécessite une interaction avec le serveur, il 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 semble que les services soient différents là-bas, il y Routeren a Location, et le DOCUMENT. Je n'y ai pas testé différents comportements

danza
la source
2
Il convient de noter que de toute façon, il ne faut pas stocker l'état dans les services pour exiger le redémarrage des services.
andersonvom
19
Qui dit ça? Où est-on censé stocker les données mises en cache?
danza
5
Je suis tombé sur de nombreux bogues en raison du stockage de données dans les services, ce qui les rend avec état plutôt qu'apatrides. À moins que nous ne parlions d'un service de mise en cache (auquel cas, il y aurait une interface pour le vider), je garderais les données hors des services et dans les contrôleurs. Par exemple, on pourrait conserver les données dans localStorage et utiliser un service pour y accéder. Cela libérerait le service de la conservation directe des données.
andersonvom
2
@danza Où est-on censé stocker les données en cache? ... un objet modèle? Howver Angular a fait un travail terrible pour nommer leurs constituants MVCS. Je garde les objets modèles injectables via l'API module.value. Ensuite, les différentes API que j'ai définies sur un service ng qui modifient l'objet modèle fonctionnent plus comme des commandes.
jusopi
2
Bien sûr, cela fonctionnera, mais ce n'est pas une bonne pratique. Voir la documentation sur $ window , la raison de son utilisation est expliquée au début: Bien que la fenêtre soit globalement disponible en JavaScript, elle pose des problèmes de testabilité, car il s'agit d'une variable globale. En angulaire, nous nous y référons toujours via le service $ window, il peut donc être remplacé, supprimé ou moqué pour les tests
danza
38

Pour recharger la page d'un chemin d'itinéraire donné: -

$location.path('/path1/path2');
$route.reload();
Kumar Sambhav
la source
6
Je ne sais pas pourquoi mais la méthode .reload () ne semble pas fonctionner ici. Cela ne réalode rien.
mircobabini
28

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

$scope.myLoadingFunction = function() {
    $state.reload();
};
Neha DP
la source
Dans mon projet cli après le déploiement sur l'hébergement mutualisé. Lorsque je recharge mon projet, son erreur 404 pour résoudre ce problème a été utilisée. Si j'ajoute 'use hash', alors cela fonctionne avec '#', mais je ne veux pas cela, est-ce que cela peut être résolu.
T. Shashwat
24

Eh bien peut-être avez-vous oublié d'ajouter "$ route" lors de la déclaration des dépendances de votre Controller:

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

Juste pour tout recharger, utilisez window.location.reload (); avec angularjs

Consultez l'exemple de travail

HTML

<div ng-controller="MyCtrl">  
<button  ng-click="reloadPage();">Reset</button>
</div>

angularJS

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

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

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

Vaibs
la source
7

Si vous souhaitez actualiser le contrôleur tout en actualisant les services que vous utilisez, vous pouvez utiliser cette solution:

  • Injecter $ state

c'est à dire

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

Cela actualisera le contrôleur et le HTML, vous pouvez aussi l'appeler Actualiser ou Rendre à nouveau .

Saurabh Sarathe
la source
2
c'est pour le routeur ui pas pour angulaire.
dgzornoza
6

Avant Angular 2 (AngularJs)

Par route

$route.reload();

Si vous voulez recharger toute l'application

$window.location.reload();

Angulaire 2+

import { Location } from '@angular/common';

constructor(private location: Location) {}

ngOnInit() {  }

load() {
    this.location.reload()
}

Ou

constructor(private location: Location) {}

ngOnInit() {  }

Methods (){
    this.ngOnInit();
}
Thilina Sampath
la source
FYI - Angular 7: "La propriété 'recharger' n'existe pas sur le type 'Location'".
ACEG
@Cristina remercie vos informations. J'utilise ceci avant angular 7
Thilina Sampath
5

La solution la plus simple que je pensais était,

ajoutez '/' à la route qui veut être rechargée à chaque fois en revenant.

par exemple:

au lieu des suivants

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

utilisation,

$routeProvider
  .when('/About/', { //notice the '/' at the end 
    templateUrl: 'about.html',
    controller: 'AboutCtrl'
  })
diyoda_
la source
2
@PardeepJain Cela a fonctionné pour moi. Voilà pourquoi c'est une réponse. Avez-vous dévalorisé ma réponse?
diyoda_
1
non pas du tout, votre réponse n'est pas si mal à downvote. incroyable, je ne sais pas pourquoi cela ne fonctionne pas pour moi dans angular2.
Pardeep Jain
2
Solution parfaite. Merci!
Simon
Cela fonctionne même si votre chemin d'origine est la racine de l'application - /: O Mon itinéraire ressemble maintenant à ceci://
MadPhysicist
Dans Angular 6, cela fonctionne après avoir utilisé # # peut également être utilisé pour Angular2. pense que oui
T. Shashwat
5

Essayez l'une des solutions suivantes:

$route.reload(); // don't forget to inject $route in your controller
$window.location.reload();
location.reload();
Yamen Ashraf
la source
4

J'ai obtenu ce code de travail pour supprimer le cache et recharger la page

Vue

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

Manette

Injecteurs: $ scope, $ state, $ stateParams, $ templateCache

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

Utilisez le code suivant sans notification de rechargement intime à l'utilisateur. Il rendra la page

var currentPageTemplate = $route.current.templateUrl;
$templateCache.remove(currentPageTemplate);
$window.location.reload();
KARTHIKEYAN.A
la source
-8

J'ai eu un combat acharné avec ce problème pendant des mois, et la seule solution qui a fonctionné pour moi est la suivante:

var landingUrl = "http://www.ytopic.es"; //URL complete
$window.location.href = landingUrl;
Jose Ramon Leon Somovilla
la source
4
Ce n'est guère différent de ce $window.location.reload()que le PO mentionne spécifiquement ne fonctionne pas correctement dans son cas.
Tous les travailleurs sont essentiels