Mode de AngularJS HTML5 recharger la page donne mauvaise requête GET

Question

Je veux l'activer en mode HTML5 pour mon application. J'ai mis le code suivant pour la configuration, comme indiqué ici:

return app.config(['$routeProvider','$locationProvider', function($routeProvider,$locationProvider) {

    $locationProvider.html5Mode(true);
    $locationProvider.hashPrefix = '!';

    $routeProvider.when('/', {
        templateUrl: '/views/index.html',
        controller: 'indexCtrl'
    });
    $routeProvider.when('/about',{
        templateUrl: '/views/about.html',
        controller: 'AboutCtrl'
    });

Comme vous pouvez le voir, j'ai utilisé la somme de locationProvider.html5mode et j'ai changé tous mes liens à la ng-ref exclure la /#/.

Le Problème

Au moment où je peux aller à localhost:9000/ et consultez la page d'index et de naviguer sur les autres pages comme localhost:9000/about.

Toutefois, le problème se produit lorsque j'actualise le localhost:9000/a propos de la page. J'obtiens le résultat suivant: Cannot GET /about

Si je regarde le réseau appelle:

Request URL:localhost:9000/about
Request Method:GET

Alors que si j'ai d'abord aller à localhost:9000/ et puis cliquez sur un bouton permettant d'accéder à /à propos-je obtenir:

Request URL:http://localhost:9000/views/about.html

Ce qui rend la page parfaitement.

Comment puis-je activer angulaire pour obtenir la bonne page quand je refresh?

Je vous remercie à l'avance.

Answer 1

À partir du angulaire docs

Côté serveur
L'utilisation de ce mode nécessite la réécriture d'URL sur le côté serveur, fondamentalement, vous avez de réécriture de tous vos liens vers le point d'entrée de votre application (par ex. index.html)

La raison pour cela est que lorsque vous visitez d'abord la page (/), par exemple, après un rafraîchissement, le navigateur n'a aucun moyen de savoir que ce n'est pas une url réelle, donc il va de l'avant et de charges. Toutefois, si vous avez chargé la page racine première, et tout le code javascript, puis lorsque vous naviguez vers /sur angulaire peut y aller avant que le navigateur tente de frapper le serveur et de les traiter en conséquence

Answer 2

Il y a peu de choses à mettre en place pour votre lien dans le navigateur va ressembler http://yourdomain.com/path et ce sont vos angulaire config + côté serveur

1) AngularJS

$routeProvider
  .when('/path', {
    templateUrl: 'path.html',
  });
$locationProvider
  .html5Mode(true);

2) côté serveur, juste de mettre des .htaccess à l'intérieur de la racine de votre dossier et collez cette

RewriteEngine On 
Options FollowSymLinks

RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /#/$1 [L]

Des choses plus intéressantes à lire sur html5 mode d'angularjs et de la configuration requise par les différentes environnement https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode Aussi cette question pourrait vous aider à $emplacement / commutation entre html5 et hashbang mode / lien réécriture

Answer 3

J'ai eu un problème similaire et je l'ai résolu en:

• À l'aide de <base href="http://stackoverflow.com/index.html"> dans la page d'index

• En utilisant un fourre-tout de l'itinéraire middleware dans mon node/Express serveur comme suit (le mettre après le routeur):

app.use(function(req, res) {
    res.sendfile(__dirname + '/Public/index.html');
});

Je pense que cela devrait le faire fonctionner.

Si vous utilisez un serveur apache, vous pouvez mod_rewrite vos liens. Il n'est pas difficile à faire. Quelques modifications dans les fichiers de configuration.

Tout ce qui est en supposant que vous avez html5mode activé sur angularjs. Maintenant. notez que dans angulaire 1.2, la déclaration d'une url de base est recommandé de ne pas plus en fait.

Answer 4

Vous devez configurer votre serveur pour réécrire tout à index.html pour charger l’application :

https://github.com/Angular-UI/UI-Router/wiki/Frequently-asked-questions#wiki-How-to-Configure-Your-Server-to-work-with-html5mode

Answer 5

J’ai écrit un simple connect middleware pour simuler la réécriture d’url sur les projets de grognement. https://GIST.github.com/muratcorlu/5803655

Vous pouvez utiliser comme ça :