AngularJS: remembering state/setup of complex views with routes

Question

In a single page application, is there a way of switching back and forth to an AngularJS route and to display it back in the same state as it was shown before?

Usually this would be implemented by binding data in a parent scope. While this is easy to set up for lightweight view, it can be cumbersome when doing it for views holding lots of graphical elements.

Here is an example, where having the previous route state remembered could enhance user experience: on the following page, imagine that

• you stand on Item 1 and select Tab 2
• then move to Item 2
• finally switch back to Item 1: Tab 2 is not selected anymore :-(

http://angular-route-segment.com/src/example/#/section1/1

It seems the views are destroyed/constructed when switching back and forth between routes.

A solution would be about storing the state of the user interface in a parent scope but it has the following pitfalls:

• creating an object storing all the little details of the user interface
• creating complex logic about -saving and- resetting the UI in the same state as before
• storing UI state in a data model does not sound that MVC-ish

Using show/hide of div storing the views saves the state but then no route is used and the switching business must be implemented by hand. I like using routes because 1. of the browser history navigation (hash in the url) and 2. it is easy to set up.

Having the UI state not remembered is like having Chrome to reload pages when switching back and forth between tabs: not very user friendly.

Is there an Angular-way?

Answer 1

Your $routeSegment approach is very interesting. The $routeSegment service could plug into the $routeChangeStart event in order to

• Somehow keep a "sub path history" on all paths seen so far, maybe only for those explicitly configured to keep their UI state. In your example for the path "/section1/1" the stored sub path would be "/Y" if tab 2 was selected. Things get interesting, as also dynamic paths with $routeParams might need to be covered.
• Use this history for redirecting by using $location.path in the event handler. So a $routeChangeStart event with next.originalPath being "/section1/1" might be redirected to "/section/1/Y"