179 votes

stu.salsbury avatar

$location / commutation entre les modes html5 et hashbang / lien de réécriture

Demandé el 21 de Mai, 2013
Quand la question a-t-elle été
48565 affichage
Nombre de visites la question a
2 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la question

J'étais sous l'impression que Angulaires de la réécrire les Url qui apparaissent dans href attributs de balises d'ancrage dans tempaltes, tels qu'ils fonctionnent qu'en mode html5 ou hashbang mode. La documentation pour le service de localisation semble dire que le Lien HTML de Réécriture prend soin de la hashbang situation. Je voudrais donc s'attendre à ce que lorsqu'il n'est pas en mode HTML5, hache serait inséré, et en mode HTML5, ils ne le seraient pas.

Cependant, il semble qu'aucun de réécriture. L'exemple suivant ne me permet pas de simplement changer le mode. Tous les liens dans l'application devrait être réécrit à la main (ou dérivée à partir d'une variable lors de l'exécution. Suis-je obligé de réécrire manuellement toutes les Url en fonction de la mode?

Je ne vois pas de client-côté de la réécriture d'url en cours dans Angulaire 1.0.6, 1.1.4 ou 1.1.3. Il semble que tous href valeurs doivent être précédées de #/ pour hashbang mode et les / pour le mode html5.

Est-il une configuration nécessaire à cause de réécriture? Suis-je une erreur de lecture de la documentation? Quelque chose d'aussi stupide?

Voici un petit exemple:

<head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.3/angular.js"></script>
</head>

<body>
    <div ng-view></div>
    <script>
        angular.module('sample', [])
            .config(
        ['$routeProvider', '$locationProvider',
            function ($routeProvider, $locationProvider) {

                //commenting out this line (switching to hashbang mode) breaks the app
                //-- unless # is added to the templates
                $locationProvider.html5Mode(true);

                $routeProvider.when('/', {
                    template: 'this is home. go to <a href="http://stackoverflow.com/about"/>about</a>'
                });
                $routeProvider.when('/about', {
                    template: 'this is about. go to <a href="http://stackoverflow.com/"/>home</a'
                });
            }
        ])
            .run();
    </script>
</body>

Addendum: en relisant ma question, je vois que j'ai utilisé le terme de "réécriture" sans une abondance de clarté et quand j'ai voulu faire de la réécriture. La question est de savoir comment tirer Angulaire de réécrire l'Url lorsqu'il rend des chemins et comment l'obtenir pour interpréter les chemins d'accès dans le code JS de façon uniforme à travers les deux modes. Il est pas sur la façon de provoquer un serveur web pour faire en HTML5 compatible avec la réécriture de requêtes.

Demandé el 21 de Mai, 2013 par stu.salsbury

Réponses

Trop de publicités?

359voto

jupiter avatar
jupiter Points 2236

La documentation n'est pas très clair sur AngularJS de routage. Il parle de Hashbang et en mode HTML5. En fait, AngularJS routage fonctionne en trois modes:

  • Hashbang Mode
  • En Mode HTML5
  • Hashbang en Mode HTML5

Pour chaque mode, il est un LocationUrl classe (LocationHashbangUrl, LocationUrl et LocationHashbangInHTML5Url).

Afin de simuler la réécriture d'URL, vous devez définir réellement html5mode de vrai et de décorer les $sniffer de la classe comme suit:

$provide.decorator('$sniffer', function($delegate) {
  $delegate.history = false;
  return $delegate;
});

Je vais maintenant vous expliquer cela plus en détail:

Hashbang Mode

Configuration:

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

C'est le cas lorsque vous avez besoin d'utiliser des Url avec des hachages dans vos fichiers HTML tels que dans

<a href="index.html#!/path">link</a>

Dans le Navigateur, vous devez utiliser le Lien suivant: http://www.example.com/base/index.html#!/base/path

Comme vous pouvez le voir dans le plus pur Hashbang mode de tous les liens dans les fichiers HTML doit commencer par la base "index.html#!".

En Mode HTML5

Configuration:

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

Vous devez définir la base de HTML dans les fichiers

<html>
  <head>
    <base href="http://stackoverflow.com/">
  </head>
</html>

Dans ce mode, vous pouvez utiliser les liens sans le # dans les fichiers HTML

<a href="http://stackoverflow.com/path">link</a>

Lien dans le Navigateur:

http://www.example.com/base/path

Hashbang en Mode HTML5

Ce mode est activé lorsque nous utilisons en fait en mode HTML5, mais dans un navigateur incompatible. Nous pouvons simuler ce mode dans un navigateur compatible par la décoration de la $sniffer de service et le réglage de l'histoire pour de faux.

Configuration:

$provide.decorator('$sniffer', function($delegate) {
  $delegate.history = false;
  return $delegate;
});
$routeProvider
  .when('/path', {
    templateUrl: 'path.html',
  });
$locationProvider
  .html5Mode(true)
  .hashPrefix('!');

Définir la base de HTML dans les fichiers:

<html>
  <head>
    <base href="http://stackoverflow.com/">
  </head>
</html>

Dans ce cas, les liens peuvent aussi être écrit sans le hachage dans le fichier HTML

<a href="http://stackoverflow.com/path">link</a>

Lien dans le Navigateur:

http://www.example.com/index.html#!/base/path
Répondu el 21 de Mai, 2013 par jupiter (2236 Points )

62voto

grant avatar
grant Points 858

Tout le monde a laissé que vous devrez également configurer votre serveur :

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

Répondu el 12 de Mars, 2014 par grant (858 Points )

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X