web-dev-qa-db-fra.com

Comment recharger ou refaire le rendu de la page entière avec AngularJS

Après avoir restitué la page entière en fonction de plusieurs contextes utilisateur et effectué plusieurs requêtes $http, je souhaite que l'utilisateur puisse changer de contexte et tout restituer de nouveau (renvoyer toutes les requêtes $http, 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(), certaines des demandes $http sur auth.impersonate(username) qui attendent une réponse sont annulées. Je ne peux donc 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 rendre à nouveau la page sans émettre à nouveau manuellement toutes les demandes?

javascriptangularjsnode.jsreloadrerender
295
andersonvom

Pour mémoire, pour forcer angular à restituer la page actuelle, vous pouvez utiliser:

$route.reload();

Selon AngularJS documentation :

Force le service $ route à recharger l'itinéraire actuel même si $ location n'a pas changé.

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

399
andersonvom

$route.reload() réinitialisera 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 et un autre framework Web et que vous souhaitez un nouveau rendu côté serveur, transmettez true comme paramètre à reload, comme expliqué dans la documentation . Comme cela nécessite une interaction avec le serveur, ce 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, on dirait que les services y sont différents, il y a Router, Location, et le DOCUMENT. Je n'y ai pas testé différents comportements

313
danza

Pour recharger la page pour un chemin de route donné: -

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

Si vous utilisez angular ui-router ce sera la meilleure solution.

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

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.
}]);
24
Mario Medrano Maldonado

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

Découvrez des exemples 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/

9
Vaibs

Avant Angular 2 (AngularJs)

Par la 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();
}
6
Thilina Sampath

Si vous souhaitez actualiser le contrôleur lors de l'actualisation des services que vous utilisez, vous pouvez utiliser cette solution:

  • Injecte $ 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 code HTML. Vous pourrez également l'appeler rafraîchir ou restituer.

6
Saurabh Sarathe

La solution la plus simple que j'ai imaginée était,

ajoutez '/' à l'itinéraire qui veut être rechargé à chaque retour.

par exemple:

au lieu de ce qui suit

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

utilisation,

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

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

Voir

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

contrôleur

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

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

Essayez l'une des solutions suivantes:

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

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();
3
KARTHIKEYAN.A