Different view composition for tablet and phone

I have a phone app that has a series of 4 consecutive screens. Each screen is a detail of the selection made on the previous screen. For the tablet version, I would like to use the first screen as a fixed view on the side so that the top level selection is always visible.

What would be the recommended way to achieve this? Should I create different states for both phone and tablet or should I define a set of states once and conditionally use templates depending on the target device?

Right now this isn’t fully supported. There’s a lot thats keeping this from happening, mostly UI-router.
It’s not a main priority right now, but keep an eye out for it

Thanks for the prompt response. I got this to work for the first 2 screens using the templateUrl function in the state. It seems that this is not scalable for further levels, which is probably the issue with UI-router you are mentioning.

I’ll keep an eye out for this.

does anyone have any of there progress on this issue posted somewhere so that maybe the community can come up with a solution?

Theres a WIP branch for this.


For List -> Detail experience on a phone, the List view will be the first level and when you select an item the Detail view will be revealed and concealing the List view.

With SplitView, on a phone, the Content view is the first level. Is it possible to make the Side Menu view as the first level on a phone to achieve List -> Detail experience.

Is it possible to extend expose-aside-when for List -> Detail layout in addition to Side Menu -> Content?