Le rechargement de page échoue lors de l'utilisation du routeur UI angulaire avec le mode Html5 activé
Je suis Angulaire à l'aide de l'INTERFACE utilisateur du Routeur dans mon angulaire de l'application et je l'ai activé en mode HTML5 pour supprimer le # forme de l'URL à l'aide de $locationProvider dans la config.
var app = angular.module('openIDC', ['ui.router']);
app.config(function($urlRouterProvider, $stateProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'views/home.html',
controller: 'HomeController'
})
.state('login', {
url: '/login',
templateUrl: 'views/login.html',
controller: 'LoginController'
})
});
J'ai aussi mis le <base href="/" />
dans la balise index.html fichier ainsi. Le routage fonctionne très bien et je peux accéder à des pages et le n ° est supprimée, mais lorsque j'actualise la page en utilisant le bouton de réinitialisation sur le navigateur il n'y est une réponse d'erreur 404.
Pourquoi est-ce qui se passe et comment puis-je résoudre ce problème et ont HTML5 mode permet d'avoir une bonne Url
source d'informationauteur Kasun Kodagoda
Vous devez vous connecter pour publier un commentaire.
Kasun, la raison pour laquelle cela se produit est parce que vous essayez de rafraîchir la page à partir de l'un de vos sous routes (qui n'a rien à voir avec ui-router).
Fondamentalement, si vous demandez
www.yourdomain.com/
vous avez probablement la configuration de votre serveur pour revenirindex.html
qui amorce angulaire de votre application. Une fois l'application chargée, toute autre url changementshtml5Mode
en considération et mise à jour de votre page via l'interface utilisateur du routeur.Lorsque vous rechargez votre page angulaire application n'est plus valide car il n'a pas encore chargé, donc si vous essayez de charger un sous itinéraire (par exemple:
www.yourdomain.com/someotherpage
), votre serveur ne sait pas comment traiter avec/someotherpage
et les rendements probables404
ou une autre erreur.Ce que vous devez faire est de configurer votre serveur pour retourner votre angulaire application pour tous routes. J'ai d'abord utiliser node/express, donc je fais quelque chose comme:
Remarque: j'ai l'habitude d'utiliser quelque chose comme cela comme une prise finale de tous, cependant j'ai aussi inclure d'autres voies au-dessus d'elle pour des choses comme demandant des fichiers statiques, des moteurs de recherche, et tous les autres itinéraires spécifiques qui doivent être traitées.
Dont vous avez besoin pour l'installation de réécriture d'url sur le serveur côté
pour apache il serait quelque chose comme:
dans
.htaccess
fichier(assurez-vous quemod_rewrite
module apache est activé)et config comme ceci pour nginx:
d'abord faire .fichier htaccess puis copiez passé ces code
Remarqué un commentaire demandant au sujet de IIS ne l'a pas vu ici encore - mais c'est de cette façon que j'ai la mienne de travail. Assurez-vous d'avoir de Réécriture d'URL 2.0 est installé.
Cant expliquer en détails pourquoi ce qui se passe mais je peux vous décrire d'une façon que j'ai résolu ce problème. J'ai donc utilisé UrlRewriterFilter pour mon spring mvc backend. Angulaire module général config :
Ma page d'accueil, index.html:
C'est frontend. Pour le backend, j'ai utilisé UrlRewriteFilter, vous pouvez l'obtenir avec maven dependency:
Je l'ai ajouté à mon spring mvc WebAppInitializer dans la manière suivante:
Ce filtre nécessite urlrewrite.xml fichier sous ur répertoire WEB-INF(on dirait que configurables mais place par défaut ici). Le contenu de ce fichier:
Je n'ai pas lu attentivement les manuels mais je pense que l'idée est lorsque vous actualisez ur navigateur avec http://yourhost:xxxx/privateroom ur app essayez de trouver votre possession vue existante http://yourhost:xxxx/privateroom. Mais son absence. Et quand vous rediriger vers d'ur en page de base angulaire serait construit lien vers fichier physique à l'aide de ses états de définition. Je peux erreur dans la théorie, mais cela fonctionne dans la pratique
Si vous ne pouvez pas configurer votre serveur, configurer votre web.xml avec les opérations suivantes pour gérer l'actualisation alors que l'utilisateur est sur un html5 pousser chemin.
le moyen le plus facile a fonctionné pour moi est:
utilisation
<base href="/admin/"></base>
dans index.htmlJe suis en train de faire pour ma page admin