How to delete '#' sign in angular-ui-router URLs
I'm using the angular-ui-router library and I have a problem with URLs.
I have the following code:
app.js:
app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('state', {
url: '/state',
templateUrl: 'templates/state.html',
onEnter: function () {
/*... code ...*/
}
})});
index.html:
<a href="#/state">STATE</a>
This works, but when I remove '#' from the <a> tag this doesn't work.
How can I delete the '#' sign from the URL?
Answer
You need to enable HTML5Mode if you want navigation without hash tags:
app.config(["$locationProvider", function($locationProvider) {
$locationProvider.html5Mode(true);
}]);
You will also need to tell angular the root URL of your app by adding the following code to the <head> of your HTML file:
<base href="/">
Be aware that support for HTML5 mode depends on the browser. For those who don't support the History API, Angular will fallback to hashbang.