I know one possible way to remove '#' from AngularJs route url is to enable html5 mode. like:
$locationProvider.html5Mode(true) if window.history && window.history.pushState
This is work, but the problem is after I click menu and switch to the correct page and refresh it, it shows template is missing!! I pretty sure this is because after refresh page, the view will automatically load rails view with the url instead of AngularJs route url. Could someone help me?
From the angular docs
Server side
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)
The reason for this is that when you first visit the page (/about), e.g. after a refresh, the browser has no way of knowing that this isn't a real url, so it goes ahead and loads it. However if you have loaded up the root page first, and all the javascript code, then when you navigate to /about angular can get in there before the browser tries to hit the server and handle it accordingly
Thanks to Reloading the page gives wrong GET request with AngularJS HTML5 mode