Використання HTML5 pushstate на angular.js


84

Я намагаюся реалізувати pushstat html5 замість # навігації, що використовується Angularjs. Я спробував пошукати відповідь у google, а також спробував розмову кімнату чату 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 не знайдена
Ajay Beniwal

Я також отримую сторінку, яку не можна знайти, коли я переходжу до певної 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.