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?
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.
If you are using Angular 1.6+, you will also need to remove the hashPrefix
from the URL:
appModule.config(['$locationProvider', function($locationProvider) { $locationProvider.hashPrefix(''); // by default '!' $locationProvider.html5Mode(true); }]);
Don't forget to change the base as well:
<head> ... <base href="/"> </head>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With