2 different root state layouts?

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!

I use those layouts in my apps.

your have one index.html with your unnamed ion-nav-view

your routes for that:

            .state('login', {
                url: '/login',
                templateUrl: 'login.html',
                controller: 'LoginCtrl',
                noAuth: true
            })
            .state('base', {
                url: '/',
                abstract: true,
                views: {
                    '': {
                        templateUrl: 'base.html',
                        controller: 'BaseCtrl'
                    },
                    'sidemenu@base': {
                        templateUrl: 'sidemenu.html',
                        controller: 'SidemenuCtrl'
                    }
                }
            })

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.

All other state are children of the base-state:

           .state('base.dashboard', {
                url: 'dashboard',
                controller: 'DashboardCtrl',
                templateUrl: 'dashboard.html
            })

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.

2 Likes

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?

Thanks again for all your help!

I think I figured it all out…just had to actuallly “read” the docs :smile:

Thanks for the clarity you provided, it put me on the right track!

Hi Your approach is good but difficult implementing in one scenario i.e more better clear from this topic

Nested abstract views tabs and side menu