Turns out I just hit the wall.
The idea of ​​including page content in the states and location of the user interface routers while visiting these states in a single software execution is absolutely wrong. In particular, you cannot simultaneously display two representations of sister states.
UI Router is designed for routing with mouse clicks. Despite the fact that the collected documents are hinting strongly, we can transfer our full page on the state tree to place all the content, but this is not always the case. As long as the application logic goes into another state that is not depressed due to the state, exits from the state before entering the state and its created representation of the exit state are completely deleted.
The Bellow code initially tries to prove my concept below (improving the design in the original question, since I realized that there is no break-point / resume design in state) and solve my problem, but it turns out to show an example of the opposite - impossibility under the wrong idea.
Concept
- Define the states and their hierarchy and patterns for the structure of the page layout;
- Make a state tree;
- Make a traverse
- Walk the path of $ state.go to each state to expand and display the layout.
Code ( plnkr )
<!DOCTYPE html> <html ng-app="demo"> <head> <meta charset="utf-8" /> <title>Demo</title> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.js"></script> <script> let app = angular.module('demo', ['ui.router']); app.config(['$urlRouterProvider', function ($up) { $up.otherwise('/'); }]); app.provider('runtimeStates', ['$stateProvider', function ($stateProvider) { this.$get = function () { return { newState: function (name, param) { $stateProvider.state(name, param); return name; } }; }; }]); app.factory('sharingSpace', function () { return { stateTree: [], traversePath: [] }; }); app.run(['sharingSpace', '$transitions', '$state' ,function(ss, $trs, $st) { $trs.onStart({}, function($tr) { console.log("trans begin: " + $tr.from().name + " -> " + $tr.to().name); } ); $trs.onSuccess({}, function($tr) { nextHop(ss, $st); console.log("trans succeeded: " + $tr.from().name + " -> " + $tr.to().name); } ); }]); app.run(['runtimeStates', 'sharingSpace', function(rt, ss) { makeStateTree(rt, ss); }]); function StateParam(stateName) { let me = this; me.name = stateName; me.params = { message : { value: '', dynamic: true } }; me.views = {}; </script> <style> div{border-style: solid;} </style> </head> <body> <ui-view name="state1view1"></ui-view> <br> <ui-view name="state1view2"></ui-view> </body> </html>
Result (Firefox 57.0.1)
When entering a page: 
After clicking and closing the warning:
The above process showed that state1.state2 was executed and laid out (but not yet rated / displayed on angular), as we see in the first figure. There was no exit at this point, because the onExit warning blocked the process. After the alert call sign was closed, the state ended and the view was completely deleted.
There is a sticky-state designed for a specific purpose on the page, but since I tried, this does not work here. It remembers the last visited stick states, but scans of outgoing states are always deleted.
Now I'm trying to use the UI Router only as a notation tool for routing. But I have to be very conscious so as not to come across the idea that the UI Router can be used as a general tool for page layout, for example, to extend the angular component. But it can be difficult: I can’t come up with the right way to use the UI Router at the moment. In the case of multiple views, if any two representations of brothers and sisters have their own sub-states, I must be very careful, because visiting one of them goes beyond the other - they are exceptional. It makes me think that it’s not worth its complexity.
In most cases, when navigating, you need to delete views when exiting, I suggest changing the UI Router interface and giving the ability to save views for more flexibility. It may be more difficult than the first thought, but it should be possible.
It is also advisable to cache all the “last visible” parameters for each state (not only for sticky states) so that we can easily return to them. You can argue about a precedent, but we cannot imagine how people will use the tool and should not limit opportunities.
It is also advisable to provide a tool for hooks of the full life cycle to the state base (now they have only OnEnter and onExit).