How to delete '#' sign in angular-ui-router URLs

JavascriptAngularjsAngular Ui-Router

Javascript Problem Overview

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?

Javascript Solutions

Solution 1 - Javascript

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.

Solution 2 - Javascript

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>

Solution 3 - Javascript

	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() ?  >" >
Categories
Recommended Javascript Solutions
Recommended Angularjs Solutions
Recommended Angular Ui-Router Solutions

Previous Solution:

Concatenate two NumPy arrays vertically

PythonArraysNumpyConcatenation

Next Solution:

How to download a file from my server using SSH (using PuTTY on Windows)

WindowsSshDownloadPuttyScp

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionNiezboralaView Question on Stackoverflow
Solution 1 - JavascriptSimon BelangerView Answer on Stackoverflow
Solution 2 - JavascriptMistalisView Answer on Stackoverflow
Solution 3 - JavascriptVishal NathboneView Answer on Stackoverflow