Handling routes without hashbang using angular-ui-router

Question

I've searched a lot online for an answer to this but haven't found anything yet.

Right now I have this code in my file that I thought would handle all routes/states besides the ones I've specified:

$urlRouterProvider.otherwise('/');

However, this functionality only works for paths like localhost:1337/#/stuff , but if I type in localhost:1337/stuff , I get an ugly internal server error.

Ideally, I'd like localhost:1337/stuff or any other URL without a hashbang to redirect to localhost:1337/#/ (my app's homepage).

Any thoughts on how I can accomplish this?

Answer 1

You need to set up two things:

1. A so-called " html5Mode " in your AngularJS configuration. That's the easy part: $locationProvider.html5Mode(true);
2. Set rewrites on your server so any request renders only your main html page.

From AngularJS docs on routing :

Using this mode requires URL rewriting on server side, basically you have to rewrite all your links to entry point of your application (eg index.html).

Answer 2

You can enable html5 mode within your app.js, which will also remove the hashbang from your links in your project ( localhost:1337/stuff instead of localhost:1337/#/stuff ).

If this is not the behavior you want, then you'll have to do the rewrites on the server side.