AngularJS utilisera le signe # pour acheminer les URL par défaut.
Par exemple :
http://exemple.com/
http://example.com/#/about
http://exemple.com/#/contact
Il est facile d'obtenir une URL propre et de supprimer le signe dièse de l'URL.
Complétez simplement deux choses.
$service de localisation
Dans Angular, le service $location résoudra l'URL dans la barre d'adresse et apportera des modifications à votre application, et vice versa.
Je recommande fortement de lire la documentation officielle d'Angular $location pour comprendre le service $location et les fonctionnalités qu'il fournit.
$locationProvider et html5Mode
Nous utiliserons le module $locationProvider et définirons html5Mode sur true.
Nous le ferons lorsque vous définirez votre application Angular et configurerez vos itinéraires.
angular.module('scotchy', []) .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 d'historique HTML5 ? Il s'agit d'un moyen standard de manipuler l'historique du navigateur à l'aide d'un script. Elle permet à Angular de modifier les itinéraires et les URL des pages sans actualiser la page. Plus d'informations ici. Il existe un très bon article sur l'API d'historique HTML5.
Définir
Afin d'utiliser des liens relatifs dans toute votre application, vous devrez définir un
<!doctype html> <html> <head> <meta charset="utf-8"> <base href="/"> </head>
Il existe de nombreuses façons de configurer cela, et définir HTML5Mode sur true résoudra automatiquement les liens relatifs. Cela fonctionne toujours pour moi si votre application est rootée sur la même URL, comme /my-base, alors utilisez. cela comme votre chemin de départ.
Rappels pour les anciens navigateurs
Le service $location rappellera automatiquement la méthode hashbang pour les navigateurs qui ne prennent pas en charge l'API d'historique de navigation HTML5.
Tout se passe de manière transparente et vous n’avez besoin de faire aucune configuration pour cela. À partir de la documentation Angular $location, vous pouvez voir la méthode de rappel et son fonctionnement.
Résumé
C'est un moyen simple d'obtenir de jolies URL et de supprimer les balises de hachage dans votre application Angular. Profitez d'applications Angular ultra-propres et ultra-rapides !