I'm using the Ionic Framework with its AngularJS UI-Router and $stateProvider to handle different views in my app.
However, I'm having trouble figuring out how to tell the $stateProvider that I got different "Main View's", with each having different Subviews.
When I'm on /#/home for example, and click on a link which sends me to /#/about, then /#/about doesn't get rendered as it's own, new view. Instead it transitions to it as it were a subpage of /#/home.
It works like it should when I replace $stateProvider with the AngularJS $routeProvider, but then all the transitions are gone.
I've created a Pen for you to take a look at it.
http://codepen.io/anon/pen/gBDFi
There should be no transition between them. Every "base" url should be a new "tab".
don't know if this is still relevant as it was posted February and I'm by no means a ng-pro but here is my attempt JSBinLink
Two major things I did where to wrap the content in ion-tabs and add it in the stateProvider as an abstract state.
With this construct you have two independent tabs "Home", "About" - notice, no back button. However if you navigate to "Tom" within "About" - you get a back button.
There are other ways to achieve something similar, one is to create child states and such.
I would recommend to check out the UI-Routers documentation. It's mostly well written and very informative - there is also a create video of Tom Kindberg explaining the main concepts of it over here.
Hope this helps.