In my AngularJS application, I have a standard CRUD component that manages most of the systems entities. This component (which is a directive) is basically a table that receives its columns metadata (JSON) and decorate the table. There are several screens in my system that use this directive as a template, so the only difference between them is the array of column metadata passed to it based on the entity name. Just to exemplify, above there is the route to this screen. Notice that one single controller handles all "basic" entities and all the information it gets is the entity name.
module.config(function($routeProvider) {
$routeProvider
...
.when('/basic/:entity', {
controller: 'BasicCrudController',
controllerAs: 'ctrl',
templateUrl: 'app/crud/basic/basic-crud.html'
})
...;
});
My question is about the service that is going to, in fact, retrieve the array of column metadata to the BasicCrudController
based on the entity name (this name is like its unique identifier). Since there are several entities using this template, I would not like to keep the column information about all of them in one single file with a huge switch
statement (like shown above). I wanted to lazily load this information for some entities in order to speed up the system start.
switch(entity.name) {
case 'FOO':
return [column1JSON, column2JSON, ...];
case 'FOO2':
return [column2JSON, column3JSON, ...];
...
}
Still, some columns definitions are shared among entities, so it would be great to have a solution where I can "extend" the returned columns or reuse a group of columns somehow. In the end, the best of the solutions would be something like this:
function MostBasicService() {
this.getColumns = function(entityName) {
return [column1JSON, column2JSON, ...];
}
}
/* Specific for Foo entity. Should be loaded only when (and if) needed. */
function FooService() {
this.getColumns = function(entityName) {
return MostBasicService.getColumns(entityName)
.concat(columnFoo1, columnFoo2, ...);
}
}
/* Specific for Foo2 entity. Should be loaded only when (and if) needed. */
function Foo2Service() {
this.getColumns = ...
}
In conclusion, I would like to know what's the best way (using AngularJS) to implement these services and even if they should be services at all. Thanks.