current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.5 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 4 down vote favorite
1

I am setting up a scaffold for an app I'm building with angular and angular-ui-routes. I have them working however it seems to be adding a hash onto my url like (I'm localhost for dev right now ) 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 has if possible.

so here is my setup -

in my index.html in the body I just have my nav and then 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!

share|improve this question
1  
Check the html5Mode([mode]) of the $locationProvider - docs.angularjs.org/api/ng/provider/$locationProvider – Radim Köhler Feb 27 '15 at 15:23
1  
inclued $locationProvider and do $locationProvider.html5Mode(true); – Callum Linington Feb 27 '15 at 15:24
up vote 2 down vote accepted

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('/');
    });
share|improve this answer
    
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 – beauXjames Jul 23 '15 at 21:31
    
Or $locationProvider.html5Mode({ enabled: true, requireBase: false }); – jarmod Nov 15 '15 at 16:18
up vote 1 down vote

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).

share|improve this answer
    
More details on server-side rewrites at github.com/angular-ui/ui-router/wiki/…. – jarmod Nov 15 '15 at 16:28

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.