Angular HTTP服务器页面刷新404

Question

I have an angular app with a controller routed like so:

controllers/favorites.js

...
$stateProvider.state('app.favorites' {url: '/favorites'} ...);

index.html

...
<a ui-sref="app.favorites"> ...

When you click the <a> tag, it takes you to the proper controller, routes the page to /favorites and everything is dandy. However, when you refresh the page, I get a 404 (the url is still /favorites )

Any idea why this is? I'm running the app using http-server , but I also get the same issue with python -mSimpleHTTPServer

Answer 1

It's possible to change the page location without reloading the page via the DOM's 'history' API. Your backend doesn't automatically know or care about the way a frontend app does this.

After your Angular app has navigated the browser to the location /favorites , when you refresh you will hit your backend at the location /favorites .

Does your backend react to a GET request at /favorites ? Perhaps it should! It's generally considered 'best practice' to allow users to refresh without 404ing.

This is perhaps a good time to break DRY (Don't Repeat Yourself); both the frontend and the backend need knowledge of your app's routes.

Answer 2

It probably has something to do with how angular loads the views. When you hit the index page it loads all the views at the same time. I think the problem is since you're refreshing on the same page it just doesn't know to reload the views.

I would look into running using grunt serve for a dev server as it auto refreshes every time you edit a file and it can be quite handy.