angular ui-router: using URL query parameters to define child state

Question

Similar to this question and this issue I'm trying to use URL query parameters to define child states with ui-router :

.state('map', {
  url: '/map?country&city'
  templateUrl: 'templates/myMapTemplate.html',
    // no resolve in this case as using default data for map template
})
.state('map.country', {
  url: '?country',
  templateUrl: 'templates/myMapTemplate.html',
  resolve: {
    countryData : ['mapServices', '$stateParams', function(mapServices, $stateParams){
      return mapServices.getCountryBounds($stateParams.country)    // ajax server call
    }]
  }
})
.state('map.city', {
  url: '?city',
  templateUrl: 'templates/myMapTemplate.html',
  resolve: {
    cityData : ['mapServices', '$stateParams', function(mapServices, $stateParams){
      return mapServices.getCityBounds($stateParams.city)    // ajax server call
    }]
  }
})

The idea is that:
- having a different query parameter (or none at all) changes the state
- the resolve: of each child state can be specified to get different information from the server
- the template is the same for each state, but the data (ultimately) fed to the controller / template is different for each child state (retrieved via resolve)

eg.
www.mysite.com/map loads map with default data
www.mysite.com/map?country=US gets country data from server
www.mysite.com/map?city=sao_paulo gets city data from server

I've tried to set this up as above, but it won't work:
- no child state is recognised when adding URL parameters in the child state

Is it possible to use (optional) query parameters to change child state in ui-router?

(The docs don't specify much regarding query params)

Update #1: Created a plunker of the code above
Update #2: Created a 2nd plunker defining /map as an abstract state - which now works for changing states with ui-sref (and injects parameters into the resolve) - but href map?country=US still not recognised... ?

Don't use `href` with ui-router. Just use `ui-sref`. It does the same thing, but is optimized for working with UI-Router's states. You can read about using query parameters in the UI-Router wiki https://github.com/angular-ui/ui-router/wiki/URL-Routing — Ryan Hamley, Sep 17 '16 at 00:09
@RyanHamley thanks - the problem is i'm trying to detect state from the browser URL - not just change states using internal links. My understanding is that the `url:` part of the `.state(` definition object is for this purpose... ? — goredwards, Sep 17 '16 at 00:28
I don't think you need 3 separate states honestly. I would define a single state `map` and have a resolve that loads data depending on the value of the query params, which you can access from `$stateParams`. So in the `map` resolve, say `getData`, `if ($stateParams.city) { //load city data } else if ($stateParams.country) { // load country data } else { //load default data} `. In your approach, defining the `map` url as `/map?country&city` is likely intercepting the `map.city` and `map.country` urls, preventing those states from being reached. Make `map`'s url just `/map`. — Ryan Hamley, Sep 17 '16 at 00:49

angular ui-router: using URL query parameters to define child state

0 Answers0