Navigation Structure for Product

ionic-v1
1

Hey! Totally new to Ionic and Angular - seems absolutely fantastic so far! Loving it :smile:

I’m trying to build a product with the following structure (let the letters represent pages):

  1. Homepage is A
  2. To share a story you do the following A -> B -> C
  3. After sharing a story on page C you are taken to the message inbox D
  4. There is a button on Homepage A to go directly to the message inbox D
  5. The only navigation I (potentially) want is A->B->C

I don’t want any animations and also will probably override the style of the header bar back button.
Would be nice to save state from B->C if we want to unwind but its not hugely important.

Question: Whats the best structure to do this?

Idea 1: Put the whole thing in a ui-navigation-view and somehow exit the navigation view when going to page D

Idea 2: Don’t use navigation views at all and just route directly (not sure how to do this).

Would greatly appreciate any pointers. Thanks in advance for any advice / help!

2

All of that seems possible. To avoid animations between states and on the title bar, just don’t put an animation attribute on your <ion-nav-bar>. So DON"T do this :

<ion-nav-bar animation="nav-title-slide-ios7"
             type="bar-positive"
             hide-back-button="{{hideBackButton}}"
             back-button-type="button-icon"
             back-button-icon="ion-ios7-arrow-back">
</ion-nav-bar>

<ion-nav-view name="main" animation="slide-left-right"></ion-nav-view>

Instead, do this :

<ion-nav-bar
             type="bar-positive"
             hide-back-button="{{hideBackButton}}"
             back-button-type="button-icon"
             back-button-icon="ion-ios7-arrow-back">
</ion-nav-bar>

<ion-nav-view name="main"></ion-nav-view>

To avoid the back-buttons, you just tell the appropriate view to hide the back buttons.

<ion-view title="navTitle" left-buttons="leftButtons" right-buttons="rightButtons" hide-back-button="true">
```
3

Hey Calendee,

Thanks for the quick response! Makes sense - thats what I was basically doing except that I ended up hiding the back button on all of the pages.
Will it be inefficient in terms of app performance to use the saved navigation state as I’m not really using it at all?
What does it mean that the navigation state is saved - I tried going back with the back button but the text in a text box wasn’t saved.

Thanks for the explanation!

4

The scopes in a controller get destroyed when navigating to a state that uses a different controller. So, any data in that controller/view goes away. If you want it to persist, you’ll need to use Services.

I’m not sure about “saved navigation state” you are referencing. Again, unless you are using Services, any data in a scope on a controller is lost when you navigate away.