0

I recently posted a question on SO asking about how to structure a controller for a multipart-view where the most upvotes answer in comments was: Use ui-router.

The goal (as described in the other question) is to create a page which looks like the following:

layout

...with this workflow:

  1. When the page loads, a list of data1 is being fetched from api1 which then gets populated in the table at the top.
  2. When the page loads, a list of data2 is being fetch from api2 and populated in the table to the right.
  3. When the user clicks on a entry in the table at the top, a detail view of data1 is being populared in the left part and some fields are being highlighted in the right table

I spent the last days learning about ui-router and I'm still unable to figure out how to do this, especially due to lack of samples about ui-router.

What I got in mind:

  1. One abstract State (root state) for the layout with a uriTemplate
  2. 3 views, (root.tableTop, root.detail, root.tableRight) with each a template and a controller (tableTop fetches api1, tableRight api2 and so on).
  3. Directives for highlighting

But: How do they communicate with each other? How can I propagate that the user has clicked on a row on tableTop and now detail needs to update? Through $rootScope? Or should I forget about views and work with nested states?

Community
  • 1
  • 1
xvdiff
  • 2,179
  • 2
  • 24
  • 47
  • I just replied to your previous question - I would say, it is about different "thinking", different approach. Theere is my way of building layout - menu, list, detail http://stackoverflow.com/q/25667660/1679310. And there is a bit about how to profit from JS and agnular scope inheritance - one Model http://stackoverflow.com/q/27696612/1679310. Combination of these is my way... hope this helps somehow... – Radim Köhler Jan 06 '15 at 05:24
  • @RadimKöhler Your examples did indeed clear up some things, especially about relative/absolute naming in views which I also struggled with beforehand. But I still can't get a picture of applying this to my current scenario: Following your second example: This means that there must be a main controller for the layout that holds every variable that needs to be shared within its scope? Then why create multiple controllers? – xvdiff Jan 06 '15 at 08:43
  • I should show you our solutions. It is not so easy to explain this question which really hardly can have simple answer. I just tried to show you some drafts which together could work. Mostly scope inheritance, using Model.Property (with dot)... Take it as just a comment, hint.. until you get better one. OR create plunker and tell me what should work how.. while working differently.. glad to assist then.. – Radim Köhler Jan 06 '15 at 08:56
  • @RadimKöhler I just assumed there's a simple answer because to me, it looks like a simple/common problem: https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views The image on this page is similar to what I'd like to achieve, just imagine the 'filter bar' is a subview on its own, not on the main state/root view. So a click on the button to apply the filter should be routes to another view which then updates. Hey, thanks for your help anyway. It's pretty uncommon that a SO user dedicates so much time to a beginners problem. :) – xvdiff Jan 06 '15 at 09:02
  • Do you know what, could you be so kind and investigate links in [this answer](http://stackoverflow.com/a/20581135/1679310)? Mainly the state.js and the deployed application (example by ui-router team) ... How I learned the UI-Router by daily repetead reading of the **state.js** ? Try that ... http://stackoverflow.com/a/20581135/1679310 – Radim Köhler Jan 06 '15 at 09:04

0 Answers0