AngularJS: Two Parallel Views, One URL

Question

I'm building a dashboard/control panel app that is basically made up of two tabs (bootstrap) at the root level, called "dispatch" and "admin". Each tab has a good bit of its own multi-tiered navigation and functionality, and they don't need to directly interact with each other. The problem I'm running into is how to deep-link to sub-views within one of the tabs without losing the "state" of the inactive tab. To clarify, I can achieve this just fine if I don't worry about updating the URL, but when I try to add deep-linking, that's when I get stuck.

An example of the desired behavior:

1. When you click on the "Admin" tab, the route becomes "/admin"
2. Click on a sub-nav item, route becomes "/admin/foo"
3. Select 3rd-tier sub-level item, route becomes "admin/foo/thing1"
4. Click on the "dispatch" tab, route becomes "/dispatch"
5. Click back on the "admin" tab, route goes back to "admin/foo/thing1"

So basically, if you're at the "admin/foo/thing1" route in the middle of filling out a text field, then switch to another tab, then switch back, the text field should still be there just as you left it.

Like I said, the problem isn't switching from tab to tab, since by default the tabs just show and hide things on the page without reloading any views dynamically. I just don't know how to deep-link to a given tab's "bookmarked" position when you switch to it. The way I keep thinking of it is that clicking on a tab should only update the first segment of the URL(/admin or /dispatch), and then some sort of $watch function would update the remaining segments based on the last "location" within that tab. Would something like that work?

Also, I'm using ui-router to handle all my routing and states, so I have to factor that into how I'm going to handle the desired behavior.

Help?

Answer 1

I worked on both those topics (deep state reactivation and parallel states) and integration into ui-router. Grab my github fork of ui-router and build using grunt. Then, mark your two tab states as parallel: true and deepStateRedirect: true.

Git repo: https://github.com/christopherthielen/ui-router

Example plunker: http://plnkr.co/edit/YhQyPV?p=preview

Discussion: https://github.com/angular-ui/ui-router/issues/894

Answer 2

I would just save the current state in a variable, then either dynamically change the link of the tab to whatever the last subview was.

For example, if the user is on /admin/billing, the Admin tab would link to admin/billing. When they leave that tab, the /admin tab remains the same. If you are using ui-router, you can do this with ui-srefs. You could also just manually check the variable when the state changes, and route the user there from the controller.