Change url of angular-ui-router without reloading page

Question

I'd like for changes in the URL to drive my application, and for changes in the application to change the URL, but not actually change state.

I have a route like this. The country/city example is a bit contrived, hopefully that doesn't confuse things. The relationship in the real application is somewhat hierarchical. Child views don't seem a fit though because there's no need for nested views.

$stateProvider.state( 'viewMap', {
  url: '/viewMap/:country/:city',
  templateUrl: 'pages/viewMap/viewMap.html',
  controller: 'ViewMapController'
};

In ViewMapController, I can construct the page based on $stateParams.country and .city. As these values change, my application reacts and I want the url to stay in sync. I don't want to reload the whole page, however. I just want to update the url and push a history state on to the stack.

I understand I could manually construct a string:

updateUrl = function() {
 window.location.hash = '#/viewMap/'+ $stateParams.country +'/'+ $stateParams.city
}

This feels fragile, as the way I build the string is separate from the way the framework parses it. I would prefer for the framework to build me a string based on the current params, but $state.href('.') describes the current route, which doesn't include $stateParams that haven't yet been activated/navigated to.

I've also looked at reloadOnSearch, but I think it only applies to query params.

Is there a better way to model this? It feels like I'm fighting the framework over something simple.

Answer 1

You can pass state params to $state.href function to get the complete URL

$state.href('.', $stateParams)

To generate arbitrary urls you can pass non-current params and/or configuration:

$state.href('.', {country:'usa',city:'sf'}, {absolute:true})