Seite neu laden in AngularJS

1. Seite neu laden mit der reload()-Methode in AngularJS
2. Seite neu laden mit location.reload() in AngularJS

Dieser Artikel befasst sich mit dem Neuladen der Route und nicht mit der vollständigen Seite oder Anwendung, da das Aktualisieren der gesamten Seite für einige kleinere Fehler manchmal problematisch sein kann. Wir werden uns auch ansehen, wie die Gesamtseite vom Server neu geladen wird.

AngularJS implementiert seine Datenbindung durch bidirektionale Datenbindung, die die Ansicht automatisch aktualisiert, wenn sich das Modell ändert und umgekehrt. Es gibt zwei Möglichkeiten zum Neuladen von AngularJS-Seiten.

Eine Möglichkeit ist die Verwendung von windows.location.reload(), auf die über den Provider $locationProvider zugegriffen werden kann, und die andere die Methode reload.

Lassen Sie uns tief in das Thema eintauchen und diese Methoden im Detail besprechen.

Seite neu laden mit der reload()-Methode in AngularJS

Das Neuladen der Seite ist eine gängige Methode zum Aktualisieren von Inhalten. Die reload()-Methode in AngularJS ist eine der besten Möglichkeiten, dies zu erreichen.

Anstatt das gesamte Programm neu zu starten, bietet AngularJS einen Routendienst namens reload()-Methode, der die Hauptroute zum Neuladen/Rendern identifiziert.

Der Controller der Route enthält Dienste, die in einem Fall benannt werden, wenn der Controller erstellt wird, und wir können genau diese Dienste abrufen, um die Informationen zu aktualisieren, wenn eine Bedingung eintritt.

Die Methode reload() aktualisiert den gesamten Inhalt einer Webseite und löscht alle zwischengespeicherten Daten. Dies ist nützlich, wenn wir neue Daten anzeigen möchten, die aktualisiert wurden, oder wenn wir Inhalte aktualisieren möchten, die möglicherweise versehentlich zwischengespeichert wurden.

Die reload()-Methode in AngularJS ist eine effiziente Möglichkeit, Seiten zu aktualisieren, da wir keinen Code schreiben müssen, ähnlich wie bei der JavaScript-setInterval-Funktion manuell.

Hier ist ein Beispiel für das Neuladen einer Seite mit der Methode reload() in AngularJS.

app.controller('myapp',
['$scope', '$route', function($scope, $route) {
function reload()
$scope.reloadRoute  = function(){
$route.reload();
}; }]);

Seite neu laden mit location.reload() in AngularJS

Die Methode location.reload() ist, wenn ein Benutzer auf die Schaltfläche Aktualisieren klickt oder F5 auf seiner Tastatur drückt.

Es lädt die aktuelle Seite neu und löscht alle Cookies, die in der vorherigen Anfrage an diesen Server gesetzt wurden. Außerdem werden alle Bilder, Stylesheets, Skripte und andere Dateien neu geladen.

Es ist eine nützliche Methode, wenn Sie Ihre AngularJS-Anwendung debuggen.

Unten ist ein Beispiel für das Neuladen der Seite mit der Methode location.reload().

HTML Quelltext:

<h1 id="text">Open the Magic Box</h1>
<button onclick="start()">Click here</button>
<button onclick="reload()">Reload page</button>

JavaScript-Code:

var log = msg => div.innerHTML += "<p>" + msg + "</p>";
function start() {
    document.getElementById("text").innerHTML = "Hello, How are you? Are you enjoying your day?";
}
function reload() {
    log("loading...");
    location.reload(true);
}

Hier im JavaScript-Code setzen wir location.reload() auf true; warum haben wir das gemacht? Denn diese Methode lädt die Seite standardmäßig aus dem Cache.

Wenn wir es jedoch auf true ändern, wird die Seite vom Server aktualisiert.

Klicken Sie hier, um die Funktionsweise des oben bereitgestellten Codes zu überprüfen.