使用Angular UI-Router将状态作为Ionic Framework中的新路由处理

Question

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".

Answer 1

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.

Answer 2

Difference between $StateRouteProvider and $UrlRouteProvider ..

$UrlRouteProvider.otherwise(url); -->route to given url.

$StateRouteProvider.otherwise(state); -->route to given state.

So, if you are using ui-router then wherever view change is required use $state.go(). In a case of $location.path(URL) will work in a case like the transition to the independent state to current state. If you are looking to route through states under the same parent then you have to use $state route.