Recharger la page dans AngularJS

1. Recharger la page à l’aide de la méthode reload() dans AngularJS
2. Recharger la page en utilisant location.reload() dans AngularJS

Cet article abordera la façon de recharger la route plutôt que la page ou l’application complète, car l’actualisation de la page entière pour quelques erreurs mineures peut parfois être problématique. Nous verrons également comment recharger la page globale depuis le serveur.

AngularJS implémente sa liaison de données via une liaison de données bidirectionnelle, qui met automatiquement à jour la vue chaque fois que le modèle change et vice versa. Il existe deux façons de recharger la page AngularJS.

L’une consiste à utiliser windows.location.reload(), accessible via le fournisseur $locationProvider, et l’autre utilise la méthode de rechargement.

Plongeons dans le sujet et discutons de ces méthodes en détail.

Recharger la page à l’aide de la méthode reload() dans AngularJS

Le rechargement de la page est un moyen courant d’actualiser n’importe quel contenu. La méthode reload() dans AngularJS est l’un des meilleurs moyens d’y parvenir.

Plutôt que de redémarrer l’intégralité du programme, AngularJS fournit un service de route appelé la méthode reload(), qui identifie la route principale à recharger/re-rendre.

Le contrôleur de la route inclut des services qui sont nommés dans un cas lors de la construction du contrôleur, et nous pouvons rappeler ces services exacts pour actualiser les informations lorsqu’une condition se produit.

La méthode reload() actualise tout le contenu d’une page Web et efface toutes les données mises en cache. C’est utile lorsque nous voulons afficher de nouvelles données qui ont été mises à jour ou si nous voulons actualiser du contenu qui peut avoir été mis en cache par inadvertance.

La méthode reload() dans AngularJS est un moyen efficace de rafraîchir les pages, car elle ne nous oblige pas à écrire de code, similaire à la fonction JavaScript setInterval manuellement.

Voici un exemple de rechargement d’une page à l’aide de la méthode reload() dans AngularJS.

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

Recharger la page en utilisant location.reload() dans AngularJS

La méthode location.reload() est lorsqu’un utilisateur clique sur le bouton d’actualisation ou appuie sur F5 sur son clavier.

Il recharge la page en cours et efface tous les cookies définis dans la requête précédente à ce serveur. Cela entraîne également le rechargement de toutes les images, feuilles de style, scripts et autres fichiers.

C’est une méthode bénéfique lorsque vous déboguez votre application AngularJS.

Ci-dessous un exemple de rechargement de page avec la méthode location.reload().

Code HTML:

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

Code Javascript :

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

Ici, dans le code JavaScript, nous définissons location.reload() sur true ; pourquoi avons-nous fait cela? Parce que cette méthode charge la page à partir du cache par défaut.

Cependant, si nous le changeons en true, la page est actualisée à partir du serveur.

Cliquez ici pour vérifier le fonctionnement du code fourni ci-dessus.