以下是抓取样本。它演示了如何使用ngRoute来使用pushState api（和popstate事件）。
这是一个令人头疼的问题，主要是因为我不得不玩弄事件并感觉到我必须采取某些行动的正确状态。
使用的示例：这是一个简单的电影名称列表及其图像和一些随机的文本。系统会提示用户提取它们以查看列表。他点击了一个项目，然后进入显示该项目详细信息的视图。当用户点击浏览器后退按钮时，会加载相同的列表，但这次有一个$rootScope标记了最近访问过的电影。
当然，有没有更好的方法来解决这个问题？...我不得不依赖$broadcast和var app = angular.module('plunker', ['ngRoute']);
app.controller('MainCtrl', function($scope, stuff, $window) {
$scope.fetch = function() {
stuff.all().then(function(data) {
$scope.stuff = data.data;
});
};
$scope.$on('hpop', function(e, v) {
//assume this comes from cache - used factory instead
stuff.all().then(function(d){
$scope.sel = v;
$scope.stuff = d.data;
});
});
$scope.select = function(idx) {
$window.history.pushState(idx, "", $window.location.href);
};
console.log('MainCtrl');
});
app.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'main.html',
controller: 'MainCtrl'
})
.when('/entry/:id', {
templateUrl: 'entry.html',
controller: 'EntryCtrl'
})
.otherwise({
redirectTo: '/'
});
});
app.controller('EntryCtrl', function($scope, stuff, $routeParams) {
console.log($routeParams.id);
stuff.get($routeParams.id).then(function(stuff) {
//console.log(stuff);
$scope.entry = stuff;
});
console.log('EntryCtrl');
});
app.factory('stuff', function($http, $q) {
var api = {};
var all = function() {
return $http({
url: 'stuff.json'
});
};
api.all = all;
var get = function(idx) {
var d = $q.defer();
all().then(function(dt) {
d.resolve(dt.data[idx]);
});
return d.promise;
};
api.get = get;
return api;
});
app.run(function($window, $rootScope) {
var state = {
hasState: false,
value: null
};
$window.addEventListener('popstate', function(evt) {
console.log('popstate:', arguments);
if(typeof evt.state === 'number') {
state.hasState = true;
state.value = evt.state;
}
}, false);
$rootScope.done = function() {
if(state.hasState) {
$rootScope.$broadcast('hpop', state.value);
state.hasState = false;
state.value = null;
}
};
});
来最终让我的控制器“感知”popstate事件......
$domain = $_SERVER['SERVER_ADDR'];