Currently, I am developing an Angular web application that will showcase various financial events for the user. These events are categorized under a single ID and grouped into different categories. Each group needs to have its own HTML <table> for display.
The financial data is fetched using an Angular Service and resolved within the Angular UI Router setup. All the data is stored within this Service as well.
Below is the existing Router configuration:
import EventsController from './events.controller';
import EventsService from './events.service';
import EventsTableController from './events-tables/events-table.controller';
import eventsView from './events.html';
import eventsDetailsTableView from './events-tables/details-table.html';
export default function routes($stateProvider) {
$stateProvider
.state('events', {
url: '/events/{payDate:string}',
template: eventsView,
controller: EventsController,
controllerAs: 'events',
resolve: {
eventsData: ['$http', '$stateParams', ($http, $stateParams) => {
return new EventsService($http, $stateParams);
}]
},
views: {
'details@': {
template: eventsDetailsTableView,
controller: EventsTableController,
controllerAs: 'details',
resolve: {
eventData: 'eventsData.details'
}
}
}
}
);
}
routes.$inject = ['$stateProvider'];
In the future, the EventsController will be utilized to filter which <table>s should be displayed based on user preferences.
The EventsTableController serves as a generic Controller that contains both the type of data being shown (e.g., "details") and the actual data in a two-dimensional array format.
export default class EventsTableController {
constructor(eventData) {
this.name = eventData.name;
this.data = eventData.data;
console.log(this)
}
}
For reference, here is an example of the data returned by the Service:
{
'details': [[
"Event-ID",
"Company-CUSIP",
"Company-Name"]
]
}
Each <table> corresponds to a different field in that object.
However, I am facing issues with passing the data from the 'events' state's resolve into the nested details@ view. The current setup triggers an error stating that Angular UI Router cannot find the specific dependency: 'eventsData.details'.
My query is how can I pass individual object fields into the nested views so they can all be displayed independently? If you need more details, feel free to ask, and I will update this post accordingly for clarity.