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 $statePr

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

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