Changing URL without changing state

[iliakan]

Here's the use case to prove my point.

I'm editing a Model. On save I want to change URL to /model/:id (id comes form server), but calling $state.transitionTo('model', {id: ...}) causes the state change and hence the model is RELOADED. As if it were not on client!

I'm trying to pass the existing model to the state, so that may keep it (by reusing in resolve): state.transitionTo('model', {model: modelObject}). But the normalization code stringifies the "model", so that's not an object any more.

Is what I'm doing conceptually wrong? Is there any really good reason to keep normalization which prevents it from working?

[ksperling]

At the moment all state parameters are normalized to strings. This was the simplest approach to begin with, because any parameter that comes from the URL starts out as a string. It is also to ensure that in your example, navigating to '/model/123' behaves the same as transitionTo('model', { id: 123 }) and transitionTo('model', { id: '123' }).

I was thinking of extending this to allow arbitrary parameter types, but they would still be able to be converted to and from strings for URL handling.

I'm not sure I get your use case completely; it sounds like you're creating a new business entity of some type, and when you save it on the server you want to change the URL without changing the state? This is not something thats supported currently, and I'm not quite sure how it would work, you're expecting '/model/new' (or something like that) to map to the same state as '/model/123' and for $state to somehow know that even though 'new' and '123' are different that they represent the same parameter value? Presumably if you then navigated back from '123' to 'new' you'd actually want that to be treated as different though, so the user can create another new entity...

I think the easiest way to avoid the extra server roundtrip for reloading the object is to have a service that manages the remoting, and do some caching in there. When you save a new entity, you can prepopulate it into that cache.

[iliakan]

Hi, I found the view change with transitionTo quite troublesome, because it rerenders ui-view, and spoils current editing process (no way to avoid rerendering).

Actually, I'd like /model/new to change to /model/123 on save without rerendering. Because the model has got the URL. But it seems there's no way to do so.

[ksperling]

I'll leave this open to revisit later -- it's definitely not trivial to address.

One thing you could do is register '/model/new' with $urlRouter directly, and fetch a fresh object id from the server (without saving the object), and then redirect to '/model/(new-id)'.

[iliakan]

Thank you very much for the project and for your answers.

Actually, what could work is reloadOnSearch: false, but for URLs. You know, most of time we want to change state when params change. But sometimes we just need to update the url and keep current controller/view.

The stateUpdate event (like routeUpdate from Angular) can be propagatedto help.

The use case: mode/new -> model/:id without reloading. Or any other case when valuable state is stored in the controller and there's totally no need to recreate it.

In this case, the controller mentioned in the state should know whether to go on with the state change and reloading OR it will handle the new URL on it's own. I guess, the neat & flexible solution would be to add parameter like: urlChangeHandler which is a function, injected with the current controller. This function is called on path change and decides whether to reload or not. It also may ask the controller if needed.

What do you think about that?
Do you feel like considering the patch?

[iliakan]

P.S. I've found the other way around (change the URL and no state navigation at all). It seems, that works for me:

      var off = $scope.$on('$stateChangeStart', function(e) {
        e.preventDefault();
        off();
      });
      $location.path('model/123').replace();

[xixixao]

Would find very useful to have a way of changing the URL without the state change (expensive render, but want to keep URL up to date for user to be able to come back).

[timkindberg]

@iliakan can you elaborate on how that works exactly? I'd like to add it to the FAQ.

[laurelnaiad]

I was really curious, too -- it looked like an endlessly recursive listener at first glance.

However, the docs say $scope.$on "returns a deregistration function for this listener". So, since the listener calls the function that it returns, and that function deregisters the listener...

The listener deregisters itself the first time it is invoked -- hence it's a one-time prevention of routing when defined just-in-time before calling replace().

What jumps out at me at second glance is that $stateParams will probably still have the old values after this happens. So while the bookmarkability is achieved, any components relying on $stateParams might be misled unless they were manually updated by the app.

None of this is tested, but if you did:

//assuming $state is injected already
var off = $scope.$on('$stateChangeStart', function(evt,  toState, toParams, fromState, fromParams) {
 evt.preventDefault();
 $state.params = toParams;
 angular.copy($state.params, $stateParams);
 off();
});
$location.path('model/123').replace();

it might patch up the parameters.

Feels like hacking... I'm always up for that! ;) User beware though... this is way deep in stuff that isn't part of the API... so expect it to break down the road, if it even works now.

[ksperling]

The 'dynamic parameters' feature should make this sort of thing unnecessary hopefully; you'll be able to change parameters marked as dynamic in $stateParams, and the location will update automatically, but no transition will happen.

[xixixao]

For anyone using this, there is a small gotcha - say you are in state with url "question/1", then use this hack to go to "question" and then, without the hack, navigate back to "question/1" - this won't trigger a state change since that's the state your app is actually in the whole time.

[laurelnaiad]

Yes to be thorough you should probably deal with that, too. See https://github.com/angular-ui/ui-router/blob/master/src/state.js#L233

[Hungor]

I used

var off = $scope.$on('$stateChangeStart', function(e) {
  e.preventDefault();
});
off();
$location.path('product/123').replace();

Since product is an URL preassigned with a state. The app still render.
Does anyone have run into this before and might have a solution?

[zerko]

Any news on "dynamic parameters" ?