Angular UI Router - How to preserve views while switching views

Question

I am I new to Angular and UI Router.

Plunk http://plnkr.co/edit/1wfyrGryfGG5RtXozPFY?p=preview

Setup I have three top level

Answer 1

One option would be to implement a service that can be used to maintain the previous state. Services persist over controller changes, thus they can be used to maintain the previous page state and updated when the route changes. something similar to this would work.

app.factory('persitDataService', [function(currentStateData){
  var stateService = {
     state:{
        //your object data set to passed in data
     }
     //other functions here
  }; 
  return stateService   
});

then in the controllers just inject the service and assign to a scope value. When the route changes just reset the data in service to new state and inject into new controller

This should work for the previous page state. If you are wanting to save the states of all previous pages then this becomes a larger problem but should be accomplished in much the same way only with a more complicated service setup. This could also be combined with local and session storage

Answer 2

I wanted similar functionality too, but ui-router doesn't yet support it. I forked ui-router to support "parallel states" and submitted it to the project for comment. The gist of the conversation is that ui-router will eventually support some form of parallel states but not yet. In the meantime, you can try my fork of 0.2.10 which provides the parallel states that you want.

Read the conversation here: https://github.com/angular-ui/ui-router/issues/894

View the sample parallel tabs plunk here: http://plnkr.co/edit/YhQyPV?p=preview

Here is the fork; build it with grunt: https://github.com/christopherthielen/ui-router