recherche

Maison  >  Article  >  interface Web  >  Comment supprimer le caractère # dans l'URL sous AngularJS_AngularJS

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

WBOY
WBOYoriginal
2016-05-16 15:53:541052parcourir

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.

  1. Configurer $locationProvider
  2. 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);
 });

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

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

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

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 !

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Un moyen simple de gérer les boutons radio et les cases à cocher à l'aide d'AngularJS_AngularJSArticle suivant：Un moyen simple de gérer les boutons radio et les cases à cocher à l'aide d'AngularJS_AngularJS

Articles Liés

Voir plus