I need to create this layout in a SPA using AngularJS and a web api. The workflow goes as follows:
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)
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)
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.
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;
Related
I'm a Junior Developer and I'm currently having a big issue with breadcrumbs.
For this application, I'm using VueJS and the problem I'm having is the following:
*The user clicks on 'tables' and is sent to the 'tables' page.
-On that 'tables' page, he has a big table in which he's able to click on the various columns to show a new table with data relevant to the column he clicked on.
*For this I'm on the same component so I'm not using routers, but using v-show as I don't want the tables to rerender.
My problem is the following, I have to make a breadcrumbs as he navigates to the different tables (ie: table/holdingList/entrepriseList/clientList..). and they have to be clickable so that I'm able to create a function that injects data into the table or to simply 'show' it and close the others.
Can anyone give me a brief out-line of how to do this? Sorry if it seems trivial. I've already spent a couple of days on it and my brain has turned to mush...
I will start from the easiest solution to implement:
Each v-show will depend on a different data object. Then your breadcrumb has an #click method that will set every v-show data object to false. Give the method a parameter with the name of the data object that you intend to show and display that to true.
The previous answer is enough to get it working. Other ways of achieving the same result in a more maintainable way are:
Create one data object named as activeTable and turn your v-show into a v-if. When you click on the breadcrumb element you change the activeTable data object to an identifier for the table you wish to display. After that your vue-if simply checks if the activeTable === thisTableId. Where thisTableId is the identifier of each table.
You may want to start getting acquainted with Vuex specially if your tables share a similar layout. In that way you will store the data and there is no need to request your data again. This is useful if the data to populate your tables come from an API.
Finally on an SPA architecture there is no actual re-render so you may possibly want to look at that as well.
Please read the guidelines for posting an answer since they require you to show at least some effort from your side. Good Luck!
my angular application consist of some common custom filters with different report pages.
User Can navigate from one page to another page and he can change filter for each page.
Need to add feature so common filters would maintain for each page.Whenuser navigated back to previous page it should display same filters that user selected in previous page.
For Above use case is it right to use ng-redux else how i can achieve this in angular 4
Please suggest best approach.
I assume by navigating from one page to another, you are basically routing to different routes. Therefore to have the information of your selected filter for each page, you can add that information to the routing parameter.
Something like this:
this.router.navigate(['/your_route_name',{parameterName: parameterValue}]);
And on the routed component, it can be received as such:
this.route.snapshot.paramMap.get('parameterName')
Or else you can have a service running globally between your routes, which is not recommended as it populates the global space unnecessarily.
I'm looking to create a sidebar that will be generated based on data received from the back-end, which will be an array of items. Basically, each piece of data I receive will be its own component, but all together, they will form the side bar. The data I receive will not always be the same depending on the page, but the possible items will be known. So it's not like it's random data. I'll have a directive for each item.
I was thinking that I'd create a container directive (the sidebar) and create a directive for each smaller component. On the page load, the sidebar container would have some logic that knows how to bind the back-end item to the associated directive. It would just iterate through the items, find it's proper directive, then compile and append it to the sidebar element.
Does that sound like the correct approach? For that logic that involves mapping the back-end item to a directive, where should that go? Should that go in the compile, link, or controller function? I would have thought to use the controller function and utilize $element and $compile, but wanted to check on the input of others.
Thanks in advance!
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:
...with this workflow:
When the page loads, a list of data1 is being fetched from api1 which then gets populated in the table at the top.
When the page loads, a list of data2 is being fetch from api2 and populated in the table to the right.
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:
One abstract State (root state) for the layout with a uriTemplate
3 views, (root.tableTop, root.detail, root.tableRight) with each a template and a controller (tableTop fetches api1, tableRight api2 and so on).
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?
I'm building an application and I'm looking for some advice on how to structure a specific piece of functionality I'm working on.
I have this reports view, on this page a drop down with various reports a user can generate. This is what it looks like:
The drop down is just an array I hard coded in the controller. When a user selects a specific report, the controller makes a call to the ReportFactory and returns the selected report object, from there the view builds the report using the returned object.
However, this doesn't work with multiple reports since the html table is completely different depending on the report I need and as of now I've hard coded the report table into the view.
What would be the best way to switch between different reports which would each have their own function to build the object, their own html to render the table and where I can still implement DataTables to all of them once I get to that step.
You could possibly use a named ui-view with ui-router, then each dropdown would be a state which can load a different templateURL and controller.