angularjs - How does ionic history work and when is a non-root stack created?

Question

I'm using ionic v1.0.0 and do not understand the way parallel history managed by $ionicHistory works.

Especially on Android devices, when using the (formerly hardware-)back button, my Angular app sometimes behaves strange and I'd like to understand why. (example: navigating back opens a view closed by $ionicGoBack() long time ago)

For me it seems like some of the ui-router navigations create new history stacks and others put the history items in the root history, even when going from state to sub-state should append to the history where state is recorded IMO.

Questions

• Can anybody explain in which cases ui-sref or $state.go(...) append history items to a newly created stack?
• When are they appended to root?
• Are modals treated in a special way?

Sorry for not being more specific, but the app is rather complicated and I don't know how to isolate the problems in a single plunkr. Maybe I missed a piece of good documentation...

question from:https://stackoverflow.com/questions/31186043/how-does-ionic-history-work-and-when-is-a-non-root-stack-created

Answer 1

I'll try to answer this question even if you might not find all the info you're asking.

Lot of people - included myself - seem to struggle to understand how the navigation system and the history works.

I've answered a question earlier trying to explain why things don't work as expected. It seems the navigation keeps track of each view the user has visited using a collection. Actually there are 2 collections in the $ionicHistory object. The first one $ionicHistory.viewHistory().views seems to keep track of each visited view in the current stack while the other $ionicHistory.viewHistory().histories keeps track of all the histories for the whole app.

You might have different types of history for tabs, sidemenus or regular views.

You can see how parallel independent histories work in this codepen.
There are 2 different histories there. One is for the home tab and the second is for the about tab.

Navigating through the sub-items in each tab and going back to the previous tab you'll notice that the navigation system has remember the previous state.

I've prepared another plunker here where you can see how the navigation works with some details displayed in the page.

The collection of views $ionicHistory.viewHistory().views is updated each time the user visits a new page (the current view in the collection is wrapped in square brackets).

If the view has been added to the collection it won't (it shouldn't) be added again.

You can change the behaviour clearing the history ($ionicHistory.clearHistory()) or setting the root for the current history:

$ionicHistory.nextViewOptions({
    historyRoot: true
});

In the Invoice page of my plunker there's a green button (Other Root View). When pressed I set the new history root and change state:

$ionicHistory.nextViewOptions({
    historyRoot: true
});
$state.go('otherviewroot');

Things work as expected and in fact now I don't have a back view and my stack contains only the current view.

Things get messed up when you try the sequence:

Home - Contacts - Invoices - Home (button in the header).

Now it's seems Ionic has lost control of the sequence and keeps on adding views to the collection.

Pressing the home button should clear the back button, since we are on the root for the current history, but it doesn't happen.

Using the same pattern over and over increases the size of the collection indefinitely.

I guess this is not the right behaviour and a fix is needed.

Going back to your question.

The back button in Android works ... meaning the it follows the same pattern.

Modals luckily are not treated as regular views and don't affect the collection.