Handling routes without hashbang with angular -ui-router

Question

I searched a lot online to answer this question, but did not find anything.

Now I have this code in my file, which, as I thought, will handle all routes / states except those that I specified:

$urlRouterProvider.otherwise('/'); 

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

Ideally, I would like localhost:1337/stuff or any other url without a hash band to redirect to localhost:1337/#/ (my application’s home page).

Any thoughts on how I can do this?

Answer 1

You need to configure two things:

• The so-called " html5Mode " in your AngularJS configuration. This is the easy part: $locationProvider.html5Mode(true);
• Set the rewrite on your server so that any request only displays your html main page.

From AngularJS docs on routing :

Using this mode requires rewriting server-side URLs, basically you should rewrite all your links to your application’s entry point (for example, index.html).

Answer 2

You can enable html5 mode in your app.js application, 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 need, then you will have to do server side rewriting.