226 votes

Routage AngularJS sans le dièse '#' (en anglais)

Je suis en train d'apprendre AngularJS et il y a une chose qui m'agace vraiment.

J'utilise $routeProvider pour déclarer les règles de routage de mon application :

$routeProvider.when('/test', {
  controller: TestCtrl,
  templateUrl: 'views/test.html'
})
.otherwise({ redirectTo: '/test' });

mais lorsque je navigue vers mon application dans le navigateur, je vois app/#/test au lieu de app/test .

Ma question est donc de savoir pourquoi AngularJS ajoute ce hash # aux urls ? Est-il possible de l'éviter ?

268voto

plus- Points 9661

En fait, vous avez besoin du # (hashtag) pour les navigateurs non HTML5.

Sinon, ils effectueront simplement un appel HTTP au serveur à l'adresse mentionnée. Le # est un vieux raccourci du navigateur qui ne déclenche pas la requête, ce qui permet à de nombreux frameworks js de construire leur propre reroutage côté client.

Vous pouvez utiliser $locationProvider.html5Mode(true) pour indiquer à angular d'utiliser la stratégie HTML5 si elle est disponible.

Voici la liste des navigateurs qui supportent la stratégie HTML5 : http://caniuse.com/#feat=history

47voto

dg988 Points 1351

Si vous activez html5mode comme d'autres l'ont dit, et que vous créez un fichier .htaccess avec le contenu suivant (à adapter selon vos besoins) :

RewriteEngine   On
RewriteBase     /
RewriteCond     %{REQUEST_URI} !^(/index\.php|/img|/js|/css|/robots\.txt|/favicon\.ico)
RewriteCond     %{REQUEST_FILENAME} !-f
RewriteCond     %{REQUEST_FILENAME} !-d
RewriteRule     ./index.html [L]

Les utilisateurs seront dirigés vers votre application lorsqu'ils entreront un itinéraire approprié, et votre application lira l'itinéraire et les amènera à la bonne "page" à l'intérieur de celui-ci.

EDIT : Veillez à ce qu'aucun nom de fichier ou de répertoire n'entre en conflit avec vos itinéraires.

39voto

vijay Points 3460

Rédigeons une réponse qui semble simple et courte

Dans Router, à la fin, ajouter html5Mode(true) ;

app.config(function($routeProvider,$locationProvider) {

    $routeProvider.when('/home', {
        templateUrl:'/html/home.html'
    });

    $locationProvider.html5Mode(true);
})

Dans l'en-tête html, ajoutez base étiquette

<html>
<head>
    <meta charset="utf-8">    
    <base href="http://stackoverflow.com/">
</head>

Remerciements @plus - pour détailler la réponse ci-dessus

30voto

skeep Points 512

Essayer

$locationProvider.html5Mode(true)

Plus d'informations à l'adresse suivante fournisseur d'emplacement (locationProvider)
Utilisation de $location

12voto

Jackson_Sandland Points 159

Les informations suivantes proviennent de :
https://scotch.io/quick-tips/pretty-urls-in-angularjs-removing-the-hashtag

Il est très facile d'obtenir des URL propres et de supprimer le hashtag de l'URL dans Angular.
Par défaut, AngularJS achemine les URLs contenant un hashtag Par exemple :

Il y a deux choses à faire.

  • Configuration de $locationProvider

  • Définir notre base pour les liens relatifs

  • Service de localisation

Dans Angular, le service $location analyse l'URL dans la barre d'adresse et apporte des modifications à votre application et vice versa.

Je vous recommande vivement de lire la documentation officielle d'Angular sur $location pour vous faire une idée du service de localisation et de ce qu'il fournit.

https://docs.angularjs.org/api/ng/service/$location

$locationProvider et html5Mode

  • Nous utiliserons le module $locationProvider et fixerons la valeur html5Mode à true.
  • Nous le ferons lors de la définition de votre application Angular et de l'application configurer vos routes.

    angular.module('noHash', [])
    
    .config(function($routeProvider, $locationProvider) {
    
       $routeProvider
           .when('/', {
               templateUrl : 'partials/home.html',
               controller : mainController
           })
           .when('/about', {
               templateUrl : 'partials/about.html',
               controller : mainController
           })
           .when('/contact', {
               templateUrl : 'partials/contact.html',
               controller : mainController
           });
    
       // use the HTML5 History API
       $locationProvider.html5Mode(true); });

Qu'est-ce que l'API HTML5 History ? Il s'agit d'un moyen normalisé de manipuler l'historique du navigateur à l'aide d'un script. Cela permet à Angular de modifier le routage et les URL de nos pages sans rafraîchir la page. Pour plus d'informations à ce sujet, voici un bon article sur l'API HTML5 History :

http://diveintohtml5.info/history.html

Paramètres pour les liens relatifs

  • Pour créer des liens autour de votre application à l'aide de liens relatifs, vous devez de définir l'attribut <base> dans le <head> de votre document. Il peut s'agir de l'élément Fichier racine index.html de votre application Angular. Trouvez le fichier <base> et et donnez-lui l'URL racine que vous souhaitez pour votre application.

Par exemple : <base href="http://stackoverflow.com/">

  • Il existe de nombreuses autres façons de configurer cela, et le mode HTML5 réglé sur true devrait automatiquement résoudre les liens relatifs. Si la racine de votre application est différente de l'url (par exemple /my-base, alors utilisez-la comme base.

Solution de repli pour les navigateurs plus anciens

  • Le service $location reviendra automatiquement au hashbang pour les navigateurs qui ne prennent pas en charge l'API HTML5 History.
  • Cela se fait de manière transparente pour vous et vous n'aurez pas à configurer le système. rien pour que cela fonctionne. Dans la documentation Angular $location, vous pouvez voir la méthode de repli et son fonctionnement.

En conclusion

  • Il s'agit d'un moyen simple d'obtenir de jolies URL et de supprimer le hashtag en votre application Angular. Amusez-vous à créer ces applications super propres et super rapides !

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:

X