1

layout

I need to create this layout in a SPA using AngularJS and a web api. The workflow goes as follows:

  1. When the controller loads, two sets of data get fetched from the api (table above and table to the left - e.g. 2 calls to api/data1 and api/data2)
  2. As soon as the user clicks a row in the upper table, detail information gets fetched into the box on the right side (api/data1/3434/detail)
  3. When the user clicks on certain entries from the detail information box, the related entries are being highlighted in the table to the left.

I started creating a view with everything in it, also a controller that exposes properties for all necessary stuff, but now it looks like this (pseudo)

myPageController
    table1Data : Array<IData1Model>;
    table2Data : Array<IData2Model>;
    userSelectedFromTable1 : IData1Model;
    userSelectedFromTable2 : IData2Model;

I feel this isn't really good practice. Is there a way to suborganize the parts into some kind of partial views? Subcontrollers? Or is this a common approach? What does the usual controller looks like when he's going to serve for multiple kinds of data / api endpoints?

EDIT

I should clarify that this is just one particular page (section) of a bigger app. Most parts are just frontends for one kind of data, e.g. one controller, one model, one api call etc. Think of the page as some kind of dashboard where multiple data is shown and interact with each other.

xvdiff
  • 2,179
  • 2
  • 24
  • 47
  • 2
    You definitely should investigate and use UI-Router - https://github.com/angular-ui/ui-router/wiki – Radim Köhler Dec 30 '14 at 12:48
  • Please, please, please don't have one massive controller. I don't think child controllers is the first answer, although nested controllers can certainly work. I'd try and decouple your controllers completely, making them independent of each other. If you need to communicate between controllers you can do that with services. – DoctorMick Dec 30 '14 at 15:17
  • @RadimKöhler UI-Router? Do you mean ngRoute? (.when("blah", templateUri...)? – xvdiff Dec 30 '14 at 15:58
  • @xvdiff **NO NO NO** I mean `UI-Router` not ngRoute. This is a state machine with lot of possiblities. Here I put together some very useful resources http://stackoverflow.com/a/20581135/1679310 – Radim Köhler Dec 30 '14 at 16:15
  • @RadimKöhler I spend the last few days digging into UI-router, however I'm still unsure on how I should tackle my current problem, mostly due to lack of advanced examples. I made a little example with multiviews similar to the image above, but there are a lot of unanswered questions, such as.. how can the views communicate with each other (e.g. fetch data on click) etc. Do you got any advanced samples on ui-router? – xvdiff Jan 05 '15 at 02:41
  • I would say, it is about different "thinking", different approach. First please try to check this how more views arround can cooperate on one Model http://stackoverflow.com/q/27696612/1679310 and then this is my way of layout-ing and all related stuff http://stackoverflow.com/q/25667660/1679310. Both do have working plunker and I am sure that combination of that should help. BTW exactly that is how my products are looking ;) – Radim Köhler Jan 06 '15 at 05:20

1 Answers1

0

is there a way to suborganize the parts into some kind of partial views? Subcontrollers?

These parts should really be directives. You would have the left view being a directive and the right view being a directive with the controller being the glue between the two directive instances.

so an overview of the controller:

myPageController
    tablesData : IData1Model[];
    userSelectedTable : IData1Model;
basarat
  • 261,912
  • 58
  • 460
  • 511