Cómo volver a cargar o renderizar toda la página con AngularJS


299

Después de renderizar toda la página en función de varios contextos de usuario y haber realizado varios $http solicitudes, quiero que el usuario pueda cambiar de contexto y volver a representar todo nuevamente (reenviar todas las $httpsolicitudes, etc.). Si solo redirijo al usuario a otro lugar, las cosas funcionan correctamente:

$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 yo uso $window.location.reload() , algunas de las $httpsolicitudes auth.impersonate(username)que están esperando una respuesta se cancelan, por lo que no puedo usar eso. Además, el truco $location.path($location.path())tampoco funciona (no pasa nada).

¿Hay alguna otra forma de volver a representar la página sin volver a emitir manualmente todas las solicitudes?


Como Alvaro Joao dice a continuación, debe usar angular-route.js para que esto funcione. bennadel.com/blog/…
Yvonne Aburrow

Respuestas:


404

Para el registro, para forzar angular para volver a representar la página actual, puede usar:

$route.reload();

De acuerdo con la documentación de AngularJS :

Hace que el servicio $ route vuelva a cargar la ruta actual incluso si $ location no ha cambiado.

Como resultado de eso, ngView crea un nuevo alcance, reinstala el controlador.


66
Gracias por el comentario, por alguna razón, parece que tengo un comportamiento ligeramente diferente cuando lo uso en $route.reload()comparación con una actualización normal. Por ejemplo, una pestaña está configurada para mostrarse inicialmente al actualizar, pero cuando el método de recarga parece volver a cargar la página sin configurar la pestaña, no estoy seguro de cuál es el problema.
Doug Molineux

2
¿Esto también ejecuta filtros / servicios? Obteniendo un estado persistente no deseado. Editar: Todavía voté por responder la pregunta correctamente y esto es muy útil. Gracias
conceda el

10
Recuerde inyectar $routeal controlador para que esto funcione.
Neel

66
@alphapilgrim El módulo ngRoute ya no es parte del núcleo angular.js file. Si continúa usando $routeProvider, ahora deberá incluir angular-route.jsen su HTML:
Alvaro Joao

3
$ state.reload () si usa stateProvider
Lalit Rao el

314

$route.reload()reiniciará los controladores pero no los servicios. Si desea restablecer todo el estado de su aplicación, puede usar:

$window.location.reload();

Este es un método DOM estándar al que puede acceder inyectando el servicio $ window .

Si desea asegurarse de volver a cargar la página desde el servidor, por ejemplo, cuando está utilizando Django u otro marco web y desea un nuevo renderizado del lado del servidor, pase truecomo parámetro reload, como se explica en los documentos . Como eso requiere interacción con el servidor, será más lento, así que hágalo solo si es necesario

Angular 2

Lo anterior se aplica a Angular 1. No estoy usando angular 2, parece que los servicios son diferentes allí, hay Router, Locationy el DOCUMENT. No probé diferentes comportamientos allí


2
Vale la pena señalar que de todos modos no se debe almacenar el estado en los servicios para requerir que los servicios se "reinicien".
andersonvom

19
¿Quién dice eso? ¿Dónde se supone que uno debe almacenar los datos en caché?
danza

55
Me he encontrado con muchos errores debido a que los datos se almacenan en los servicios, haciéndolos con estado en lugar de sin estado. A menos que estemos hablando de un servicio de almacenamiento en caché (en cuyo caso, habría una interfaz para vaciarlo), mantendría los datos fuera de los servicios y en los controladores. Por ejemplo, uno podría mantener los datos en localStorage y usar un servicio para acceder a ellos. Esto liberaría al servicio de guardar datos directamente en él.
andersonvom

2
@danza ¿Dónde se supone que uno debe almacenar los datos en caché? ... un objeto modelo? Howver Angular ha hecho un trabajo terrible al nombrar a sus constituyentes MVCS. Mantengo los objetos del modelo inyectable a través de la API module.value. Luego, las diversas API que definí en un servicio ng que alteran el objeto modelo funcionan más como comandos.
jusopi

2
Claro, eso funcionará, pero no es una buena práctica. Consulte la documentación sobre $ window , la razón para usarla se explica al principio: aunque la ventana está disponible globalmente en JavaScript, causa problemas de comprobabilidad, ya que es una variable global. En angular siempre nos referimos a ella a través de la ventana de servicio de $, lo que puede ser reemplazado, removido o burlado para probar
danza

38

Para volver a cargar la página para una ruta de ruta determinada: -

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

66
No sé por qué, pero el método .reload () parece no funcionar aquí. No realiza nada.
mircobabini

28

Si está utilizando un enrutador ui angular, esta será la mejor solución.

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

En mi proyecto cli después de la implementación en hosting compartido. Cuando estoy recargando mi proyecto, me está dando un error 404 para resolver esto. Si agrego 'use hash', entonces funciona con '#', pero no quiero esto, ¿hay alguna manera de que se pueda resolver?
T. Shashwat

24

Bueno, tal vez olvidó agregar "$ route" al declarar las dependencias de su controlador:

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

9

Solo para recargar todo, use window.location.reload (); con angularjs

Mira el ejemplo de trabajo

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/


7

Si desea actualizar el controlador mientras actualiza los servicios que está utilizando, puede usar esta solución:

  • Inyectar $ estado

es decir

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

Esto actualizará el controlador y el HTML, también puede llamarlo Actualizar o Renderizar .


2
esto es para enrutador ui no para angular.
dgzornoza

6

Antes de Angular 2 (AngularJs)

A través de la ruta

$route.reload();

Si quieres recargar toda la aplicación

$window.location.reload();

Angular 2+

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

constructor(private location: Location) {}

ngOnInit() {  }

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

O

constructor(private location: Location) {}

ngOnInit() {  }

Methods (){
    this.ngOnInit();
}

FYI - Angular 7: "La propiedad 'reload' no existe en el tipo 'Location'".
ACEG

@Cristina agradece tu información. Lo uso antes del angular 7
Thilina Sampath el

5

La solución más fácil que pensé fue,

agregue '/' a la ruta que desea volver a cargar cada vez que regrese.

p.ej:

en lugar de lo siguiente

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

utilizar,

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

2
@PardeepJain Esto funcionó para mí. Por eso es una respuesta. ¿Votaste mi respuesta?
diyoda_

1
no, para nada, tu respuesta no es tan mala como para rechazarla. increíble, ahora no sé por qué lo mismo no funciona para mí en angular2.
Pardeep Jain

2
Solución perfecta. Gracias!
Simon

Esto funciona incluso si su ruta original es la raíz de la aplicación - /: O Mi ruta ahora se ve así://
MadPhysicist

En Angular 6 funciona después de usar # same, también se puede usar para Angular2. creo que sí
T. Shashwat

5

Pruebe uno de los siguientes:

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

4

Obtuve este código de trabajo para eliminar el caché y volver a cargar la página

Ver

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

Controlador

Inyectores: $ scope, $ state, $ stateParams, $ templateCache

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

3

Utilice el siguiente código sin notificación de recarga íntima para el usuario. Representará la página.

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

-8

He tenido una dura lucha con este problema durante meses, y la única solución que me funcionó es esta:

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

44
Esto no es diferente de hacer lo $window.location.reload()que el OP menciona específicamente que no funciona correctamente en su caso.
Todos los trabajadores son esenciales
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.