Routing state encoded in single query parameter

[ggoodman]

I would like to use ui-router to manage a 'pane' within the editor component of plunker (http://plnkr.co/edit/).

Plunker currently uses $routeProvider with html5Mode(true) for its routing needs (though it would have been MUCH easier w/ ui-router had that been available at the time).

The editor can be in one of several states:

1. /edit/ editing a blank plunk
2. /edit/<sourceName>:<sourceDef> creating an unsaved plunk based on an external or dynamic source
3. /edit/<plunkId> editing an existing plunk

Now, the icons on the right allow a user to access different 'panes'. In one pane, I would like to have a what essentially amounts to a self-contained SPA. A WIP can be seen at: http://plnkr.co/edit/Qv0uCROy1jbAmhjQ2TkR?p=preview (may not work if dev server is off).

To get this to work, it seems to me that trying to patch in some sort of path-based routing would just be a route for corner-cases and misery and trying to use hash-based routing would conflict w/ the existing html5Mode routing.

My thinking is then that it would be great if the state of ui-router could optionally be encoded into a query parameter. Perhaps we could have pluggable state encoders/decoders?

Hope to hear your thoughts, I really love this project.

[ksperling]

Maybe something like that could be made to work if we separate everything out sufficiently such that you can create additional state machine instances (in addition to the default one that binds to $location).

Being able to configure a different 'encoder' on the default $stateProvider would also be possible, even though I suppose it would have to happen before any states are defined.

Are you trying to continue to let $route handle most of the routing? The intention of the ui.compat module is to support the $route[Provider] API on top of $state[Provider], even though $state is what's doing the work underneath. So you might be able to leave most of the code untouched and just use the $state API at the point where you're actually defining the nested states for that pane. Or am I misunderstanding what you're trying to do?

[ggoodman]

@ksperling I intend to eventually fully migrate to ui-router. Even then, though, I don't think I would be able to have a clean solution to my issue.

What I would like to have is a full SPA (with a multi-level state tree) embedded in a slide out pane. That pane would appear within another SPA having its own set of states (and corresponding urls). Given the the hierarchical approach taken, I would need a second namespace for the panel SPA. This is where the idea of encoding state into a query string parameter came to me.

[ksperling]

@ggoodman have a look at my comment on this issue: #123 (comment) I guess that 'component' approach might be essentially what you're after

[timkindberg]

Use Sticky States with Deep State Redirect from UI-Router extras: http://christopherthielen.github.io/ui-router-extras/#/home