Comment gérer / empêcher la navigation ou le rechargement du navigateur dans angularjs?

Je voudrais détecter dans mon application angulaire quand un utilisateur navigue ou recharge une page.

L'application (qui utilise un processus de connexion) doit ensuite distinguer qu'elle a été rechargée, de sorte que l'utilisateur ne perdra pas ses données d'authentification et l'application devrait pouvoir restaurer les informations nécessaires à partir de localStorage.

Veuillez suggérer des techniques optimales pour "gérer" le rechargement / la navigation du navigateur.

Toutes vos variables JavaScript et en mémoire disparaissent lors du rechargement. Dans js, vous savez que la page a été rechargée lorsque le code est en cours d'exécution pour la première fois.

Pour gérer le rechargement lui-même (ce qui inclut frapper F5) et prendre des mesures avant de recharger ou même d'annuler, utilisez un événement «avant la charge».

var windowElement = angular.element($window); windowElement.on('beforeunload', function (event) { // do whatever you want in here before the page unloads. // the following line of code will prevent reload or navigating away. event.preventDefault(); });

J'ai eu le même problème, mais la réponse de Ben n'a pas fonctionné pour moi.

Cette réponse m'a mis sur la bonne voie. Je voulais ajouter un avertissement sur certains états mais pas tous. Voici comment je l'ai fait (probablement pas le moyen le plus propre):

 window.onbeforeunload = function(event) { if ($state.current.controller === 'ReloadWarningController') { // Ask the user if he wants to reload return 'Are you sure you want to reload?' } else { // Allow reload without any alert event.preventDefault() } };

(Dans la définition de ReloadWarningController , qui avait l' $state injecté)