Verwenden von HTML5 pushstate auf angular.js

84

Ich versuche, den Pushstate von HTML5 anstelle der von Angularjs verwendeten # Navigation zu implementieren. Ich habe versucht, bei Google nach einer Antwort zu suchen, und habe auch den eckigen IRC-Chatraum ohne Glück ausprobiert.

Das ist mein controllers.js:

function PhoneListCtrl($scope, $http) {
    $http.get('phones/phones.json').success(function(data) {
        $scope.phones = data;
    });
}

function PhoneDetailCtrl($scope, $routeParams) {
  $scope.phoneId = $routeParams.phoneId;
}

function greetCntr($scope, $window) {
    $scope.greet = function() {
    $("#modal").slideDown();
    }
}

app.js.

angular.module('phoneapp', []).
    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'
            });
    }])
Hilarl
quelle

Antworten:

129

Injizieren Sie $ locationProvider in Ihre Konfiguration und legen Sie fest $locationProvider.html5Mode(true).

http://docs.angularjs.org/api/ng.$locationProvider

Einfaches Beispiel:

JS:

myApp.config(function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider
    .when('/page1', { template: 'page1.html', controller: 'Page1Ctrl' })
    .when('/page2', { template: 'page2.html', controller: 'Page2Ctrl' })
});

HTML:

<a href="/page1">Page 1</a> | <a href="https://stackoverflow.com/page2">Page 2</a>
Andrew Joslin
quelle
Könnte ich ein Codebeispiel dafür sehen, wenn bereits config () für routeProvider vorhanden ist? Ich bin mir nicht sicher, ob ich dafür eine neue config () erstellen oder als Array von Konfigurationen zur ersten hinzufügen soll, und ich bin mir auch nicht sicher, wie die configFn lauten soll ( docs.angularjs.org/api/angular.module) )
Mike Crittenden
Ich habe das gleiche getan, aber wenn ich auf / phone /: phoneId klicke, wird die Vorlagen-URL zu phone / partials / phone-detail.html und der Firebug-Netz-Tab zeigt die HTML-Seite nicht gefunden
Ajay Beniwal
Ich erhalte auch eine Seite, die nicht gefunden wird, wenn ich zu einer bestimmten URL im Browser navigiere (z . B. /homeanstelle von /). Haben Sie versucht, HTML5 für Ihre eigene Site zu aktivieren?
Andriy Drozdyuk
37
Sie müssen Ihren Server so konfigurieren, dass Sie Seiten korrekt abrufen können. Wenn Sie versuchen, zu zu navigieren mysite.com/hello, wird versucht, diese Seite von Ihrem Server abzurufen. Stattdessen soll der Browser GET mysite.comund dann Angular verwenden, um den Standort des Browsers zu ermitteln /hellound dorthin zu gelangen. Sie müssen Ihren Server also so konfigurieren, dass die mysite.comDaten unabhängig von der eingegebenen Subdomain zurückgegeben werden.
Andrew Joslin
18
Ich würde sagen, setzen Sie Ihre Rest-API auf /apioder so, und machen Sie dann alles außer / api / * geben Sie die index.html aus.
Andrew Joslin