emplacement $ / commutation entre html5 et hashbang mode / lien réécriture

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. Le 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="/about"/>about</a>'
                });
                $routeProvider.when('/about', {
                    template: 'this is about. go to <a href="/"/>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 à réécrire les Url moment où il rend les 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.

Voici la solution pour Angulaire de 1,6.

OriginalL'auteur laurelnaiad | 2013-05-21

angular-routing angularjs

358

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
- 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#!".

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="/">
  </head>
</html>
```
Dans ce mode, vous pouvez utiliser les liens sans le # fichiers HTML
```
<a href="/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 à false.

Configuration:
```
$provide.decorator('$sniffer', function($delegate) {
  $delegate.history = false;
  return $delegate;
});
$routeProvider
  .when('/path', {
    templateUrl: 'path.html',
  });
$locationProvider
  .html5Mode(true)
  .hashPrefix('!');
```
Ensemble de la base en HTML-fichier:
```
<html>
  <head>
    <base href="/">
  </head>
</html>
```
Dans ce cas, les liens peuvent aussi être écrit sans le hachage dans le fichier HTML
```
<a href="/path">link</a>
```
Lien dans le Navigateur:
```
http://www.example.com/index.html#!/base/path
```
Merci pour l'explication détaillée, @jupiter. Je vais regarder si je ne peux ignorer le bang et de garder le hachage et le truc Angulaire en ne nécessitant pas de deux ensembles d'Url en fonction de la mode!
Je pense que je n'ai pas bien compris votre problème. Pourquoi n'utilisez-vous pas juste les Url sans une table de hachage? Ils vont travailler dans les navigateurs supportant l'API de l'histoire, et que les navigateurs ne supportant pas l'histoire de l'API. AngularJS va mettre le n ° de version dans la barre d'adresse lorsque vous cliquez sur eux dans les navigateurs ne supportant pas l'API de l'histoire comme AngularJS intercepte les clics sur les liens.
Je suis en train de travailler sur un cadre en charge les deux modes. App les auteurs devraient être en mesure de choisir l'un ou l'autre sans se soucier de savoir si ou non il y a des hachages dans leurs modèles et/ou des changements dans l'interprétation des chemins relatifs. J'espère que votre truc pour qu'il soit vrai que "tout ce que vous faire est de changer le mode" (même si la solution la plus pratique est de "définir le mode html5 et puis mentir à angulaires sur les capacités du navigateur").
Je suis $provide est pas défini?
vous avez besoin d'injecter $dans votre config fonction lorsque vous êtes en train de configurer le décorateur.

OriginalL'auteur jupiter
7

Fourrure futurs lecteurs, si vous utilisez Angulaire de 1,6, vous devez également modifier le hashPrefix:
```
appModule.config(['$locationProvider', function($locationProvider) {
    $locationProvider.html5Mode(true);
    $locationProvider.hashPrefix('');
}]);
```
N'oubliez pas de mettre la base de votre HTML <head>:
```
<head>
    <base href="/">
    ...
</head>
```
Plus d'infos sur le changelog ici.

merci @Mistalis. votre réponse fonctionne bien. mais question quand j'ai actualiser la page après le routage, la page est introuvable erreurs se produit. merci de m'aider..
Bonjour Ashish. Je vous suggère de lire cette réponse, il peut résoudre votre problème. Bye! 🙂

OriginalL'auteur Mistalis
0

Ce qui m'a pris un certain temps à comprendre donc, c'est comment je l'ai eu à travailler Angulaire WebAPI ASP Routage sans le # SEO
1. ajouter à Index.html base href="/">
2. Ajouter $locationProvider.html5Mode(true); app.config
3. J'ai besoin d'une certaine contrôleur (qui était dans la maison de la manette) pour être ignoré pour télécharger des images, j'ai donc ajouté que la règle de RouteConfig
```
     routes.MapRoute(
        name: "Default2",
        url: "Home/{*.}",
        defaults: new { controller = "Home", action = "SaveImage" }
    );
```
4. Mondiale.asax ajouter les éléments suivants afin de vous assurer ignorer de l'api et de l'image des chemins télécharger les laisser comme d'habitude, sinon rediriger tout le reste.
```
 private const string ROOT_DOCUMENT = "/Index.html";

protected void Application_BeginRequest(Object sender, EventArgs e)
{
    var path = Request.Url.AbsolutePath;
    var isApi = path.StartsWith("/api", StringComparison.InvariantCultureIgnoreCase);
    var isImageUpload = path.StartsWith("/home", StringComparison.InvariantCultureIgnoreCase);

    if (isApi || isImageUpload)
        return;

    string url = Request.Url.LocalPath;
    if (!System.IO.File.Exists(Context.Server.MapPath(url)))
        Context.RewritePath(ROOT_DOCUMENT);
}
```
5. Assurez-vous d'utiliser $lieu.url('/XXX') et pas de fenêtre.emplacement ... pour rediriger
6. De référence, les fichiers CSS, avec chemin d'accès absolu
et pas
```
<link href="app/content/bootstrapwc.css" rel="stylesheet" />
```
Note finale - cette façon de faire m'a donné plein contrôle, et je n'ai pas besoin de faire quelque chose pour le web config.

Espère que cette aide, comme cela m'a pris un certain temps à comprendre.

OriginalL'auteur tfa
0

Je voulais être en mesure d'accéder à mon application avec le mode HTML5 et un jeton fixe et ensuite passer à l'hashbang méthode (pour garder le jeton de sorte que l'utilisateur peut actualiser sa page).

URL pour accéder à mon application:

http://myapp.com/amazing_url?token=super_token

Ensuite, lorsque l'utilisateur charge la page:

http://myapp.com/amazing_url?token=super_token#/amazing_url

Ensuite, lorsque l'utilisateur navigue:

http://myapp.com/amazing_url?token=super_token#/another_url

Avec ce que je garder le jeton dans l'URL et de les garder à l'état lorsque l'utilisateur est en train de naviguer. J'ai perdu un peu de visibilité de l'URL, mais il n'y a pas de meilleure façon de le faire.

Afin de ne pas activer le mode HTML5, puis ajouter ce contrôleur:
```
.config ($stateProvider)->
    $stateProvider.state('home-loading', {
         url: '/',
         controller: 'homeController'
    })
.controller 'homeController', ($state, $location)->
    if window.location.pathname != '/'
        $location.url(window.location.pathname+window.location.search).replace()
    else
        $state.go('home', {}, { location: 'replace' })
```
OriginalL'auteur Luc Boissaye

Vous devez vous connecter pour publier un commentaire.

Hashbang Mode

Mode HTML5

Hashbang en Mode HTML5