我想玩角度location
,所以我在节点服务器上创建了一个简单的应用程序。
该计划是两个页面,每个页面都有用于向网址添加内容的按钮。有索引和用户,这是他们在app.js
app.get('/', routes.list);
app.get('/users', users.showusers);
这是索引页
<!DOCTYPE html>
<html ng-app="sp">
<head>
<script>
var sp = angular.module('sp', ['ngRoute']);
sp.config(function ($locationProvider) {
$locationProvider.html5Mode(true);
});
var finalqs ;
//just print the values to divs
sp.controller("MyController", function ($scope, $location) {
$scope.url = $location.absUrl();
$scope.protocol = $location.protocol();
$scope.host = $location.host();
$scope.port = $location.port();
$scope.url = $location.url();
$scope.c = $location.search().c;
$scope.d= $location.search().d;
$scope.e= $location.search().e;
$scope.f= $location.search().f;
finalqs = $location.url();
});
//what prefix should it use?
function addtothequerystring(addthis){
if (finalqs.indexOf("?")===-1){
finalqs+="?"+addthis;
}
else{finalqs+="&"+addthis;}
}
function aa(){
//if its already up there, dont add it again
if (finalqs.indexOf("c")===-1){
addtothequerystring("c=1&d=2");
history.pushState( "aa", "aa", finalqs);
}
}
function bb(){
if (finalqs.indexOf("f")===-1){
addtothequerystring("e=1&f=2");
history.pushState("bb", "bb", finalqs);
}
}
window.addEventListener('popstate', function(event) {
document.getElementById("showThis").innerHTML=event.state;
});
</script>
<base href="/">
</head>
<a href="/"> Home</a>
<a href="/users">users</a>
<button onClick="aa();">add things</button>
<button onClick="bb();">add extra things</button>
用户页面只是简单的html,如
<!DOCTYPE html>
<html >
<div id="main">
this is where content will be injected
</div>
</html>
除非我点击链接转到另一个页面,否则一切正常。地址栏中的网址会发生变化,但我会在同一页面中进行叠加。我必须点击两次才能真正转到另一页。现在,如果我删除
sp.config(function ($locationProvider) {
$locationProvider.html5Mode(true);
});
部分,这个问题消失了。为什么会发生这种情况,我该如何解决?
由于
UPDATE
charlietfl是对的,ngRoute
和
sp.config(function ($locationProvider) {
$locationProvider.html5Mode(true);
});
部分不是代码工作所必需的。如果我删除它们,我可以从一个页面转到另一个页面,但我再次从网址获取值,$location .search.name of any value
为空