Como recarregar ou renderizar novamente a página inteira usando o AngularJS


299

Depois de renderizar a página inteira com base em vários contextos do usuário e fazer várias $httpsolicitações, desejo que o usuário possa alternar contextos e renderizar tudo novamente (reenviar todas as $httpsolicitações, etc.). Se eu apenas redirecionar o usuário para outro lugar, as coisas funcionarão corretamente:

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

Se eu usar $window.location.reload(), algumas $httpsolicitações auth.impersonate(username)que estão aguardando uma resposta serão canceladas, então não posso usá-la. Além disso, o hack $location.path($location.path())também não funciona (nada acontece).

Existe outra maneira de renderizar novamente a página sem emitir manualmente todas as solicitações novamente?


Como Alvaro Joao diz abaixo, você precisa usar o angular-route.js para que isso funcione. bennadel.com/blog/...
Yvonne Aburrow

Respostas:


404

Para o registro, para forçar o angular a renderizar novamente a página atual, você pode usar:

$route.reload();

De acordo com a documentação do AngularJS :

Faz com que o serviço de rota $ recarregue a rota atual, mesmo se $ location não tiver sido alterado.

Como resultado disso, o ngView cria um novo escopo, restabelece o controlador.


6
Obrigado pelo comentário, por algum motivo, pareço ter um comportamento ligeiramente diferente quando uso $route.reload()comparado a uma atualização normal. Por exemplo, uma guia está configurada para ser exibida inicialmente na atualização, mas quando o método recarregar parece recarregar a página sem definir a guia, não sabe ao certo qual é o problema.
Doug Molineux 28/05

2
Isso também executa filtros / serviços? Obtendo um estado persistente indesejado. Edit: Ainda votado por responder a pergunta corretamente e isso é super útil. Obrigado
conceda

10
Lembre-se de injetar $routeno controlador para que isso funcione.
Neel

6
@alphapilgrim O módulo ngRoute não faz mais parte do núcleo angular.js file. Se você continuar usando $routeProvider, agora precisará incluir angular-route.jsno seu HTML:
Alvaro Joao

3
$ state.reload () se você usar stateProvider
Lalit Rao

314

$route.reload()reinicializará os controladores, mas não os serviços. Se você deseja redefinir todo o estado do seu aplicativo, pode usar:

$window.location.reload();

Este é um método DOM padrão que você pode acessar injetando o serviço $ window .

Se você quiser recarregar a página do servidor, por exemplo, quando estiver usando o Django ou outra estrutura da web e desejar uma nova renderização do lado do servidor, passe truecomo um parâmetro para reload, conforme explicado nos documentos . Como isso requer interação com o servidor, será mais lento, se necessário.

Angular 2

O acima se aplica a Angular 1. Eu não estou usando angular 2, parece que os serviços são diferentes lá, não é Router, Locatione o DOCUMENT. Eu não testei comportamentos diferentes lá


2
Vale a pena notar que não se deve armazenar o estado nos serviços de qualquer maneira para exigir que os serviços sejam "reiniciados".
Andersonvom

19
Quem diz isso? Onde se deve armazenar dados em cache?
Danza

5
Eu me deparei com muitos e muitos erros devido ao armazenamento de dados em serviços, tornando-os com estado e não com estado. A menos que falemos de um serviço de armazenamento em cache (nesse caso, haveria uma interface para liberá-lo), eu manteria os dados fora de serviços e nos controladores. Por exemplo, é possível manter os dados no localStorage e usar um serviço para acessá-los. Isso liberaria o serviço de manter os dados diretamente nele.
22714 Andersonvom

2
@danza Onde se deve armazenar dados em cache? ... um objeto modelo? O Howver Angular fez um trabalho terrível ao nomear seus componentes do MVCS. Eu mantenho objetos de modelo injetáveis ​​por meio da API module.value. Em seguida, as várias APIs que defini em um serviço ng que alteram o objeto de modelo funcionam mais como comandos.
jusopi

2
Claro, isso funcionará, mas não é uma boa prática. Consulte a documentação sobre $ window , o motivo para usá-lo é explicado no começo: Embora a janela esteja disponível globalmente em JavaScript, ela causa problemas de testabilidade, porque é uma variável global. Em angular que sempre se referem a ele através do serviço $ janela, por isso pode ser substituído, removido ou ridicularizado por testar
danza

38

Para recarregar a página para um determinado caminho de rota: -

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

6
Não sei por que, mas o método .reload () parece não estar funcionando aqui. Não realiza nada.
mircobabini

28

Se você estiver usando um ui-router angular, esta será a melhor solução.

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

No meu projeto CLI após a implantação em hospedagem compartilhada. Quando estou recarregando meu projeto está dando erro 404 para resolver isso ter usado. Se eu adicionar 'use hash', ele funcionará com '#', mas eu não quero isso, existe uma maneira de resolvê-lo.
T. Shashwat

24

Bem, talvez você tenha esquecido de adicionar "$ route" ao declarar as dependências do seu Controller:

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

9

Apenas para recarregar tudo, use window.location.reload (); com angularjs

Confira o exemplo de trabalho

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

Se você deseja atualizar o controlador enquanto atualiza quaisquer serviços que estiver usando, você pode usar esta solução:

  • Injetar $ state

ie

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

Isso atualizará o controlador e o HTML também. Você pode chamá-lo de Atualizar ou Renderizar novamente .


2
isto é para o roteador da interface do usuário não para angular.
Dgzornoza 04/07

6

Antes do Angular 2 (AngularJs)

Através da rota

$route.reload();

Se você deseja recarregar todo o aplicativo

$window.location.reload();

Angular 2+

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

constructor(private location: Location) {}

ngOnInit() {  }

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

Ou

constructor(private location: Location) {}

ngOnInit() {  }

Methods (){
    this.ngOnInit();
}

FYI - Angular 7: "A propriedade 'recarregar' não existe no tipo 'Localização'".
ACEG

@Cristina agradece suas informações. Eu uso isso antes do angular 7
Thilina Sampath 17/01/19

5

A solução mais fácil que imaginei foi:

adicione '/' à rota que deseja ser recarregada sempre que voltar.

por exemplo:

em vez do seguinte

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

usar,

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

2
@PardeepJain Isso funcionou para mim. É por isso que esta é uma resposta. Você votou negativamente na minha resposta?
diyoda_

1
não, de jeito nenhum, sua resposta não é tão ruim de votar. incrível agora não sei porque mesmo não está funcionando para mim em angular2.
precisa

2
Solução perfeita. Thks!
simon

Isso funciona mesmo que o caminho original seja a raiz do aplicativo - /: O Minha rota agora fica assim://
MadPhysicist 10/10/16

No Angular 6, ele funciona depois de usar # same e também pode ser usado para o Angular2. acho que sim
T. Shashwat

5

Tente um dos seguintes:

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

4

Eu recebi este código de trabalho para remover o cache e recarregar a página

Visão

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

Controlador

Injetores: $ scope, $ state, $ stateParams, $ templateCache

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

3

Use o código a seguir sem notificação de recarga íntima para o usuário. Vai renderizar a página

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

-8

Eu tenho uma luta difícil com esse problema há meses, e a única solução que funcionou para mim é esta:

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

4
Isso não é diferente do $window.location.reload()que o que o OP menciona especificamente não funciona adequadamente no caso dele.
Todos os trabalhadores têm Essencial
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.