Korzystanie z pushstate HTML5 na angular.js

84

Próbuję zaimplementować pushstate html5 zamiast nawigacji # używanej przez Angularjs. Próbowałem poszukać odpowiedzi w Google, a także bez powodzenia wypróbowałem kątowy czat IRC.

To jest moje 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
źródło

Odpowiedzi:

129

Wstaw $ locationProvider do swojej konfiguracji i ustaw $locationProvider.html5Mode(true).

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

Prosty przykład:

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
źródło
Czy mogę zobaczyć przykładowy kod dla tego, gdy istnieje już config () dla routeProvider? Nie jestem pewien, czy mam tworzyć nową konfigurację config () w tym celu, czy dodać ją do pierwszej jako tablicę konfiguracji, a także nie jestem pewien, jaki powinien być configFn ( docs.angularjs.org/api/angular.module )
Mike Crittenden
Zrobiłem to samo, ale kiedy kliknę / telefony /: phoneId szablon adresu URL zmieni się na telefony / częściowe / phone-detail.html, a karta sieciowa programu Firebug pokazuje, że strona html nie została znaleziona
Ajay Beniwal
Otrzymuję również stronę, której nie znaleziono za każdym razem, gdy przechodzę do danego adresu URL w przeglądarce (np. /homeZamiast /). Czy próbowałeś włączyć HTML5 we własnej witrynie?
Andriy Drozdyuk,
37
Musisz skonfigurować serwer, aby umożliwić poprawne pobieranie stron. Kiedy próbujesz przejść do mysite.com/hello, próbuje pobrać tę stronę z twojego serwera. Zamiast tego chcesz, aby przeglądarka GET, mysite.coma następnie użyj kąta, aby znaleźć lokalizację przeglądarki /helloi przejść tam. Musisz więc skonfigurować serwer, aby zwracał mysite.comdane bez względu na to, która subdomena zostanie wprowadzona.
Andrew Joslin,
18
Powiedziałbym, że ustaw resztę API na /apiczy coś, a potem wszystko oprócz / api / * wyda index.html.
Andrew Joslin