Usando HTML5 pushstate en angular.js

84

Estoy tratando de implementar pushstate de html5 en lugar de la navegación # utilizada por Angularjs. Intenté buscar en Google una respuesta y también probé la sala de chat angular irc sin suerte todavía.

Este es mi 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
fuente

Respuestas:

129

Inyecte $ locationProvider en su configuración y configure $locationProvider.html5Mode(true).

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

Ejemplo simple:

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
fuente
¿Puedo ver una muestra de código para esto cuando ya hay config () para routeProvider? No estoy seguro de si se supone que debo crear un nuevo config () para esto o agregarlo al primero como una matriz de configuraciones, y tampoco estoy seguro de cuál debería ser el configFn ( docs.angularjs.org/api/angular.module )
Mike Crittenden
He hecho lo mismo, pero cuando hago clic en / phones /: phoneId, la URL de la plantilla se convierte en phones / partials / phone-detail.html y la pestaña de red de firebug muestra la página html no encontrada
Ajay Beniwal
También obtengo una página que no se encuentra cada vez que navego a una URL determinada en el navegador (por ejemplo, en /homelugar de /). ¿Ha intentado habilitar html5 para su propio sitio?
Andriy Drozdyuk
37
Tienes que configurar tu servidor para que puedas extraer páginas correctamente. Cuando intenta navegar mysite.com/hello, está tratando de OBTENER esa página de su servidor. En su lugar, desea que el navegador OBTENGA mysite.comy luego use angular para encontrar la ubicación del navegador /helloy vaya allí. Por lo tanto, debe configurar su servidor para devolver los mysite.comdatos sin importar qué subdominio se ingrese.
Andrew Joslin
18
Yo diría que ponga su API de descanso en /apio algo así, y luego haga todo menos / api / * proporcione el index.html.
Andrew Joslin