So laden Sie die gesamte Seite mit AngularJS neu oder rendern sie erneut

Nachdem $httpich die gesamte Seite basierend auf mehreren Benutzerkontexten gerendert und mehrere Anforderungen gestellt habe, möchte ich, dass der Benutzer die Kontexte wechseln und alles erneut rendern kann (erneutes Senden aller $httpAnforderungen usw.). Wenn ich den Benutzer nur an eine andere Stelle umleitung, funktionieren die Dinge ordnungsgemäß:

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

Wenn ich verwende $window.location.reload(), werden einige der $httpAnfragen auth.impersonate(username), die auf eine Antwort warten, abgebrochen, sodass ich das nicht verwenden kann. Außerdem $location.path($location.path())funktioniert der Hack auch nicht (nichts passiert).

Gibt es eine andere Möglichkeit, die Seite neu zu rendern, ohne alle Anforderungen erneut manuell auszugeben?

Für den Datensatz können Sie Folgendes verwenden, um den Winkel zum erneuten Rendern der aktuellen Seite zu erzwingen:

$route.reload();

Laut AngularJS- Dokumentation :

Bewirkt, dass der $ route-Dienst die aktuelle Route neu lädt, auch wenn sich der Standort nicht geändert hat.

Infolgedessen erstellt ngView einen neuen Bereich und stellt den Controller wieder her.

$route.reload()wird die Controller neu initialisieren, aber nicht die Dienste. Wenn Sie den gesamten Status Ihrer Anwendung zurücksetzen möchten, können Sie Folgendes verwenden:

$window.location.reload();

Dies ist eine Standard-DOM-Methode, auf die Sie zugreifen können, um den $ window- Dienst zu injizieren .

Wenn Sie sicher sein möchten, dass die Seite vom Server neu geladen wird, z. B. wenn Sie Django oder ein anderes Webframework verwenden und ein neues serverseitiges Rendern wünschen, übergeben Sie trueals Parameter an reload, wie in den Dokumenten erläutert . Da dies eine Interaktion mit dem Server erfordert, ist diese langsamer, daher nur bei Bedarf

Winkel 2

Das Obige gilt für Angular 1. Ich nicht Angular 2 verwende, sieht aus wie die Dienste unterscheiden sich dort, gibt es Router, Locationund das DOCUMENT. Ich habe dort keine unterschiedlichen Verhaltensweisen getestet

Zum erneuten Laden der Seite für einen bestimmten Routenpfad: -

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

Wenn Sie einen eckigen UI-Router verwenden, ist dies die beste Lösung.

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

Vielleicht haben Sie vergessen, "$ route" hinzuzufügen, als Sie die Abhängigkeiten Ihres Controllers deklarierten:

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

Verwenden Sie window.location.reload (), um alles neu zu laden. mit eckigen js

Schauen Sie sich das Arbeitsbeispiel an

HTML

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

eckigJS

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

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

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

Wenn Sie den Controller aktualisieren möchten, während Sie die von Ihnen verwendeten Dienste aktualisieren, können Sie folgende Lösung verwenden:

• Injizieren Sie $ state

dh

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

Dadurch werden der Controller und der HTML- Code aktualisiert . Sie können ihn auch als Aktualisieren oder erneut rendern bezeichnen .

Vor Angular 2 (AngularJs)

Durch die Route

$route.reload();

Wenn Sie die gesamte Anwendung neu laden möchten

$window.location.reload();

Winkel 2+

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

constructor(private location: Location) {}

ngOnInit() {  }

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

Oder

constructor(private location: Location) {}

ngOnInit() {  }

Methods (){
    this.ngOnInit();
}

Die einfachste Lösung, die ich mir vorgestellt habe, war:

Fügen Sie der Route, die bei jeder Rückkehr neu geladen werden soll, '/' hinzu.

z.B:

anstelle der folgenden

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

verwenden,

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

Versuchen Sie eine der folgenden Möglichkeiten:

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

Ich habe diesen Arbeitscode zum Entfernen des Caches und zum erneuten Laden der Seite erhalten

Aussicht

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

Regler

Injektoren: $ scope, $ state, $ stateParams, $ templateCache

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

Verwenden Sie den folgenden Code ohne vertrauliche Benachrichtigung beim erneuten Laden an den Benutzer. Die Seite wird gerendert

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

Ich habe seit Monaten einen harten Kampf mit diesem Problem und die einzige Lösung, die für mich funktioniert hat, ist folgende:

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