AngularJS: comment activer $ locationProvider.html5Mode avec deeplinking

Lorsque vous activez le html5Mode dans AngularJS via $locationProvider.html5Mode(true) , la navigation semble être faussée lorsque vous arrivez plus profondément sur une page du site.

par exemple:

  • http://www.site.com
    Lorsque je navigue vers la racine, je peux cliquer sur tous les liens du site, $routeProvider Angular prendra la navigation sur le site et chargera les vues correctes.

  • http://www.site.com/news/archive
    mais quand je navigue vers cette url (ou que je me rafraîchit lorsque je suis sur un deeplink comme ci-dessus …), cette navigation ne fonctionne pas comme prévu. Tout d’abord, comme le spécifie la documentation de $ locationProvider.html5Mode , nous capturons toutes les URL du serveur, de la même otherwise route par otherwise , et retournons le même code HTML que le domaine racine. Mais si je vérifie ensuite l’object $location partir de la fonction d’ run de angular, cela me dit que http://www.site.com est mon host et que /archive est mon path . le $routeProvider arrive dans la clause .otherwise() , car je n’ai que /news/archive comme route valide. et l’application fait des trucs bizarres.

Peut-être que la réécriture sur le serveur doit être faite différemment, ou je dois spécifier des choses angulars, mais je ne sais pas pourquoi angular see est le chemin sans le segment /news inclus.

exemple main.js:

 // Create an application module var App = angular.module('App', []); App.config(['$routeProvider', '$locationProvider', function AppConfig($routeProvider, $locationProvider) { $routeProvider .when( '/', { redirectTo: '/home' }) .when('/home', { templateUrl: 'templates/home.html' }) .when('/login', { templateUrl: 'templates/login.html' }) .when('/news', { templateUrl: 'templates/news.html' }) .when('/news/archive', { templateUrl: 'templates/newsarchive.html' }) // removed other routes ... *snip .otherwise({ redirectTo: '/home' } ); // enable html5Mode for pushstate ('#'-less URLs) $locationProvider.html5Mode(true); $locationProvider.hashPrefix('!'); }]); // Initialize the application App.run(['$location', function AppRun($location) { debugger; // -->> here i debug the $location object to see what angular see's as URL }]); 

Modifier selon la demande, plus de détails côté serveur: le côté serveur est organisé par le routage du framework Zend, et il gère ses propres routes (pour servir des données sur le frontend sur des URL spécifiques /api , et à la fin, il y a une route fourre-tout si aucune autre route spécifique n’est liée, elle sert le même code html que la route racine, elle sert donc essentiellement le HTML de la page d’accueil sur cette route de liaison.

Mise à jour 2 après avoir examiné le problème, nous avons remarqué que le routage fonctionne correctement tel quel, sur Angular 1.0.7 stable, mais montre le comportement décrit ci-dessus dans l’instable Angular 1.1.5.

J’ai vérifié les logs de changements mais je n’ai rien trouvé d’utile jusqu’ici, je suppose que nous pouvons soit le soumettre en tant que bogue, soit tout comportement indésirable lié à un changement particulier qu’ils ont fait, ou simplement attendre qu’il soit corrigé. la version stable à publier ultérieurement.

Découvert qu’il n’y a pas de bug là-bas. Ajoutez simplement:

  

à votre .

C’était la meilleure solution que j’ai trouvée après plus de temps que je ne le souhaite. Fondamentalement, ajoutez target = “_ self” à chaque lien dont vous avez besoin pour assurer un rechargement de page.

http://blog.panjiesw.com/posts/2013/09/angularjs-normal-links-with-html5mode/

Ce problème était dû à l’utilisation d’AngularJS 1.1.5 (qui était instable, et comportait évidemment un bogue ou une implémentation différente du routage par rapport à la version 1.0.7)

revenir à 1.0.7 a résolu le problème instantanément.

J’ai essayé la version 1.2.0rc1, mais je n’ai pas terminé les tests car je devais réécrire certaines fonctionnalités du routeur depuis leur sortie du kernel.

de toute façon, ce problème est résolu lors de l’utilisation d’AngularJS vs 1.0.7.

  1. Configurer AngularJS

$ location / switching entre html5 et le mode hashbang / réécriture de lien

  1. Configurez votre serveur:

https://github.com/angular-ui/ui-router/wiki/Fre fréquemment-Asked-Questions#wiki-how-to-configure-your-server-to-work-with-html5mode

Mon problème résolu avec ceux-ci:

1- Ajoutez ceci à votre tête:

  

2- Utilisez ceci dans app.config

 $locationProvider.html5Mode(true);