UI Router not recognising URL

Question

I've set up my $stateProvider as follows:

app.config(function($stateProvider,$urlRouterProvider,$locationProvider, $httpProvider){
    $stateProvider.state('localitySearch',{
        url: '/venues/in/:cityName/:localityName/:localityId/',
        templateUrl: 'static/partials/localitysearch.html',
        controller: 'localitySearchCtrl'
    });
    $urlRouterProvider.otherwise('/');
    $locationProvider.html5Mode(true).hashPrefix('!');
    $httpProvider.defaults.xsrfCookieName = 'csrftoken';
    $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
});

When I try to hit:

/venues/in/CityName/LocalityName/LocalityId/, it redirects to home page.

The same code works if use regular ngRoutes. Is there something I've missed that's preventing url redirection?

did you try hitting after `/!/venues/in/CityName/LocalityName/LocalityId/`? — Arpit Srivastava, May 04 '15 at 14:37
@ArpitSrivastava, I'm actually trying to use HTML5Mode so there's no `!` in my URLs. — Newtt, May 04 '15 at 14:39
check this url http://stackoverflow.com/questions/16677528/location-switching-between-html5-and-hashbang-mode-link-rewriting — Arpit Srivastava, May 04 '15 at 14:45
Are you using any backend frameworks, such as Laravel or Ruby on Rails? That can sometimes cause routing issues. The best place to start is by checking that everything is working without HTML5Mode first. — Ed B, May 04 '15 at 15:01
@EdB I am using Django. Up till now, I was using native ng routes and that worked perfectly. I changed that to `ui-router` and this the only url thats giving me issues. — Newtt, May 04 '15 at 15:04
Hmm. So you have other URLs that work without issue? In that case, aside from the HTML5Mode thing, I can only really suggest that you try working with a much shorter URL (with perhaps just 1 parameter) to start with, and slowly work in more complexity. I recommend you read through the answers given on the page that @ArpitSrivastava mentioned. The hashbang thing in particular. — Ed B, May 04 '15 at 15:11

score 2 · Answer 1 · answered May 04 '15 at 16:21

The concept is working. There is a working plunker.

So with this state definition (almost the same as above):

$urlRouterProvider.otherwise('/home');

$stateProvider
  .state('localitySearch',{
    url: '/venues/in/:cityName/:localityName/:localityId/',
    templateUrl: 'static/partials/localitysearch.html',
    controller: 'localitySearchCtrl'
  })
  .state('home', {
    url: "/home",
    templateUrl: 'tpl.html',  
  })

$locationProvider.html5Mode({enabled:true, requireBase: false}).hashPrefix('!');
$httpProvider.defaults.xsrfCookieName = 'csrftoken';
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';

These links will work:

// href
<a href="{{plnkr}}venues/in/cityName/localityName/localityId/">
// ui-sref
<a ui-sref="localitySearch({cityName:'Liberec', localityName:'Czech', localityId:'CZ'})"

NOTE: the {{plnkr}} is just a way how to know the generated url in the plunker:

.run(['$rootScope', 
  function ($rootScope,) {
    $rootScope.plnkr = document.location.pathname;
}])

Check it in action here

I was using `window.location.href` to change urls in some places where this was breaking. The moment I moved to `$state.go`, it all started function correctly. Strange behavior. — Newtt, May 04 '15 at 18:09

UI Router not recognising URL

1 Answers1