Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Routing to Tab based interface with angular-ui and angular-ui-router

I read a lot of issues on the Github page of ui-router and i decided to get some input (sry for one more tab example)

I am creating an interface which is based on tabs (based on angular-ui).

I have some fixed tabs (some lists) which should be there all the time, the data is more or less static and the speed is more important.

Additionaly i want to open closable tabs which contain for example detail views of the list items, it is important to be able to switch between them (lookup stuff in other tabs). They should keep modifications.

For this reason i created a tab service providing the fixed tabs and the ability to create more of them or remove them (saving only ui state)

I created a TabController to control the whole tab page and i created one state which loads the tabs.

So far so good, works up to this point. I now want to create routes to the state of the ui, so for example to show the second tab active instead of the first one when you load the page or directly show a tab to create new stuff.

I do not want to save the whole state if i reload the page, only show directly a certain tab and if not present create it. If i am already on the page i want to keep my current tabs and only open a new one.

I liked the https://github.com/angular-ui/ui-router/issues/562 issue because it seemed to me this could be a usecase. I want to keep the view as it is simply modify it based on the route.

Basically the question is how to properly delegate the routes to my TabController where i can handle the whole thing (lookup if tab is present then show it otherwise create it and show it).

This issue is complicated and its already late but maybe you get the idea

like image 482
pfried Avatar asked Nov 13 '13 16:11

pfried


1 Answers

The issue is indeed complicated. I am working on a fork of ui-router that does exactly what you're describing. It looks like it may be integrated into core ui-router at some point.

Plunk to play around with: http://plnkr.co/edit/YhQyPV

https://github.com/angular-ui/ui-router/issues/894

like image 163
Chris T Avatar answered Sep 28 '22 09:09

Chris T