I've been reading about AngularJS services and factories, and how you should strive for a thin controller, but as the project I've been working on grows it seems more and more impractical with as interconnected as the app is. For a little background, I am using UI-Grid to display most data in the app (20+ grids) and MVC5. At the moment, I've placed all of my API calls to SQL within the main controller, along with all of my grid definitions:
app.controller('MainController', ['$scope', '$http', '$filter', 'logger', function ($scope, $http, $filter, logger) {
$scope.project = {};
/*
* Grid Listing Definition
*/
$scope.gridListing = { enableRowSelection: true, enableRowHeaderSelection: false, multiSelect: false, enableColumnMenus: false, enableSorting: false };
$scope.gridListing.onRegisterApi = function (gridApi) {
// Set api on scope
$scope.gridListing.Api = gridApi;
gridApi.selection.on.rowSelectionChanged($scope, function (row) {
$scope.gridListing.selectedRow = false; // Used for visibility on the view
if (row.isSelected) {
$scope.gridListing.selectedRow = row.entity;
};
});
};
$scope.gridListing.columnDefs = [
{ field: 'ListingNumber', displayName: 'Number', type: 'number', width: '10%' }
, { field: 'CreatedOn', displayName: 'CreatedOn', type: 'date', cellFilter: 'date:"yyyy-MM-dd"', width: '10%' }
, { field: 'CreatedBy', displayName: 'CreatedBy', width: '10%' }
, { field: 'Description', displayName: 'Description' }
, { field: 'FunctionState', displayName: 'State', width: '10%' }
];
$scope.load_gridListing = function () { // Update when new Listing is selected
$scope.gridListing.data = []; // Clear grid for new data
$http.get('/api/qryListingAPI/?project=' + $scope.project.ProjectID)
.then(function (response) {
$scope.gridListing.data = response.data;
})
.catch(function (response) {
// Custom logger for error tracking
logger.log(usrName, 'app', response.status + " - " + response.statusText, logger.Error);
});
};
}]);
As the user interacts with objects in the view, like selecting a new project etc. various grids need to be updated to reflect the users selection. I had tied these "load" functions on the view to update grids as needed. I had originally thought of creating services for each of the views that I use to populate these grids, but with so many, and needing to share between controllers, I elected not to to avoid massive controller definitions and added complexity making sure each controller was on the same page. I may be misunderstanding how to implement AngularJS the way many say AngularJS should be implemented and making it more complicated than it needs to be. Any suggestions for implementing an app with 20+ grids and 30+ APIs?