CODEWITHSUNDEEP
javascriptangularjs
jtmarmon
jtmarmon

Reputation: 6179

Angular http-server page refresh 404s

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

Upvotes: 1

Views: 333

Answers (2)

zfogg
zfogg

Reputation: 454

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.

Upvotes: 0

yungStuck
yungStuck

Reputation: 21

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.

Upvotes: -1

Related Questions