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