I am trying to create an Ionic app that has two “root” layouts. One will be a tab layout with 3 tabs, and will handle Login, Register, About, Contact Us, and Forgot Password. Once the user authenticates, I want to have another root state that contains a side menu and the rest of the applications functionality.
My index.html page has one, un-named ion-nav-view in it, and the tabbed state that loads the other tabs is all setup and working great. What do I have to do to create a new root level layout so that when I route to that state, the tabs are no longer present and the the man content area has a view and is part of a side menu layout container? Do I need to have both ion-nav-view elements in the index.html file, with different names? Or do I route a new view within the outer ion-nav-view that will then contain the side menu element and content?
An example on root layout switching would be ideal here…thanks in advance for any help!
My abstract base-state (if you are logged in) and the login- state only uses the ion-nav-view from the index.html.
The base template, has another unnamed ion-nav-view (for all other states) and a named view for the side-menu content.
The noAuth: true flag is a special one for me, to check before state change, if you are trying to access login page, but you are already logged in or you are trying to access a auth-required state, but you are not logged in and so on.
So they are automatically hanging into the base-states nameless ion-nav-view.
UI-Router states are “relative” by default, so the next fitting ion-nav-view is used.
Ok, thanks a lot for this, it makes a little more sense. How do you structure the html in the base.html vs the sidemenu.html? Sorry, I’m an ionic noob…I can’t really find a whole lot out there on structuring a more complex layout. Specifically, I’m not sure where to use ion-side-menus, ion-side-menu etc. between the base and the menu. Also, not sure where to put the ion-nav-bar and ion-nav-button that will open the menu. Do those go in the base or the side menu?