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

Question

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?

I think you'll have to use HTML5 mode, otherwise using the hash for routes is needed — Ian
– Ian, Commented Feb 28, 2014 at 18:18

Jamie Street · Accepted Answer · 2017-01-29 03:21:24Z

121

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.

edited Jan 29, 2017 at 3:21

Jamie Street

1,5473 gold badges14 silver badges33 bronze badges

answered Feb 28, 2014 at 18:20

Simon Belanger

14.9k3 gold badges43 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Niezborala Over a year ago

And i have another question. When I paste URL www.example.com/state, I don't have page with expected content. Can I make something with this?

Simon Belanger Over a year ago

It depends on your server. You need to show the same view as you would from the angular app root. AngularJs is smart enough to look at the URL and show the appropriate View / Controller. For example, if you usually go on to your app from /angular, you need to handle the case where going to /angular/state doesn't actually map to a real URL but is in fact a route in /angular and show the same view.

Saqueib Over a year ago

Also don't forget to put a <base href="/"> tag inside index.html <head> section

sigmapi13 Over a year ago

Or you can configure $locationProvider to not require a base tag by passing a definition object with requireBase:false to $locationProvider.html5Mode(): $locationProvider.html5Mode({ enabled: true, requireBase: false }); See: docs.angularjs.org/error/$location/nobase

3gth Over a year ago

@SimonBelanger i am using mvc4 and in that i have created areas for user specific models controller and view my my landing page is in Areas/Admin/View/Home/Index which uses _Layout as master template how should i write url in base href ?

|

Community · Accepted Answer · 2017-05-23 12:34:48Z

11

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>

edited May 23, 2017 at 12:34

CommunityBot

11 silver badge

answered Apr 24, 2017 at 13:03

Mistalis

18.3k14 gold badges78 silver badges97 bronze badges

Comments

Vishal Nathbone · Accepted Answer · 2017-04-29 09:55:48Z

4

    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() ?  >" >

edited Apr 29, 2017 at 9:55

answered Apr 29, 2017 at 9:40

Vishal Nathbone

415 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related