Angular - Organise controller, factory and "class"

Question

I would like to understand how to have a nice organisation in my angular project.

[see code below]

Does it makes sense to have the getFireList function into the Factory ? Or should i put it into the controller ?

Does the "class" Fire makes sense ? Should i remove it ? Should i move it to the controller ? Should i move it the the factory ?

If you see anything wrong in this code i'm really interested to learn more.

For now, i've got this :

A class "Fire" to create new object of type Fire.

function Fire (p_power) {
    // ATTRIBUTES
        this.id = null;
        this.power = p_power;
        this.position  = {
            x: null,
            y: null
        }

    // GETTERS/SETTERS
        // id
        this.getId = function() {
            return this.id;
        }
        this.setId = function(p_id) {
            this.id = p_id;
        }

        // power
        this.getPower = function() {
            return this.power;
        }
        this.setPower = function(p_power) {
            this.power = p_power;
        }

        // position
        this.getPosition = function() {
            return this.position;
        }
        this.setPosition = function(p_position) {
            this.position = p_position;
        }

    // METHODS
        this.increasePower = function(p_plus) {
            this.power += p_plus;
        }

        this.decreasePower = function(p_minus) {
            this.power -= p_minus;
        }
    }

A controller

    simuApp.controller('FireController', function($scope, FireFactory) {

        // ...

    });

And a factory

    simuApp.factory('FireFactory', function() {

        return {
            fire_list: [],

            getFireList : function() {
                return $http.get(site_url+'fire/fireList').
                then(
                    function(success) {
                        var data = success.data;
                        var fires = [];
                        var fire_tmp;

                        for (i=0 ; i<data.length ; i++) {
                            fire_tmp = new Fire( data[i].power );
                            fire_tmp.setId( data[i].idFire );

                            fires.push( fire_tmp );
                        }

                        fire_list = fires;

                        return fire_list;
                    }, function(err) {
                        // ...
                    }
                );
            }

        }

    });

Thanks for your help.

Answer 1

First, let's get the terminology right. .factory is a method to register a function that generates an instance of the service - hence "factory". What it generates, though, is a singleton service instance.

So, the service you create would be more properly named as FireSvc (as opposed to FireFactory), whereas the function that creates it could have the word "factory" in it (although, in the case below, that function name is not really needed - it could just be an anonymous function):

.factory("FireSvc", function FireSvcFactory(){

});

It is a good practice to use a Service to abstract away any domain/business logic from the controller. Keep the controller thin, responsible only to define the ViewModel, and react to events by changing the ViewModel or invoking functions on the Model.

So, having FireSvc.getFireList() makes sense.

Now, whether the list is a collection of plain objects, or instances of Fire is completely independent of Angular and is entirely up to you. In any case, it is too broad of a topic to discuss in a SO answer.