Skip to content

Complex Dynamic Routes #2391

Closed
Closed
@austincondiff

Description

@austincondiff

I have a fairly complex route that is required by my project. Looking through documentation, I am not too sure this is possible (please try to prove me wrong), however if it is not it might be nice to be able to allow this type of behavior. I apologize in advance for the length of this issue, however this is a fairly in-depth concept that needs to be properly explained to be understood.

To get started, I have a parent state, and two child states that are siblings.

Complex Route Diagram

The resulting route would look like this:
/:userSlug/:tabSlug/entry/:entrySlug
or
`/:parent/:childA/text/:childB'

As you can see in the diagram the parent ui-view is the user page, the first child is a tab area, and the area to the right of the left pane is the entry being displayed or the second child.

An entry does not need to be selected so the url could look like this
/:userSlug/:tabSlug

And the UI would then look like this:

Complex Route Diagram without entry

Now as far as I can tell, named views within a state definition cannot have a url.

The requirement I have is that the userSlug be changeable while maintaining its child. This means I should be able to change users while not reloading the child entry state. I should also be able to change tabs within the user page without reloading it's sibling entry state.

The last stipulation, is at the top there is a search bar. It also acts as the title bar. You type in it and get suggestions of users' pages and when clicked it will load their page (while maintaining your entry if you are viewing one). The user page also needs to maintain it's controller and view without a state reload. One thing to note, the user page and tabs that are displayed are controlled by a user object I am getting from an API call in my resolve method in the state definition which is being injected into my controller. I can just replace the user object and somehow manually rewrite the url, but I would need to keep track of the different state parameters now that it is in a somewhat unstable state and that could get pretty messy.

A prime example of this in action however is Google Maps. There is a search bar which contains the name of the place that is being displayed. The url initially shows /@:coordinates.

Google Maps Figure 1

When you click on a named place on the map and it populates the left pane and the route changes to /places/:placeSlug/@:coordinates.

Google Maps Figure 2

Clicking on subsequent places simply replaces /:placeSlug before your coordinates.

Google Maps Figure 3

I do not believe the coordinates are a query string because there is not a question mark before it all.

So is this just some crazy pipe-dream or is this at all a possibility? If it isn't would ui-router benefit from being able to handle complex routes like this? Through countless Google searches I have read of quite a few people wanting to do pieces of this. Anyways let me know what y'all think.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions