Heim > Artikel > Web-Frontend > So entfernen Sie das #-Zeichen in der URL unter AngularJS_AngularJS

So entfernen Sie das #-Zeichen in der URL unter AngularJS_AngularJS

WBOYOriginal: 2016-05-16 15:53:541021Durchsuche

AngularJS verwendet standardmäßig ein #-Zeichen zum Weiterleiten von URLs.

Zum Beispiel:

http://example.com/

http://example.com/#/about

http://example.com/#/contact

Es ist einfach, eine saubere URL zu erhalten und das Hash-Zeichen aus der URL zu entfernen.

Erledige einfach zwei Dinge.

$locationProvider konfigurieren
Legen Sie den Startpfad unserer relativen Verbindung fest

$Standortservice

In Angular löst der $location-Dienst die URL in der Adressleiste auf und nimmt Änderungen an Ihrer Anwendung vor und umgekehrt.

Ich empfehle dringend, die offizielle Angular $location-Dokumentation durchzulesen, um ein Verständnis für den $location-Dienst und die von ihm bereitgestellten Funktionen zu erhalten.

$locationProvider und html5Mode

Wir verwenden das Modul $locationProvider und setzen html5Mode auf true.

Wir werden dies tun, wenn Sie Ihre Angular-Anwendung definieren und Ihre Routen konfigurieren.

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

Was ist die HTML5-Verlaufs-API? Es ist eine Standardmethode zum Bearbeiten des Browserverlaufs mithilfe eines Skripts. Sie ermöglicht es Angular, Routen und Seiten-URLs zu ändern, ohne die Seite zu aktualisieren. Es gibt einen ziemlich guten Artikel über die HTML5-Verlaufs-API.

Setzen Sie 43210416ee42fba0d19b2164ce9e97d2 für relative Links

Um in Ihrer Bewerbung relative Links zu verwenden, müssen Sie im 53495576791aca4fd1a7d5b144a1d127

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

Es gibt unzählige Möglichkeiten, dies zu konfigurieren, und wenn Sie HTML5Mode auf true setzen, werden relative Links automatisch aufgelöst. Dies funktioniert bei mir immer. Wenn Ihre Anwendung unter derselben URL anders ist, z. B. /my-base, dann verwenden Sie Das ist Ihr Ausgangspunkt.

Rückrufe für alte Browser

Der $location-Dienst ruft automatisch die Hashbang-Methode für Browser zurück, die die HTML5-Browserverlaufs-API nicht unterstützen.

Alles passiert für Sie transparent und Sie müssen hierfür keine Konfiguration vornehmen. In der

Angular $location-Dokumentation können Sie die Callback-Methode und ihre Funktionsweise sehen.

2015619153430123.jpg (567×311)
Zusammenfassung

Dies ist eine einfache Möglichkeit, hübsche URLs zu erhalten und Hash-Tags in Ihrer Angular-App zu entfernen. Genießen Sie ultrasaubere, ultraschnelle Angular-Apps!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Einfache Möglichkeit, Optionsfelder und Kontrollkästchen mithilfe von AngularJS_AngularJS zu verwaltenNächster Artikel：Einfache Möglichkeit, Optionsfelder und Kontrollkästchen mithilfe von AngularJS_AngularJS zu verwalten

In Verbindung stehende Artikel

Mehr sehen