angular html5 mode breaks links on node server

2019-09-18 18:53发布

问题:

I wanted to play with angular's location, so I created a simple app on node server.

The plan was two pages, each have buttons to add things to the url. There are index and users, here are their node server routes in app.js

app.get('/', routes.list);
app.get('/users', users.showusers);

Here is the index page

<!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>

users page is just plain html like

<!DOCTYPE html>
<html >    
    <div id="main">
     this is where content will be injected 
    </div>
</html>

Everything works fine, except when I click the links to get to another page. The url in the adress bar changes, but I am stack in the same page. I have to click twice to actually go to another page. Now, if I remove the

sp.config(function ($locationProvider) {
    $locationProvider.html5Mode(true);
});

part, this problem goes away. Why is this happening, and how can I fix it?

Thanks

UPDATE charlietfl is right, the ngRoute and the

sp.config(function ($locationProvider) {
    $locationProvider.html5Mode(true);
});

part are not necessary for the code to work. If I remove them, I can go from one page to the other , but I canot anymore get the values from the url, $location .search.name of any value is empty