So löschen Sie '#' Zeichen in Angular-UI-Router-URLs

80

Ich verwende die Angular-UI-Router-Bibliothek und habe ein Problem mit URLs.

Ich habe folgenden Code:

app.js:

app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
    .state('state', {
        url: '/state',
        templateUrl: 'templates/state.html',
        onEnter: function () {
            /*... code ...*/
        }
    })});

index.html:

<a href="#/state">STATE</a>

Dies funktioniert, aber wenn ich '#' aus dem <a>Tag entferne, funktioniert dies nicht.

Wie kann ich das '#' Zeichen von der URL löschen?

javascript angularjs angular-ui-router Niezborala
quelle
2
Ich denke, Sie müssen den HTML5-Modus verwenden, andernfalls ist die Verwendung des Hash für Routen erforderlich
Ian
html5mode = true oder html5mode = false
Ivan Bacher

Antworten:

119

Sie müssen HTML5Mode aktivieren, wenn Sie ohne Hash-Tags navigieren möchten:

app.config(["$locationProvider", function($locationProvider) {
  $locationProvider.html5Mode(true);
}]);

Sie müssen auch die Stamm-URL Ihrer App im Winkel angeben, indem <head>Sie der HTML-Datei den folgenden Code hinzufügen :

<base href="/">

Beachten Sie, dass die Unterstützung des HTML5-Modus vom Browser abhängt. Für diejenigen, die die Verlaufs- API nicht unterstützen , greift Angular auf Hashbang zurück .

Simon Belanger
quelle
5
Und ich habe noch eine Frage. Wenn ich die URL www.example.com/state einfüge, habe ich keine Seite mit dem erwarteten Inhalt. Kann ich damit etwas machen?
Niezborala
1
Das hängt von Ihrem Server ab. Sie müssen dieselbe Ansicht wie im eckigen App-Stamm anzeigen. AngularJs ist intelligent genug, um die URL zu überprüfen und die entsprechende Ansicht / Steuerung anzuzeigen. Wenn Sie beispielsweise normalerweise von / angle aus zu Ihrer App wechseln, müssen Sie den Fall behandeln, in dem das Wechseln zu / angle / state nicht einer echten URL zugeordnet ist, sondern tatsächlich eine Route in / angle ist und dieselbe anzeigt Aussicht.
Simon Belanger
37
Vergessen Sie auch nicht, ein <base href="https://stackoverflow.com/">Tag in den <head>Abschnitt index.html zu setzen
Saqueib
8
Oder Sie können $ locationProvider so konfigurieren, dass kein Basis-Tag erforderlich ist, indem Sie ein Definitionsobjekt mit requireBase: false an $ locationProvider.html5Mode () übergeben: $ locationProvider.html5Mode ({enabled: true, requireBase: false}); Siehe: docs.angularjs.org/error/$location/nobase
sigmapi13
@SimonBelanger Ich verwende MVC4 und habe Bereiche für benutzerspezifische Modell-Controller erstellt und meine Zielseite in Bereiche / Admin / Ansicht / Startseite / Index angezeigt. Dabei wird _Layout als Master-Vorlage verwendet. Wie soll ich eine URL in Base HRE schreiben?
3.
10

Wenn Sie Angular 1.6+ verwenden , müssen Sie außerdem FolgendeshashPrefix aus der URL entfernen :

appModule.config(['$locationProvider', function($locationProvider) {
  $locationProvider.hashPrefix(''); // by default '!'
  $locationProvider.html5Mode(true);
}]);

Vergessen Sie nicht, auch die Basis zu wechseln:

<head>
    ...
    <base href="/">
</head>
Mistalis
quelle
3 
    yourApp.config(function ($stateProvider, $urlRouterProvider,$locationProvider) {

    $urlRouterProvider.otherwise('/home');

    //add this line in your routing code   
    $locationProvider.html5Mode(true);

    $stateProvider.state('web.home', {
                url: '/home',
                templateUrl: 'pages/home.html',
                controller: 'mainController'         
            })
    }

in Ihrer index.php oder index.html in <head> -Tag einfügen 

< base href="/" >

für CodeIgniter :

<base href=" < ?php echo base_url() ?  >" >
Vishal Nathbone
quelle