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?

54126 次浏览

小开

最佳答案

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>

小开

    yourApp.config(function ($stateProvider, $urlRouterProvider,$locationProvider) {


$urlRouterProvider.otherwise('/home');


//add this line in your routing code
$locationProvider.html5Mode(true);


$stateProvider.state('web.home', {
url: '/home',
templateUrl: 'pages/home.html',
controller: 'mainController'
})
}

in your index.php or index.html in < head > tag insert

< base href="/" >

for CodeIgniter :

<base href=" < ?php echo base_url() ?  >" >