AngularJS - Comment puis-je faire une redirection avec une page complète?


94

Je souhaite effectuer une redirection qui recharge une page complète afin que les cookies de mon serveur Web soient actualisés lors du chargement de la page. window.location = "/#/Next"et window.location.href = "/#/Next"ne fonctionnent pas, ils font une route angulaire qui n'atteint pas le serveur.

Quelle est la bonne façon de faire une demande de serveur complète dans un contrôleur angulaire?


8
Avez-vous déjà résolu cela?
superjos

7
Avez-vous déjà résolu cela?
Nolwennig le

6
Avez-vous déjà résolu cela?
Dan Beaulieu

5
Avez-vous déjà résolu cela?
Ma pile déborde le

4
Avez-vous déjà résolu cela?
shahzain ali du

Réponses:


183

Pour les <a>tags :

Vous devez coller target="_self"sur votre <a>tag

Il y a trois cas où AngularJS effectuera un rechargement complet de la page:

  • Liens contenant un élément cible
    Exemple:<a href="https://stackoverflow.com/ext/link?a=b" target="_self">link</a>
  • Liens absolus qui vont vers un domaine différent
    Exemple:<a href="http://angularjs.org/">link</a>
  • Liens commençant par '/' qui mènent à un chemin de base différent lorsque la base est définie
    Exemple:<a href="https://stackoverflow.com/not-my-base/link">link</a>

Utilisation de javascript :

Le $locationservice vous permet de modifier uniquement l'URL; il ne vous permet pas de recharger la page. Lorsque vous avez besoin de changer l'URL et recharger la page ou naviguer vers une autre page, s'il vous plaît utiliser une API de niveau inférieur: $window.location.href.

Voir:


15
$ window.location.href fait la même chose que window.location.href. Je suis presque sûr que $ window est juste un service d'emballage pour window. Dans les deux cas, les deux effectuent un itinéraire angulaire au lieu de l'actualisation complète de la page.
Mike Pateras

3
$ window.location.href provoque définitivement une actualisation complète de la page, je le fais dans mon application.
jszobody

3
J'ai lu la même chose. Ne fonctionne pas dans la version actuelle de Chrome. Il fait une route angulaire.
Mike Pateras

1
1.0.6 du CDN. Je fais cela dans un rappel de succès $ http.post, si cela compte, bien que je l'ai essayé en dehors du rappel et que j'obtienne les mêmes résultats. Si je fais la redirection vers "/" (pour laquelle j'ai également une route angulaire définie), cela fonctionne avec l'actualisation complète de la page, mais "/ # / Next" change simplement la vue.
Mike Pateras

5
<a href="..." target="_self">est ce qui a fonctionné pour moi. Merci !
Michael

33

Nous avons eu le même problème, travaillant à partir du code JS (c'est-à-dire pas à partir de l'ancre HTML). Voici comment nous avons résolu cela:

  1. Si nécessaire, modifiez virtuellement l'URL actuelle via le $locationservice. Cela peut être utile si votre destination n'est qu'une variante de l'URL actuelle, afin que vous puissiez tirer parti des $locationméthodes d'assistance. Par exemple, nous avons couru $location.search(..., ...)pour simplement changer la valeur d'un paramètre de chaîne de requête.

  2. Créez la nouvelle URL de destination, en utilisant l'actuel $location.url()si nécessaire. Pour fonctionner, ce nouveau devait tout inclure après le schéma, le domaine et le port. Donc, par exemple, si vous souhaitez passer à:

    http://yourdomain.com/YourAppFolder/YourAngularApp/#/YourArea/YourAction?culture=en

    alors vous devez définir l'URL comme dans:

    var destinationUrl = '/YourAppFolder/YourAngularApp/#/YourArea/YourAction?culture=en';

    (avec le leader '/'aussi).

  3. Attribuez une nouvelle URL de destination au bas niveau :$window.location.href = destinationUrl;

  4. Recharge forcée, toujours à bas niveau: $window.location.reload();


1
Cela ne fonctionne pas pour moi dans Angular 1.3.1 avec Chrome 38. La valeur de $ window.location.href ne change pas lorsque j'attribue un chemin ou une URL complète. Seul $ window.location.assign () a fonctionné pour moi.
FelixM

Ayant les mêmes problèmes que Felix, je l'ai résolu d'une manière différente stackoverflow.com/questions/31137809/…
Soroush Hakami

13

Après avoir recherché et donné une session d'essai et d'essai, je suis capable de le résoudre en spécifiant d'abord une URL comme

$window.location.href = '/#/home/stats';

puis recharger

$window.location.reload();

Cela semble résoudre le problème, mais cliquer en arrière et en avant sur le navigateur provoquera de nombreuses incohérences.
luisluix

9

J'ai eu le même problème. Lorsque j'utilise window.location, $window.locationou même <a href="..." target="_self">l'itinéraire ne rafraîchit pas la page. Ainsi, les services mis en cache sont utilisés, ce qui n'est pas ce que je souhaite dans mon application. Je l'ai résolu en ajoutant window.location.reload()après window.locationpour forcer la page à se recharger après le routage. Cette méthode semble cependant charger la page deux fois. Peut-être un sale tour, mais ça fait le travail Voici comment je l'ai maintenant:

  $scope.openPage = function (pageName) {
      window.location = '#/html/pages/' + pageName;
      window.location.reload();
  };

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.