在angular.js上使用HTML5 pushstate

我试图实现html5的pushstate而不是Angularjs使用的＃导航。 我已经尝试search谷歌的答案，也尝试了没有运气，但angularirc聊天室。

这是我的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' }); }]) 

Answer 1

注入$ locationProvider到你的configuration中，并设置$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="/page2">Page 2</a>