wake-up-neo.net

AngularJS-Routing ohne Hash '#'

Ich lerne AngularJS und es gibt eine Sache, die mich wirklich ärgert.

Ich benutze $routeProvider, um Routing-Regeln für meine Anwendung zu erklären:

$routeProvider.when('/test', {
  controller: TestCtrl,
  templateUrl: 'views/test.html'
})
.otherwise({ redirectTo: '/test' });

wenn ich jedoch im Browser zu meiner App navigiere, sehe ich app/#/test anstelle von app/test.

Meine Frage ist also, warum AngularJS diesen Hash # zu URLs hinzufügt? Gibt es eine Möglichkeit, dies zu vermeiden?

javascriptangularjs
214
pikkvile

In der Tat benötigen Sie das # (Hashtag) für Nicht-HTML5-Browser.

Andernfalls führen sie einfach einen HTTP-Aufruf an den Server unter der angegebenen Adresse href ..__ aus. # Ist eine alte Browserverknüpfung, die die Anforderung nicht auslöst, sodass viele js-Frameworks ihre eigene clientseitige Umleitung aufbauen können.

Sie können $locationProvider.html5Mode(true) verwenden, um die Verwendung der HTML5-Strategie anzuweisen, falls verfügbar.

Hier die Liste der Browser, die die HTML5-Strategie unterstützen: http://caniuse.com/#feat=history

256
plus-

Wenn Sie html5mode aktiviert haben, wie andere Benutzer es sagten, und eine .htaccess-Datei mit folgendem Inhalt erstellen (entsprechend Ihren Bedürfnissen anpassen):

RewriteEngine   On
RewriteBase     /
RewriteCond     %{REQUEST_URI} !^(/index\.php|/img|/js|/css|/robots\.txt|/favicon\.ico)
RewriteCond     %{REQUEST_FILENAME} !-f
RewriteCond     %{REQUEST_FILENAME} !-d
RewriteRule     ./index.html [L]

Benutzer werden zu Ihrer App weitergeleitet, wenn sie eine korrekte Route eingeben. Ihre App liest die Route und bringt sie auf die richtige "Seite".

BEARBEITEN: Stellen Sie nur sicher, dass keine Datei- oder Verzeichnisnamen mit Ihren Routen in Konflikt stehen.

45
bearfriend

Schreiben wir eine Antwort, die einfach und kurz aussieht

Fügen Sie am Ende des Routers html5Mode (true) hinzu.

app.config(function($routeProvider,$locationProvider) {

    $routeProvider.when('/home', {
        templateUrl:'/html/home.html'
    });

    $locationProvider.html5Mode(true);
})

In html head add base tag

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

danke an @plus - für die detaillierte Antwort

35
vijay

versuchen 

$locationProvider.html5Mode(true)

Weitere Informationen unter $ locationProvider
Verwendung von $ location

30
skeep

Die folgenden Informationen stammen von:
https://scotch.io/quick-tips/pretty-urls-in-angularjs-removing-the-hashtag

Es ist sehr einfach, saubere URLs abzurufen und den Hashtag von der URL in Angular zu entfernen.
Standardmäßig leitet AngularJS URLs mit einem Hashtag Beispiel:

Es gibt zwei Dinge, die getan werden müssen.

  • $ LocationProvider konfigurieren

  • Festlegen unserer Basis für relative Links

  • $ location Service

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

Ich würde dringend empfehlen, die offiziellen Angular $ -Ordendokumente durchzulesen, um ein Gefühl für den Ortungsdienst und dessen Angebot zu bekommen.

https://docs.angularjs.org/api/ng/service/$location

$ locationProvider und html5Mode

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

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

    angular.module('noHash', [])

.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-History-API? Es ist eine standardisierte Methode, um den Browserverlauf mithilfe eines Skripts zu bearbeiten. Dadurch kann Angular das Routing und die URLs unserer Seiten ändern, ohne die Seite zu aktualisieren. Weitere Informationen hierzu finden Sie hier: Einen guten HTML5-Verlaufs-API-Artikel:

http://diveintohtml5.info/history.html

Einstellung für relative Links

  • Um mit relativen Verknüpfungen eine Verknüpfung zu Ihrer Anwendung herzustellen, benötigen Sie __., um den <base> im <head> Ihres Dokuments festzulegen. Dies kann sich in der Datei __. Root index.html Ihrer Angular-App befinden. Suchen Sie das <base>-Tag und setzen Sie es auf die Stamm-URL, die Sie für Ihre App möchten.

Zum Beispiel: <base href="/">

  • Es gibt viele andere Möglichkeiten, dies zu konfigurieren, und der HTML5-Modus Auf true sollte relative Links automatisch auflösen. Wenn sich das Stammverzeichnis Ihrer Anwendung von der URL unterscheidet (beispielsweise /my-base ,, dann verwenden Sie diese als Basis.

Fallback für ältere Browser

  • Der $ location-Dienst führt für Browser, die die HTML5-Verlaufs-API nicht unterstützen, automatisch zur hashbang -Methode zurück.
  • Dies geschieht transparent für Sie und Sie müssen nichts konfigurieren, damit es funktioniert. In den Angular $ location docs sehen Sie Die Fallback-Methode und wie sie funktioniert.

Abschließend

  • Dies ist eine einfache Methode, um hübsche URLs abzurufen und den Hashtag in Ihrer Angular-Anwendung zu entfernen. Viel Spaß dabei, diese super sauber und super zu machenfast Angular Apps!
11
zero_cool

Wenn Sie dies lokal unter OS X 10.8 konfigurieren möchten, um Angular mit Apache zu bedienen, können Sie Folgendes in Ihrer .htaccess-Datei finden:

<IfModule mod_rewrite.c>
    Options +FollowSymlinks
    RewriteEngine On
    RewriteBase /~yourusername/appname/public/
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !.*\.(css|js|html|png|jpg|jpeg|gif|txt)
    RewriteRule (.*) index.html [L]
</IfModule>

Options + FollowSymlinks, falls nicht gesetzt, kann zu einem verbotenen Fehler in den Protokollen führen:

Options FollowSymLinks or SymLinksIfOwnerMatch is off which implies that RewriteRule directive is forbidden

Rewrite-Basis ist erforderlich. Andernfalls werden Anforderungen an Ihr Server-Stammverzeichnis aufgelöst, das standardmäßig nicht Ihr Projektverzeichnis ist, es sei denn, Sie haben Ihre vhosts speziell konfiguriert. Daher müssen Sie den Pfad so einstellen, dass die Anforderung Ihr Projekt-Stammverzeichnis findet. Zum Beispiel habe ich auf meinem Rechner ein Verzeichnis/Users/me/Sites, in dem alle meine Projekte gespeichert sind. Wie das alte OS X eingerichtet.

Die nächsten beiden Zeilen geben an, ob es sich bei dem Pfad nicht um ein Verzeichnis oder eine Datei handelt. Sie müssen also sicherstellen, dass keine Dateien oder Verzeichnisse vorhanden sind, die den Pfad der App-Route entsprechen.

Wenn die Anforderung nicht mit den angegebenen Dateierweiterungen endet, geben Sie an, was dort benötigt wird

Und das letzte [L] sagt, dass es die index.html-Datei liefern soll - Ihre App für alle anderen Anfragen.

Wenn Sie immer noch Probleme haben, überprüfen Sie das Apache-Protokoll. Hier finden Sie wahrscheinlich nützliche Hinweise:

/private/var/log/Apache2/error_log
3
Mister P

Wie in den obigen Antworten erwähnt, sind die Schritte

Fügen Sie <base href="/"> zu index.html hinzu
Aktivieren Sie html5mode $ location.html5Mode (true) in app.js.

Damit funktioniert die Anwendung gut. Aber nur in den Szenarien, wenn Sie von der index.html zu anderen Seiten navigieren. Zum Beispiel ist meine Basisseite www.javainuse.com. Wenn ich auf den Link Java klicke, navigiert er korrekt zu Www.javainuse.com/Java.

Wenn ich jedoch direkt auf www.javainuse.com/Java gehe, wird die Seite keinen Fehler gefunden.

Um dieses Problem zu beheben, müssen Sie die URL-Umschreibung verwenden Dot net erfordert das Umschreiben der URL für IIS.

Wenn Sie Tomcat verwenden, muss die URL-Umschreibung mithilfe von Tuckey durchgeführt werden Weitere Informationen zum Umschreiben von URLs erhalten hier

2
Rameez

Für den HTML5-Modus ist das Umschreiben der URL auf der Serverseite erforderlich. Grundsätzlich müssen Sie alle Links zum Einstiegspunkt Ihrer Anwendung (z. B. index.html) umschreiben. Das Anfordern eines <base>-Tags ist auch in diesem Fall wichtig, da AngularJS zwischen dem Teil der URL, der die Anwendungsbasis ist, und dem Pfad unterscheidet, der von der Anwendung verarbeitet werden soll. Weitere Informationen finden Sie unter AngularJS-Entwicklerhandbuch - Verwenden von $ location HTML5-Modus Serverseite .

Aktualisieren

Vorgehensweise: Konfigurieren Sie Ihren Server für die Arbeit mit html5Mode1

Wenn Sie html5Mode aktiviert haben, wird das Zeichen # nicht mehr in Ihren URLs verwendet. Das #-Symbol ist hilfreich, da keine serverseitige Konfiguration erforderlich ist. Ohne # sieht die URL viel schöner aus, erfordert aber auch serverseitige Umschreibungen. Hier sind einige Beispiele:

Apache schreibt um

<VirtualHost *:80>
    ServerName my-app

    DocumentRoot /path/to/app

    <Directory /path/to/app>
        RewriteEngine on

        # Don't rewrite files or directories
        RewriteCond %{REQUEST_FILENAME} -f [OR]
        RewriteCond %{REQUEST_FILENAME} -d
        RewriteRule ^ - [L]

        # Rewrite everything else to index.html to allow html5 state links
        RewriteRule ^ index.html [L]
    </Directory>
</VirtualHost>

Nginx Rewrites

server {
    server_name my-app;

    index index.html;

    root /path/to/app;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

Azure IIS schreibt um

<system.webServer>
  <rewrite>
    <rules> 
      <rule name="Main Rule" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

Express-Umschreibungen

var express = require('express');
var app = express();

app.use('/js', express.static(__dirname + '/js'));
app.use('/dist', express.static(__dirname + '/../dist'));
app.use('/css', express.static(__dirname + '/css'));
app.use('/partials', express.static(__dirname + '/partials'));

app.all('/*', function(req, res, next) {
    // Just send the index.html for other files to support HTML5Mode
    res.sendFile('index.html', { root: __dirname });
});

app.listen(3006); //the port you want to use
2
georgeawg

In Angular 6 können Sie mit Ihrem Router Folgendes verwenden:

RouterModule.forRoot(routes, { useHash: false })
1
Fase

**

Es wird empfohlen, den HTML 5-Stil (PathLocationStrategy) als .__ zu verwenden. Standortstrategie in Angular

**Weil

  1. Es werden saubere und SEO-freundliche URLs erstellt, die __. Nutzern leichter zu verstehen und zu merken sind.
  2. Sie können das serverseitige Rendering nutzen, durch das Unsere Anwendung schneller geladen wird, indem Sie die Seiten auf dem Server Zuerst rendern, bevor Sie sie dem Client bereitstellen.

Verwenden Sie Hashlocationstrtegy nur, wenn Sie das ältere .__ unterstützen müssen. Browser.

Klicken Sie hier, um mehr zu erfahren

0
Mahendra Waykos

Sie können auch den folgenden Code verwenden, um zur Hauptseite (Startseite) umzuleiten:

{ path: '', redirectTo: 'home', pathMatch: 'full'}

Nachdem Sie die Weiterleitung wie oben angegeben festgelegt haben, können Sie die anderen Seiten umleiten, zum Beispiel:

{ path: 'add-new-registration', component: AddNewRegistrationComponent},
{ path: 'view-registration', component: ViewRegistrationComponent},
{ path: 'home', component: HomeComponent}
0
Arash