it-swarm.com.de

Fragmentkennung aus AngularJS-URLs entfernen (# -Zeichen)

Ist es möglich, das # -Symbol aus den URLs von angle.js zu entfernen?

Ich möchte immer noch in der Lage sein, die Zurück-Schaltfläche des Browsers usw. zu verwenden, wenn ich die Ansicht ändere, und die URL mit Params aktualisieren, das # -Symbol jedoch nicht.

Das Tutorial routeProvider wird wie folgt deklariert:

angular.module('phonecat', []).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider.
  when('/phones', {templateUrl: 'partials/phone-list.html',   controller: PhoneListCtrl}).
  when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
  otherwise({redirectTo: '/phones'});
}]);

Kann ich diese bearbeiten, um die gleiche Funktionalität ohne # zu haben?

248
Tim Webster

Ja, Sie sollten $locationProvider konfigurieren und html5Mode auf true setzen:

angular.module('phonecat', []).
  config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {

    $routeProvider.
      when('/phones', {templateUrl: 'partials/phone-list.html',   controller: PhoneListCtrl}).
      when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
      otherwise({redirectTo: '/phones'});

    $locationProvider.html5Mode(true);

  }]);
246
Maxim Grach

Überprüfen Sie die Browserunterstützung für die html5-Verlaufs-API:

  if(window.history && window.history.pushState){
    $locationProvider.html5Mode(true);
  }
55
SSaidi

Um das Hash-Tag für eine pretty-URL zu entfernen und Ihren Code nach der Minifizierung auszuführen, müssen Sie Ihren Code wie im folgenden Beispiel strukturieren:

jobApp.config(['$routeProvider','$locationProvider',
    function($routeProvider, $locationProvider) {
        $routeProvider.
            when('/', {
                templateUrl: 'views/job-list.html',
                controller: 'JobListController'
            }).
            when('/menus', {
                templateUrl: 'views/job-list.html',
                controller: 'JobListController'
            }).
            when('/menus/:id', {
                templateUrl: 'views/job-detail.html',
                controller: 'JobDetailController'
            });

         //you can include a fallback by  including .otherwise({
          //redirectTo: '/jobs'
        //});


        //check browser support
        if(window.history && window.history.pushState){
            //$locationProvider.html5Mode(true); will cause an error $location in HTML5 mode requires a  tag to be present! Unless you set baseUrl tag after head tag like so: <head> <base href="/">

         // to know more about setting base URL visit: https://docs.angularjs.org/error/$location/nobase

         // if you don't wish to set base URL then use this
         $locationProvider.html5Mode({
                 enabled: true,
                 requireBase: false
          });
        }
    }]);
45
Digitlimit

Ich schreibe eine Regel in web.config aus, nachdem $locationProvider.html5Mode(true) in app.js eingestellt ist. 

Hoffnung, hilft jemandem.

  <system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>

In meiner index.html habe ich dies zu <head> hinzugefügt.

<base href="/">

Vergessen Sie nicht, url rewriter für iis auf dem Server zu installieren.

Wenn Sie Web Api und IIS verwenden, wird diese Übereinstimmungs-URL nicht funktionieren, da dies Ihre API-Aufrufe ändert. Fügen Sie also die dritte Eingabe hinzu (dritte Zeile der Bedingung) und geben Sie ein Muster aus, das Aufrufe von www.yourdomain.com/api ausschließt.

18
Yagiz Ozturk

Wenn Sie sich in einem .NET-Stack mit MVC mit AngularJS befinden, müssen Sie Folgendes tun, um das '#' von der URL zu entfernen: 

  1. Richten Sie Ihre Basis-Href auf Ihrer _Layout-Seite ein: <head> <base href="/"> </head>

  2. Fügen Sie dann in Ihrer Winkel-App-Konfiguration Folgendes hinzu: $locationProvider.html5Mode(true)

  3. Oben wird '#' von der URL entfernt, aber die Seitenaktualisierung funktioniert nicht, z. Wenn Sie sich auf der "yoursite.com/about" -Seite befinden, gibt Ihnen refreash eine 404. Dies liegt daran, dass MVC kein Winkelrouting kennt und anhand des MVC-Musters nach einer MVC-Seite nach "about" sucht, die in MVC nicht vorhanden ist Routing-Pfad. Umgehung hierfür ist das Senden aller MVC-Seitenanfragen an eine einzige MVC-Ansicht. Sie können dies tun, indem Sie eine Route hinzufügen, die alle abfängt 

uRL: 

routes.MapRoute(
    name: "App",
    url: "{*url}",
    defaults: new {
        controller = "Home", action = "Index"
    }
);
9
Maksood

Sie können den html5mode anpassen, dies funktioniert jedoch nur für Links, die in HTML-Ankern Ihrer Seite enthalten sind und wie die URL in der Adressleiste des Browsers aussieht. Der Versuch, eine Unterseite ohne den Hashtag (mit oder ohne html5mode) von außerhalb der Seite anzufordern, führt zu einem 404-Fehler. Die folgende CURL-Anforderung führt beispielsweise zu einem Fehler, der unabhängig von html5mode nicht gefunden wurde:

$ curl http://foo.bar/phones

obwohl das Folgende die root/Homepage zurückgibt:

$ curl http://foo.bar/#/phones

Der Grund dafür ist, dass alles nach dem Hashtag entfernt wird, bevor die Anforderung beim Server eingeht. Eine Anfrage für http://foo.bar/#/portfolio kommt also als Anforderung für http://foo.bar beim Server an. Der Server antwortet (wahrscheinlich) mit einer Antwort auf 200 OK für http://foo.bar und der Agent/Client wird den Rest verarbeiten. 

Wenn Sie also eine URL mit anderen teilen möchten, haben Sie keine andere Möglichkeit, als den Hashtag einzuschließen. 

5
chris

Befolgen Sie 2 Schritte
1. Stellen Sie zuerst die $ locationProvider.html5Mode (true) in Ihrer App-Konfigurationsdatei.
Zum Beispiel -
angular.module('test', ['ui.router']) .config(function($stateProvider, $urlRouterProvider, $locationProvider) { $locationProvider.html5Mode(true); $urlRouterProvider.otherwise('/'); });

2.Zweites Einstellen der <base> in Ihrer Hauptseite.
Zum Beispiel ->
<base href="/">

Der $ location-Dienst greift automatisch auf die Hash-Part-Methode für Browser zurück, die die HTML5-Verlaufs-API nicht unterstützen.

5
Anshul Bisht

Meine Lösung ist .htaccess erstellen und #Sorian-Code verwenden. Ohne .htaccess konnte ich # nicht entfernen.

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]
3
Thomas Knápek

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

Fügen Sie 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 wir das Umschreiben von URLs verwenden. Dot net erfordert das Umschreiben von URLs für IIS.

Wenn Sie Tomcat verwenden, müssen Sie das URL-Umschreiben mit Tuckey durchführen. Weitere Informationen zum Umschreiben von URLs erhalten hier

3
Rameez

Ich denke, das ist wirklich zu spät. Das Hinzufügen der folgenden Konfiguration zu den Importen von app.module erledigt jedoch die Aufgabe:

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

Starten Sie von index.html und entfernen Sie alle # von <a href="#/aboutus">About Us</a>. Es muss also im Kopf-Tag von index.html write <a href="/aboutus">About Us</a> unmittelbar nach dem letzten meta-Tag<base href="/">.Now aussehen.

Jetzt in Ihr Routing js injizieren Sie $locationProvider und schreiben Sie $locatonProvider.html5Mode(true); Etwas wie dieses: -

app.config(function ($routeProvider, $locationProvider) {
    $routeProvider
        .when("/home", {
            templateUrl: "Templates/home.html",
            controller: "homeController"
        })
            .when("/aboutus",{templateUrl:"Templates/aboutus.html"})
            .when("/courses", {
                templateUrl: "Templates/courses.html",
                controller: "coursesController"
            })
            .when("/students", {
                templateUrl: "Templates/students.html",
                controller: "studentsController"
            })
        $locationProvider.html5Mode(true);
    });

Weitere Informationen finden Sie in diesem Video https://www.youtube.com/watch?v=XsRugDQaGOo

1
Aniket Jha

Diese Antwort setzt voraus, dass Sie Nginx als Reverse Proxy verwenden und $ locationProvider.html5mode bereits auf true festgelegt haben.

-> Für die Leute, die noch immer mit all dem coolen Zeug zu kämpfen haben.

Sicherlich funktioniert die @maxim grach-Lösung gut, aber für die Lösung, wie auf Anfragen reagiert werden soll, die den Hashtag nicht in erster Linie enthalten sollen, können Sie überprüfen, ob PHP 404 sendet und dann die URL neu schreiben. Im Folgenden ist der Code für Nginx,

Erkennen Sie am PHP-Standort den 404-PHP-Fehler und leiten Sie ihn an einen anderen Ort um. 

location ~ \.php${
  ...
  fastcgi_intercept_errors on;
  error_page 404 = /redirect/$request_uri ;
}

Dann schreiben Sie die URL erneut an den Ort der Weiterleitung und proxy_pass die Daten. Offcourse, setzen Sie Ihre Website-URL an die Stelle der URL meines Blogs. (Anfrage: Frage dies erst, nachdem Sie es versucht haben)

location /redirect {
  rewrite ^/redirect/(.*) /$1;
  proxy_pass http://www.techromance.com;
}

Und sieh die Magie.

Und es funktioniert definitiv, zumindest für mich.

1
Satys

Nach der Dokumentation. Sie können verwenden:

$locationProvider.html5Mode(true).hashPrefix('!');

Hinweis: Wenn Ihr Browser HTML 5 nicht unterstützt, machen Sie sich keine Sorgen: D haben Rückfall in den Hashbang-Modus. Sie müssen also nicht manuell mit if(window.history && window.history.pushState){ ... } überprüfen

Zum Beispiel: Wenn Sie klicken: <a href="/other">Some URL</a> 

Im HTML5-Browser : Wird automatisch zu example.com/other umgeleitet.

Im Nicht-HTML5-Browser : Wird automatisch auf example.com/#!/other umgeleitet.

1

Schritt 1: Fügen Sie den $ locationProvider-Dienst in den Konstruktor der App-Konfiguration ein

Schritt 2: Fügen Sie die Codezeile $ locationProvider.html5Mode (true) zum Konstruktor der App-Konfiguration hinzu.

Schritt 3: Fügen Sie auf der Containerseite (Landing, Master oder Layout) ein HTML-Tag wie <base href="/"> in das Tag ein.

Schritt 4: Entfernen Sie alle '# "für das Routing config von allen Ankertags. Für Beispiele wird href =" # home "zu href =" home "; href =" # about "wird herf =" about "; href =" # contact "wird zu href =" Kontakt "

 <ul class="nav navbar-nav">
     <li><a href="home">Home</a></li>
     <li><a href="about">About us</a></li>
     <li><a href="contact">Contact us</a></li>
</ul>
0
Thomas.Benz