在angular.js上使用HTML5 pushstate

我試圖實現html5的pushstate而不是Angularjs使用的＃導航。我已經嘗試搜索谷歌的答案，並嘗試沒有運氣，但角irc聊天室。在angular.js上使用HTML5 pushstate

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

來源

2012-06-19 hilarl

128

進樣$ 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="/page2">Page 2</a>

來源

2012-06-19 11:58:52

我能看到這樣的代碼示例時，有已經配置（）用於routeProvider？不知道我是否應該爲此創建一個新的config（）或將它作爲一個配置數組添加到第一個配置中，也不知道configFn應該是什麼（http://docs.angularjs.org/api /angular.module） –

我做了同樣的事情，但是當我點擊/手機/：phoneId的模板url成爲手機/ partials/phone-detail.html和螢火蟲淨選項卡顯示html頁面未找到 –

我也沒有找到頁面每當我導航到瀏覽器中的給定URL時（例如'/ home'而不是'/'）。你有沒有嘗試爲自己的網站啓用html5？ – drozzy

在angular.js上使用HTML5 pushstate

回答

相關問題