angular html5 mode断开节点服务器

时间:2015-08-11 12:37:42

标签: angularjs node.js html5 url

我想玩角度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为空

0 个答案:

没有答案