Использование HTML5 pushstate на angular.js


84

Я пытаюсь реализовать pushstate html5 вместо # навигации, используемой Angularjs. Я попытался найти ответ в Google, а также попробовал чат-комнату angular irc, но безуспешно.

Это мой 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'
            });
    }])

Ответы:


129

Вставьте $ locationProvider в свою конфигурацию и установите $locationProvider.html5Mode(true).

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

Простой пример:

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>

Могу ли я увидеть образец кода для этого, если уже есть config () для routeProvider? Не уверен, должен ли я создать для этого новую config () или добавить ее к первой в виде массива конфигураций, а также не уверен, каким должен быть configFn ( docs.angularjs.org/api/angular.module )
Майк Криттенден

Я сделал то же самое, но когда я нажимаю /phones /: phoneId, URL-адрес шаблона становится телефонами / partials / phone-detail.html, а вкладка firebug net показывает, что страница html не найдена
Аджай Бенивал

Я также получаю страницу, которая не найдена, когда я перехожу к заданному URL-адресу в браузере (например, /homeвместо /). Вы пробовали включить html5 для своего сайта?
Андрей Дроздюк

37
Вы должны настроить свой сервер, чтобы вы могли правильно вытягивать страницы. Когда вы пытаетесь перейти на mysite.com/hello, он пытается получить эту страницу с вашего сервера. Вместо этого вы хотите, чтобы браузер получал ПОЛУЧЕНИЕ, mysite.comа затем использовал angular, чтобы найти местоположение браузера /helloи перейти туда. Таким образом, вам необходимо настроить свой сервер для возврата mysite.comданных независимо от того, какой поддомен введен.
Эндрю Джослин

18
Я бы сказал, поместите ваш API для отдыха /apiили что-то в этом роде, а затем сделайте все, кроме / api / *, выдающего index.html.
Эндрю Джослин
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.