在 angular.js 上使用 HTML5 pushstate

本文介绍了在 angular.js 上使用 HTML5 pushstate的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试实现 html5 的 pushstate 而不是 Angularjs 使用的 # 导航.我试过在谷歌上搜索答案，也试过 angular irc 聊天室，但没有成功.

I am trying to implement html5's pushstate instead of the # navigation used by Angularjs. I have tried searching google for an answer and also tried the angular irc chat room with no luck yet.

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

推荐答案

将 $locationProvider 注入您的配置，并设置 $locationProvider.html5Mode(true).

Inject $locationProvider into your config, and set $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>

这篇关于在 angular.js 上使用 HTML5 pushstate的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

pushState