Comment supprimer le caractère # dans l'URL sous AngularJS

Comment supprimer le caractère # dans l'URL sous AngularJS_AngularJS

WBOY

Libérer： 2016-05-16 15:53:54

original

1027 Les gens l'ont consulté

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.

Configurer $locationProvider
Définir le chemin de départ de notre connexion relative

$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);
 });

Copier après la connexion

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 pour les liens relatifs

Afin d'utiliser des liens relatifs dans toute votre application, vous devrez définir un dans le de votre document.

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 
 <base href="/">
</head>

Copier après la connexion

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.

2015619153430123.jpg (567×311)
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 !