I am currently in the process of developing an application that will showcase various charts and controls to filter the presented data. I have structured the HTML page in a way that remains consistent throughout, leading me to consider creating an HTML template that can be used with different controllers. Each controller would correspond to a specific chart type or set of filters for a particular chart.
My initial idea was to create a default HTML template which could be filled with the appropriate chart controller and filter controller based on the requested type.
To implement this concept, I decided to heavily rely on prototypical inheritance. I constructed a ChartController that establishes two scope models for holding the chart and filter control configurations. Subsequently, I developed child controllers like LineChartController and LineChartFiltersController to populate these variables with type-specific configurations.
Although everything is functional, I have reservations about this approach since the child controllers are heavily reliant on the parent controller. This dependency makes testing and understanding the source of $scope models challenging for individuals unfamiliar with the controller design.
Here are some code snippets:
app.controller('ChartController', ['$scope', function($scope) {
$scope.chart = {};
$scope.filters = {};
}]);
app.controller('LineChartController', ['$scope', function($scope) {
$scope.chart.tooltip = {...};
$scope.chart.commonSeriesSettings = {...};
}]);
app.controller('LineChartFiltersController', ['$scope', function($scope) {
$scope.filters.beginDate = ...;
$scope.filters.endDate = ...;
$scope.filters.granularity = ...;
}]);
A route has been configured to redirect to the HTML template shared among all charts, utilizing the ChartController. Within this template, I incorporate both LineChartController and LineChartFiltersController to establish the parent-child relationship:
<div ng-include="/partials/line_chart.html"></div>
...
<div ng-include="/partials/line_chart_filters.html"></div>
line_chart.html
<div ng-controller="LineChartController">
<div chart="widget"></div>
</div>
line_chart_filters.html
<div ng-controller="LineChartFiltersController">
<!-- date pickets, sliders, etc. that use $scope.filter -->
</div>
While I understand that using a service to share data between controllers might be a better approach, my intention is to exchange model data such as chart configurations and filter controls rather than fetching business models from a server. I find it difficult to see the benefit of services in this scenario because a service provides a singleton object. Personally, I anticipated receiving individual instances specific to instantiated controllers similar to conventional OOP programming. Hence, I opted for scope inheritance.
Would there be another method to accomplish my objective effectively? Or should I reconsider utilizing a service for this purpose?