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
– Arpit Srivastava, Commented May 4, 2015 at 14:37
@ArpitSrivastava, I'm actually trying to use HTML5Mode so there's no ! in my URLs. — Newtt
– Newtt, Commented May 4, 2015 at 14:39
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
– Ed B, Commented May 4, 2015 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
– Newtt, Commented May 4, 2015 at 15:04

Radim Köhler · Accepted Answer · 2015-05-04 16:21:15Z

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.

Collectives™ on Stack Overflow

UI Router not recognising URL

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related