Topic Suggestion: More info on routing and states please (especially in conjunction with side menus/headers/footers)

[andmar8]

OK, I'm starting to get there with this:

https://github.com/driftyco/ionic-starter-sidemenu

To push you in the right directions you need:

https://github.com/angular-ui/ui-router/wiki http://angular-ui.github.io/ui-router/site/#/api https://github.com/angular-ui/ui-router/wiki/Quick-Reference

Briefly, as I understand it....

The state provider allows you to define named states that you append with child states app, app.page1, app.page2 etc.... (look at app.js)

Child states are applied to ion-nav-views based in the parent state, with the top most state applied to index.html. So the html defined in the app state is applied to index.html, child states to the app (for example app.page1) are then applied to the nav-view "inside" menu.html. It would seem parent state html can define multiple nav-views so you tie the nav-view to the child state with the the "views: { 'namedcontent':{} }" section of the code in the state provider, so in the example menu.html's nav-view has a name attribute set to "menuContent", in the stateProvider code you will see the reference to "menuContent".

The app state is also defined as "abstract" which seems to mean it is not shown as is, it must be shown with another state inside it, hence you get a left menu + the content page html.

I wish this had all been explained somewhere!

The other bit I'm getting to grips with is... notice how in menu.html you define an ion-nav-bar as the generic header to all content pages, then the child pages define ion-nav-buttons to display left and right buttons per page. I didn't see that straight away.

Still not totally understanding it all.... also, am I not looking hard enough or is there nothing written down about "ion-pane"?

Edit: I'm not looking hard enough - http://ionicframework.com/docs/api/directive/ionPane/ however, there reeeeeallly needs to be an expansion of how you use this directive!!!

Further Edit: ok, interesting, you can also have multiple abstract parent states which define multiple menu set ups, for example, you could have a menuLeft.html, a menuRight.html and a menuLeftRight.html that has only a left menu, only a right menu, or both and make abstract states named 'left' 'right' and 'leftright' then assign the menus to child states by using the respective parent state. So If I wanted page1 to have a left menu I could have a state of 'left.page1', page 2 to have both sides I could have a state 'leftright.page2'.... this is all kinda making more sense

[gerred]

I plan on doing a deep dive into the router and how to use it with the other nav elements offered by Ionic, including the side menu and nav bars. Stay tuned!

[wootwoot1234]

@gerred, I'm also interested in this topic. A tutorial on the router and how to use it with transition animations would be very helpful. Thanks!

[Langstra]

Perhaps in addition to this there could be an explanation on how to use it as login. How we can deny users access through the ui-router.

[andmar8]

^^^^ Oooh, yes please! That too!