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

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

WBOY

Freigeben： 2016-05-16 15:53:54

Original

1051 Leute haben es durchsucht

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

Nach dem Login kopieren

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 für relative Links

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

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

Nach dem Login kopieren

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!