AngularJS Generic List Controller

Question

So I didn't get an answer from my last question so I decided to handle this myself.

I created a generic controller like this:

.controller('GenericListController', function () {

    // Define this
    var self = this;

    // Define our list
    self.list = [];

    // Create our page sizes array
    self.pageSizes = [10, 20, 50, 100];

    // For filtering and sorting the table
    self.pageSize = self.pageSizes[0];
    self.predicate = 'name';
    self.reverse = false;
    self.filter = '';

    // For deleting
    self.delete = function (e, model) {

        // Delete the item
        service.delete(model.id);
    };
});

very simple as you can see. Now I was using this by injecting it into my controller like this:

.controller('DashboardController', ['GenericListController', 'CenterService', 'companyId', 'centers', function (Controller, service, companyId, centers) {

    // Assign this to a variable
    var self = Controller;
}])

In theory everything that is assigned to the GenericListController is now available to the DashboardController. The problem is the line in the generic controller that looks like this:

service.delete(model.id);

Somehow I need to reference my service in the generic controller. I thought that maybe I could create a provider and inject the service reference into the constructor but I am not sure if it being a singleton is an issue, so I need some help.

1. Is a service / factory / provider a good way to build the GenericListController?
2. Does a service / factory being a singleton affect anything? If so, can they be created so they are not singletons?
3. Is there another way to achieve what I am after?

Update 1

So it appears some people are confused....

So if I created a factory that looks like this:

.factory('ListControllerService', function () {

    // Default constructor expecting a service
    return function (service) {

        // Define this
        var self = this;

        // Define our list
        self.list = [];

        // Create our page sizes array
        self.pageSizes = [10, 20, 50, 100];

        // For filtering and sorting the table
        self.pageSize = self.pageSizes[0];
        self.predicate = 'name';
        self.reverse = false;
        self.filter = '';

        // For deleting
        self.delete = function (e, model) {

            // Delete the item
            service.delete(model.id);
        };
    };
})

then I create 2 separate controllers that looks like this:

.controller('DashboardController', ['ControllerService', 'CenterService', 'companyId', 'centers', function (Controller, service, companyId, centers) {

    // Assign this to a variable
    var self = new Controller(service);

    self.list = centers;
}])

.controller('CompanyController', ['ControllerService', 'CompanyService', 'ArrayService', 'companies', function (Controller, service, arrayService, centers) {

    // Assign this to a variable
    var self = new Controller(service);

    self.list = companies;
}])

Hopefully you can see that the service I am injecting into the ListControllerService is different for each controller. The only caveat I have with my example is that each "service" must have a delete method (not so difficult because they are all api services).

I hope that explains things better.

Answer 1

The solution I am using on my current project is to write a function that registers a factory.

function CreateMyGenericFactory(factoryName, serviceName)
    app.factory(factoryName, [serviceName, function (service){

        var GenericListFactory = {
            list: [],
            pageSizes: [10, 20, 50, 100],
            predicate: 'name',
            reverse: false,
            filter: ''
            delete: function(e, model){
                service.delete(model.id);
            }
        }

        GenericListFactory.pageSize = GenericListFactory.pageSizes[0];

        return GenericListFactory;

    }]);
}

Then execute the function in your JS to register a new factory dynamically.

CreateMyGenericFactory('ListFactory', 'ListService');

And use it in your controller.

app.controller('GenericListController', ['ListFactory', function (ListFactory) {
  ...
  console.log(ListFactory.pageSizes.length); // -> 4
  ListFactory.delete(e, model);
}];

I also registered the service inside my CreateMyGenericFactory function to further reduce duplication, you may consider doing that as well if each factory has its own service.

The final solution looked like this.

function CreateMyGenericFactory(name)
    var factoryName = name + 'Factory'; // e.g. listFactory
    var serviceName = name + 'Service'; // e.g. listService

    app.factory(factoryName, [serviceName, function (service){

        var factory = {
            list: [],
            pageSizes: [10, 20, 50, 100],
            predicate: 'name',
            reverse: false,
            filter: ''
            delete: function(e, model){
                service.delete(model.id);
            }
        }

        factory.pageSize = factory.pageSizes[0];

        return factory;

    }]);

    app.service(serviceName, ['$resource', function (resource){

        return $resource(Modus[backend] + '/api/'+slug+'s/:id', {
            id: '@_id'
        });

    }]);
}

That way I could register all the Factories and Services I needed without duplicating any code.

CreateMyGenericFactory('user');
// this registered userFactory and userService

Answer 2

Well, it looks like I was nearly there. I have managed to solve this but I am not sure if it is the best way to do it, but it certainly works.

So my service is very similar to before:

.factory('ListControllerService', function () {

    // Default constructor expecting a service
    return function (ctrl, service) {

        // Define this
        var self = ctrl;

        // Define our list
        self.list = [];

        // Create our page sizes array
        self.pageSizes = [10, 20, 50, 100];

        // For filtering and sorting the table
        self.pageSize = self.pageSizes[0];
        self.predicate = 'name';
        self.reverse = false;
        self.filter = '';

        // For deleting
        self.delete = function (e, model) {

            // Delete the item
            service.delete(model.id);
        };

        return self;
    };
})

The only thing that changes is that instead of:

self = this;

I now do:

self = ctrl;

ctrl is the controller that is inheriting from this service. I also return self so that I can bind it to self in the inherited controller.

now my controller looks like this:

.controller('DashboardController', ['ListControllerService', 'CenterService', 'companyId', 'centers', function (Controller, service, companyId, centers) {

    // Assign this to a variable
    var self = new Controller(this, service);

    console.log(this);
    console.log(self);

    // Assign our centers
    self.list = centers;
}])

both console.log output the same which is great.