Geek Answers Handbook

Handle State as a new route in the Ionic Framework with Angular UI-Router

I am using the Ionic Framework with its AngularJS UI router and $ stateProvider to handle various views in my application.

However, it’s hard for me to understand how to tell $ stateProvider that I have different “Main View”, and each of them has different Subviews.

When I am on /#/home , for example, and click on the link that sends me to /#/about , then /#/about will not be displayed as my own, new view. Instead, it goes to it as a subpage /#/home .

It works as it should when I replace $ stateProvider with AngularJS $ routeProvider, but then all the transitions disappeared.

I created a Pen for you to take a look at it.

http://codepen.io/anon/pen/gBDFi

There should be no transition between them. Each base URL should be a new tab.

0
javascript angularjs angular-ui-router ionic-framework angular-routing
source share
2 answers

I don’t know how relevant this is, since it was published in February, and I am by no means ng-pro, but here is my attempt at JSBinLink

Two main things I did to wrap the contents in ion tabs and add it to stateProvider as an abstract state.

With this design, you have two independent tabs "Home", "About" - notification, button "Back". However, if you go to "Tom" in "About the program" - you will get a "Back" button.

There are other ways to achieve something similar, one is to create child states, etc.

I would recommend checking out the UI-Routers documentation. It is mostly well written and very informative - there is also a Tom Kindberg video that explains his basic concepts here .

Hope this helps.

0
source share

The difference between $ StateRouteProvider and $ UrlRouteProvider ..

$ UrlRouteProvider.otherwise (URL); -> route to the specified URL.

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

So, if you use ui-router, then wherever a view change is required, use $ state.go (). In the case of $ location.path (URL) it will work in such a case as switching to an independent state to the current state. If you want to redirect states under the same parent, you need to use the $ state route.

0
source share

More articles:


All Articles