Jak ponownie załadować lub zrenderować całą stronę za pomocą AngularJS

299

Po renderowaniu całej strony w oparciu o kilka kontekstów użytkownika i po złożeniu kilku $httpżądań chcę, aby użytkownik mógł przełączać konteksty i ponownie renderować wszystko ponownie (ponownie wysyłać wszystkie $httpżądania itp.). Jeśli po prostu przekieruję użytkownika w inne miejsce, wszystko działa poprawnie:

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

Jeśli użyję $window.location.reload(), niektóre z $httpżądań auth.impersonate(username)oczekujących na odpowiedź zostaną anulowane, więc nie mogę tego użyć. Hack $location.path($location.path())też nie działa (nic się nie dzieje).

Czy istnieje inny sposób ponownego renderowania strony bez ręcznego wydawania wszystkich żądań?

andersonvom
źródło
Jak mówi poniżej Alvaro Joao, musisz użyć angular-route.js, aby to zadziałało. bennadel.com/blog/…
Yvonne Aburrow
Możliwy duplikat AngularJs: Przeładuj stronę
Alena Kastsiukavets

Odpowiedzi:

404

W celu wymuszenia kątowego ponownego renderowania bieżącej strony można użyć:

$route.reload();

Zgodnie z dokumentacją AngularJS :

Powoduje, że usługa trasy $ ponownie ładuje bieżącą trasę, nawet jeśli $ lokalizacja się nie zmieniła.

W wyniku tego ngView tworzy nowy zakres, przywraca kontroler.

andersonvom
źródło
6
Dzięki za komentarz, z jakiegoś powodu wydaje mi się, że zachowuję się nieco inaczej, kiedy używam w $route.reload()porównaniu do normalnego odświeżania. Na przykład karta jest ustawiona tak, aby początkowo wyświetlała się przy odświeżaniu, ale gdy metoda przeładowania wydaje się ponownie ładować stronę bez ustawiania karty, nie jestem pewien, na czym polega problem.
Doug Molineux
2
Czy to również uruchamia filtry / usługi? Uzyskiwanie niepożądanego trwałego stanu. Edycja: Nadal głosowałem za prawidłowe udzielenie odpowiedzi na pytanie i jest to bardzo pomocne. Dziękujemy
udziel
10
Pamiętaj, aby wstrzyknąć $routedo kontrolera, aby to zadziałało.
Neel
6
@alphapilgrim Moduł ngRoute nie jest już częścią rdzenia angular.js file. Jeśli nadal używasz, $routeProvidermusisz teraz dołączyć do angular-route.jskodu HTML:
Alvaro Joao
3
$ state.reload (), jeśli używasz stateProvider
Lalit Rao
314

$route.reload()ponownie zainicjuje kontrolerów, ale nie usługi. Jeśli chcesz zresetować cały stan aplikacji, możesz użyć:

$window.location.reload();

Jest to standardowa metoda DOM, do której można uzyskać dostęp wstrzykując usługę $ window .

Jeśli chcesz mieć pewność, że strona zostanie ponownie załadowana z serwera, na przykład, gdy używasz Django lub innej platformy WWW i chcesz zrenderować stronę po stronie serwera, przekaż truejako parametr do reload, jak wyjaśniono w dokumentacji . Ponieważ wymaga to interakcji z serwerem, będzie wolniej, więc rób to tylko w razie potrzeby

Kątowy 2

Powyższe odnosi się do kątowego 1. Nie używam kątowa 2, wygląda jak usługi różnią się tam znajduje Router, Locationoraz DOCUMENT. Nie testowałem tam różnych zachowań

Danza
źródło
2
Warto zauważyć, że i tak nie należy przechowywać stanu w usługach, aby wymagać „ponownego uruchomienia” usług.
andersonvom
19
Kto to mówi? Gdzie należy przechowywać dane w pamięci podręcznej?
danza
5
Natknąłem się na wiele błędów z powodu przechowywania danych w usługach, co czyni je bardziej stanowymi niż bezpaństwowymi. O ile nie mówimy o usłudze buforowania (w takim przypadku istniałby interfejs do jej opróżnienia), trzymałbym dane poza usługami i w kontrolerach. Na przykład można przechowywać dane w localStorage i skorzystać z usługi, aby uzyskać do nich dostęp. To uwolniłoby usługę od przechowywania danych bezpośrednio w niej.
andersonvom
2
@danza Gdzie należy przechowywać dane w pamięci podręcznej? ... obiekt modelowy? Howver Angular wykonał okropną robotę, nazywając swoje składniki MVCS. Trzymam obiekty modelu do wstrzykiwania za pośrednictwem interfejsu API module.value. Następnie różne interfejsy API, które zdefiniowałem w usłudze ng, które zmieniają obiekt modelu, działają bardziej jak polecenia.
jusopi
2
Pewnie, że to zadziała, ale nie jest to dobra praktyka. Zobacz dokumentację dotyczącą $ window , powód korzystania z niego wyjaśniono na początku: Chociaż okno jest dostępne w języku JavaScript na całym świecie, powoduje problemy z testowalnością, ponieważ jest zmienną globalną. Angular zawsze odnosimy się do niego za pośrednictwem usługi $ window, więc może zostać zastąpione, usunięte lub wyszydzone w celu przetestowania
Danza
38

Aby ponownie załadować stronę dla danej ścieżki trasy: -

$location.path('/path1/path2');
$route.reload();
Kumar Sambhav
źródło
6
Nie wiem dlaczego, ale metoda .reload () wydaje się tutaj nie działać. Nic nie zmienia.
mircobabini,
28

Jeśli korzystasz z kątowego interfejsu użytkownika routera, będzie to najlepsze rozwiązanie.

$scope.myLoadingFunction = function() {
    $state.reload();
};
Neha DP
źródło
W moim projekcie cli po wdrożeniu na hostingu współdzielonym. Kiedy ponownie ładuję mój projekt, podałem błąd 404, aby rozwiązać ten problem. Jeśli dodam „użyj skrótu”, to działa z „#”, ale nie chcę tego, jest sposób, aby to rozwiązać.
T. Shashwat,
24

Być może zapomniałeś dodać „$ route”, deklarując zależności kontrolera:

app.controller('NameCtrl', ['$scope','$route', function($scope,$route) {   
   // $route.reload(); Then this should work fine.
}]);
Mario Medrano Maldonado
źródło
9

Aby przeładować wszystko, użyj window.location.reload (); z angularjs

Sprawdź działający przykład

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
źródło
7

Jeśli chcesz odświeżyć kontroler podczas odświeżania używanych usług, możesz użyć tego rozwiązania:

  • Wstaw stan $

to znaczy

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

Spowoduje to odświeżenie kontrolera i HTML, a także możesz nazwać to Odśwież lub Ponownie renderuj .

Saurabh Sarathe
źródło
2
dotyczy routera interfejsu użytkownika, a nie kątowego.
dgzornoza
6

Przed Angular 2 (AngularJs)

Trasa

$route.reload();

Jeśli chcesz ponownie załadować całą aplikację

$window.location.reload();

Angular 2+

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

constructor(private location: Location) {}

ngOnInit() {  }

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

Lub

constructor(private location: Location) {}

ngOnInit() {  }

Methods (){
    this.ngOnInit();
}
Thilina Sampath
źródło
FYI - Angular 7: „Przeładowanie właściwości” nie istnieje dla typu „Lokalizacja” ”.
ACEG
@Cristina dziękuje twoim informacjom. Używam tego przed kątową
siódmą
5

Najłatwiejszym rozwiązaniem, jakie wymyśliłem, było

dodaj „/” do trasy, która ma zostać przeładowana za każdym razem, gdy wracasz.

na przykład:

zamiast następujących

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

posługiwać się,

$routeProvider
  .when('/About/', { //notice the '/' at the end 
    templateUrl: 'about.html',
    controller: 'AboutCtrl'
  })
diyoda_
źródło
2
@PardeepJain To zadziałało dla mnie. Dlatego to jest odpowiedź. Czy głosowałeś za moją odpowiedzią?
diyoda_
1
nie, wcale nie, twoja odpowiedź nie jest taka zła, aby głosować. niesamowite, nie wiem teraz, dlaczego to samo nie działa dla mnie w angular2.
Pardeep Jain
2
Idealne rozwiązanie. Dzięki!
simon
Działa to nawet wtedy, gdy Twoja oryginalna ścieżka jest ///
katalogiem
W Angular 6 działa po użyciu # tego samego można również użyć w Angular2. tak myślę
T. Shashwat,
5

Spróbuj wykonać jedną z następujących czynności:

$route.reload(); // don't forget to inject $route in your controller
$window.location.reload();
location.reload();
Yamen Ashraf
źródło
4

Mam ten działający kod do usuwania pamięci podręcznej i ponownego ładowania strony

Widok

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

Kontroler

Wtryskiwacze: $ 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
źródło
3

Użyj następującego kodu bez poufnego powiadomienia o ponownym załadowaniu do użytkownika. Wyrenderuje stronę

var currentPageTemplate = $route.current.templateUrl;
$templateCache.remove(currentPageTemplate);
$window.location.reload();
KARTHIKEYAN.A
źródło
-8

Od miesięcy mam ciężką walkę z tym problemem, a jedynym rozwiązaniem, które mi się udało, jest:

var landingUrl = "http://www.ytopic.es"; //URL complete
$window.location.href = landingUrl;
Jose Ramon Leon Somovilla
źródło
4
Nie różni się $window.location.reload()to w żaden sposób od postępowania, o którym konkretnie wspomina OP, w jego przypadku nie działa prawidłowo.
Wszyscy pracownicy są niezbędni