How to remove the hashtag from AngularJS routes/URLs?

Question

My site's url is something like this: http://example.com/#/myitems

I would like my users to be able to type in http://example.com/myitems

I tried the following based on the many articles around this subject:

locationProvider.html5Mode({
    enabled: true,
    requireBase: false
});

This seems to partially work.The URLS don't have the hashtag anymore, however, if I type in http://example.com/myitems , it does not load the page. Conversely, if I type in http://example.com/#/myitems , it does load the page, and rewrites the URL as http://example.com/myitems .

So, I am still trying to figure out how I can have my users be able to type in the URL without the hashtag, and still be able to load the page.

Answer 1

I solved the same problem with push API enable to the server. Basically angular render the page at client side and find the exact route by # . you can enable html5 mode to remove # .

  $locationProvider.html5Mode({
    enabled:true,
    requireBase: false
});

Remember don't forget to enable push API support at server side. just by adding

    //To suport push API 
    // Just for DEMO in your case it may be different
app.use('/admin/*', function(req,res){
  var user = req.session.user;
   res.render("adminView",{user:user});
});

Here when you hard refresh or enter direct url into browser without # tag. server will render the home page(index) page and load your all required file. after that angular will handle all the routing for you because you have enabled html5 mode so no more need to add # in url.