Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 932
Niezborala Avatar asked Feb 28 '14 18:02

Niezborala


2 Answers

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.

like image 79
Simon Belanger Avatar answered Oct 12 '22 19:10

Simon Belanger


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> 
like image 35
Mistalis Avatar answered Oct 12 '22 20:10

Mistalis