Angular ui-router adding hash to url

Question

I am setting up a scaffold for an app with angular and angular-ui-router. I have it working however it seems to be adding a hash into my url (I'm running dev on localhost) localhost:9000/#/test. When I land on the main page it's just localhost:9000 and it still serves the main view content. I would like to get rid of the hash if possible.

So here is my setup:

In my index.html in the body I just have my nav and then the ui-view under that:

 <div class="row">
   <ul class="nav navbar-nav">
      <li><a ui-sref="index">Home</a></li>
      <li><a ui-sref="test">Test</a></li>
    </ul>
  </div>

  <div ui-view=""></div>

and in my app.js I just have:

angular
.module('playApp', [
'ui.router'
])
.config(function($stateProvider) {
$stateProvider
.state('index', {
    url: '',
    templateUrl: 'views/main.html',
    controller: 'MainCtrl'
})
.state('test', {
    url: '/test',
    templateUrl: 'views/test.html',
    controller: 'testCtrl'
});
});

So when I land, it's fine, but when I start using the nav I have set up, it adds the hashes to the url, would prefer not to have them if possible. Thanks!

Check the html5Mode([mode]) of the $locationProvider - docs.angularjs.org/api/ng/provider/$locationProvider — Radim Köhler
– Radim Köhler, Commented Feb 27, 2015 at 15:23
inclued $locationProvider and do $locationProvider.html5Mode(true); — Callum Linington
– Callum Linington, Commented Feb 27, 2015 at 15:24

Callum Linington · Accepted Answer · 2015-11-16 08:18:37Z

3

Include $locationProvider and do $locationProvider.html5Mode(true); :

angular.module('playApp', ['ui.router'])
    .config(function($stateProvider, $locationProvider) {
        $stateProvider.state('index', {
            url: '',
            templateUrl: 'views/main.html',
            controller: 'MainCtrl'
        })
       .state('test', {
            url: '/test',
            templateUrl: 'views/test.html',
            controller: 'testCtrl'
        });

        $locationProvider.html5Mode(true);
    });

I also have an otherwise in there as well, so that if it can't find a specified route, it will just default back:

angular.module('playApp', ['ui.router'])
    .config(function($stateProvider, $locationProvider, $urlRouterProvider) {
        $stateProvider.state('index', {
            url: '',
            templateUrl: 'views/main.html',
            controller: 'MainCtrl'
        })
       .state('test', {
            url: '/test',
            templateUrl: 'views/test.html',
            controller: 'testCtrl'
        });

        $locationProvider.html5Mode(true);
        $urlRouterProvider.otherwise('/');
    });

edited Nov 16, 2015 at 8:18

answered Feb 27, 2015 at 15:24

Callum Linington

14.4k14 gold badges80 silver badges156 bronze badges

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

2 Comments

beauXjames Over a year ago

In the case where you run into additional issues and an error that requires a tag to be present, check out this documentation :: docs.angularjs.org/error/$location/nobase

jarmod Over a year ago

Or $locationProvider.html5Mode({ enabled: true, requireBase: false });

jeff · Accepted Answer · 2015-02-27 15:26:48Z

1

Inject $locationProvider into your config and set html5mode to true:

angular.module('playApp', [
    'ui.router'
])
.config(function($stateProvider, $locationProvider ) {
    $stateProvider
        .state('index', {
            url: '',
            templateUrl: 'views/main.html',
            controller: 'MainCtrl'
        })
        .state('test', {
            url: '/test',
            templateUrl: 'views/test.html',
            controller: 'testCtrl'
        });

    $locationProvider.html5Mode(true);

});

Make sure you adjust your .htaccess to handle this (rewriting back to root).

answered Feb 27, 2015 at 15:26

jeff

4453 silver badges11 bronze badges

1 Comment

jarmod Over a year ago

More details on server-side rewrites at github.com/angular-ui/ui-router/wiki/….

rchavarria · Accepted Answer · 2018-05-22 14:32:45Z

0

There is an alternative to html5Mode. But it has its drawbacks.

When defining ui-router states, the url option is not required. From that documentation:

You might create some child states without URLs, if it doesn’t make sense to bookmark those child states. The state machine transitions between url-less states as usual, but does not update the url when complete. You still get all the other benefits of a state transition such as parameters, resolve, and lifecycle hooks.

If you don't need to provide a URL for a state so that users can bookmark those states, you can omit the url option. The URL won't change.

answered May 22, 2018 at 14:32

rchavarria

96010 silver badges16 bronze badges

Collectives™ on Stack Overflow

Angular ui-router adding hash to url

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related