ui-router-extras

ui-router-extras copied to clipboard

Would it be possible to implement a solution that sticky/parallel states are represented in the URL? Let's assume I have two ui-views (left, right) on a page. I would like to enter a link ...#/left/leftparams/right/rightparams and the result would be that the left view will be filled with /left/leftparams and right view with /right/rigthparams templates, controllers etc.

I would like to address these two views independently, meaning I would like to be able to replace left view without touching right one and vice versa.

With ui router I can emulate the needed by declaring state url as /{lefttemplate}/{leftparam}/{righttemplate}/{rightparam}, but it creates one scope and so so soon as I want to change only left view, the right one gets also reset/reloaded. Sticky states allows to keep independent views, but I cannot take the URL and hand it over so that the exact same view combination would open in another browser.

Thank you.

Hi, that is a feature that is definitely already on my radar, but I don't have the time to implement it.

@christopherthielen Could you give a few pointers of where to start with something like that? I've followed your project for a while but am not very familiar with the codebase. I have a pretty good understanding of ui-router, but I'm quickly getting to the point where I will need to maintain url state in separate components.

As OP mentions, I think what would be necessary would be to have a base url for each of the root branches in the tree. A nice-to-have feature would be if you could use two different instances of a given state tree.

This is the url structure that I'd like to support (again, basically same as OP)

/page/foo/component-a/a-params/.../component-b/b-params

However, what if component-a can be reused multiple times on a page? Is it to naive to just gather all of the root states, and then split up the URL based on the base url for each component? For instance in the example above, we have page/foo which is a regular state, component-a/...params & component-b which would be a 'reusable states' - so you could do something like this

/page/foo/component-a/a-params/component-b/b-params/component-a/baz/foo

Hmm, thinking out loud now - the above represents a problem, because how does the router know which instance to tie the url to? You would need some sort of identifier appended to each base url.

/component-a-1/.../component-a-2/

Yuck that could start getting ugly fast. Thoughts? :)

Also, I know you've had long discussions with UI-router contributors - so I'm willing to read and look through those if this has already been discussed.

UI-router obviously doesn't have any concept of parallel active states. The ui-router-extras trickery allows Sticky States to track the inactive states, but it still retains the concept of a single primary active state. I think the most reasonable approach would be to continue to consider one state the active/primary state and the remainder as inactive.

UI-Router Extras - Sticky States already tracks which states are inactivated. This information is accessible from the $stickyState service. See https://github.com/christopherthielen/ui-router-extras/blob/master/src/stickyStateProvider.js#L105. The trick will be mapping those inactivate states and their parameters to the URL. I would suggest using query parameters something along the lines of /primarystate/paramvalue?inactive=/inactive1/paramval2&inactive=/inactive2/paramval3. The URLs can be generated like this:

function geturl(inactivestate, inactiveparams) {
  var publicPortion = $state.get(inactivestate);
  var privatePortion = publicPortion.$$state();
  return privatePortion.url.format(inactiveparams); 
}

Now the core task becomes getting those inactive states into the URL as query parameters and keeping the URL synchronized properly, as well as transitioning to the inactive states when the url is navigated to manually. I don't have any concrete thoughts as to the best way to achieve this.

Also, my above comment ignores the difficulties in activating multiple "copies" of the same state.

@christopherthielen thanks for the info. Will let you know if I can put together anything useful.

@christopherthielen Do you have any pointers how to go about preserving copies of the same state, but with different route parameters?

Edit: It seems that one solution what would be using Future States to dynamically create new states, whose name would be based on the route parameter passed. Are there any implications of using both Sticky States and Future States that would make such a solution impossible?

@maciej-gurban I don't, sorry. Your idea might work, but seems pretty kludgey. I wish I had a better answer! See also #90 and #89 Edit: see also #143

+1

Ah, this is exactly what I am looking for. Is there WIP branch for this? I would love to help out where I can.

Does anyone know if UI.Router has a concept for query-params-only states? Meaning that a state can exist with any actual URL prefix but a state can be achieved by those params defined in the ? portion of the URL? If so, then it might be that dual URLs could be achieved in that one state is driven by the URL portion and another state driven by the queryParams.

My thinking in this: I use sticky states for stateful-modals. It's easy to establish a sticky state where a UI state is maintained underneath a modal state as we generally enter the modal state after entering the underlying state. But in cases that a dual URL is pasted, the underlying state is missing.

Anyway... just thinking out loud and hoping we can find a solution.