Handle State as new Route in Ionic Framework with Angular UI-Router

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.


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.