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 (e.g. index.html).