Angular – UI Router Routes – Mode HTML5

J'essaie d'utiliser les liens HTML5 push state avec mon application Angular. Ce que j'ai est une série d'itinéraires semblables à ceux qui suivent

$stateProvider.state('product', { url: '/product/:productCode', templateUrl: 'product/product.html', controller: 'ProductCtrl' } });

Cela fonctionne lorsque je navigue vers [host] / # / product / ABC123 – Il affiche l'url dans le navigateur comme / product / ABC123, alors quand je commence à cliquer sur mes autres itinéraires (en utilisant ui-sref), tout fonctionne comme prévu.

Cependant – j'aimerais pouvoir rafraîchir le navigateur et rester dans le même état, ainsi que pouvoir copier et coller ce lien et l'acheminer vers le bon état.

par exemple. Si je parviens à [host] / product / ABC123 – je souhaite afficher le contenu de la route # / product / ABC123. Actuellement, cela me donnera un non trouvé.

J'utilise nginx comme serveur d'application. Je crois que je devrai ajouter quelque chose pour le gérer à ce niveau, mais je ne sais pas par où commencer.

Le problème que vous avez est que votre serveur ne sait pas comment répondre /product/ABC123 .

Je suis en train d'utiliser node.js pour mon backend avec angular, et pour résoudre cela, je renvoie l'application angulaire pour toutes les routes, pas seulement l'itinéraire racine habituel, par exemple.

Donc, vous avez peut-être utilisé quelque chose comme ça dans le passé:

app.get('/', ...);

Ce qui aurait renvoyé l'application angulaire juste pour la route racine. Maintenant, j'utilise quelque chose comme:

app.get('*', ...);

Ce qui renverra l'application angulaire pour toutes les routes.

J'aurais dû mentionner que cela peut servir de capture tout placé après d'autres voies, comme pour les fichiers statiques. Une autre alternative est de marquer toutes les routes que vous souhaitez spécifiquement pour l'application angulaire, par exemple:

app.get('/', ...); app.get('/product/:productId', ...); etc