2012-06-19 31 views
83

Estoy tratando de implementar html5's pushstate en lugar de la # navegación utilizada por Angularjs. Intenté buscar una respuesta en google y también probé en la sala de chat de IRC angular sin suerte todavía.Usando HTML5 pushstate en angular.js

Ésta 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' 
      }); 
    }]) 

Respuesta

128

Inyectar $ locationProvider en su configuración y establezca $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="/page2">Page 2</a> 
+0

podría ver un ejemplo de código para esto cuando ya hay config() para routeProvider? No estoy seguro de si se supone que debo crear una nueva configuración() para esto o agregarla a la primera como una matriz de configuraciones, y tampoco estoy seguro de qué debería ser configFn (http://docs.angularjs.org/api /angular.module) –

+0

He hecho lo mismo, pero cuando hago clic en/phones /: phoneId, la plantilla url se convierte en phones/partials/phone-detail.html y la pestaña firebug net muestra la página html no encontrada –

+0

También recibo la página no encontrada cada vez que navego a una url determinada en el navegador (p. ej. '/ home' en lugar de'/'). ¿Has probado habilitar html5 para tu propio sitio? – drozzy

Cuestiones relacionadas