Federick Jons Federick Jons - 1 month ago 18
AngularJS Question

Define vm function correctly in Controller As

I'm new in javascript and AngularJS.

So... May be is a stupid question, but I have two way to define functions in javascript.

In the following to controllers please look at "grupoCancha" and "grupoVisible" (I pasted the hole script because there are another variable to defined depends the function)

Controller:

(function() {
'use strict';

angular
.module('example.cancha')
.controller('CanchaController', CanchaController);

CanchaController.$inject = ['$state', 'canchaService'];

function CanchaController($state, canchaService) {
var vm = angular.extend(this, {
canchasComplejo: [],
grupoCancha: grupoCancha,
grupoVisible: grupoVisible
});



(function activate() {
cargarCanchasComplejo();

})();

//funcion que llama al servicio para obtener las canchas del complejo
function cargarCanchasComplejo() {
canchaService.obtenerCanchasComplejo()
.then(function(canchasComplejo) {
vm.canchasComplejo = canchasComplejo;
});
}


function grupoCancha(canchaComplejo){
if (vm.grupoVisible(canchaComplejo)) {
vm.grupoMostrado = null;
}
else {
vm.grupoMostrado = canchaComplejo;
}
}

function grupoVisible(canchaComplejo){
return vm.grupoMostrado === canchaComplejo;
}


}
})();


The other way is kinda weird (may be is because I come from Java). But the definition of the function is complicated:

Controller 2:

(function() {
'use strict';

angular
.module('example.cancha')
.controller('CanchaController', CanchaController);

CanchaController.$inject = ['$state', 'canchaService'];

function CanchaController($state, canchaService) {
var vm = angular.extend(this, {
canchasComplejo: []
});



(function activate() {
cargarCanchasComplejo();

})();

//funcion que llama al servicio para obtener las canchas del complejo
function cargarCanchasComplejo() {
canchaService.obtenerCanchasComplejo()
.then(function(canchasComplejo) {
vm.canchasComplejo = canchasComplejo;
});
}

vm.grupoCancha = function(canchaComplejo) {
if (vm.grupoVisible(canchaComplejo)) {
vm.grupoMostrado = null;
}
else {
vm.grupoMostrado = canchaComplejo;
}
};

vm.grupoVisible = function(canchaComplejo) {
return vm.grupoMostrado === canchaComplejo;
};


}
})();


Could you explain me which way is the best to define functions and why?
Thanks!!

Answer

There are many ways to write Java Script. However stick on to recommended usage as specified in the documentation. Remember that performace is the concern in large scale applications. So Minfication is the way to achieve it.

I have modified your Controller 1 which will look like

(function() {
'use strict';
angular
    .module('example.cancha')
    .controller('CanchaController', 
                ['$state', 
                'canchaService',
                CanchaController]);
/*Order of dependencies in both should be one and the same as it will be usefull for minification of your code*/

function CanchaController($state, canchaService) {
    var vm = this ;

        canchasComplejo: [],

        vm.grupoCancha=function (canchaComplejo){
                if (vm.grupoVisible(canchaComplejo)) {
                    vm.grupoMostrado = null;
                } 
                else {
                    vm.grupoMostrado = canchaComplejo;
                }
        }
    //funcion que llama al servicio para obtener las canchas del complejo
    ////Sugesting to use exception handling below as it makes a service call.
        vm.cargarCanchasComplejo=function() {
                canchaService.obtenerCanchasComplejo()
                        .then(function(canchasComplejo) {
                        vm.canchasComplejo = canchasComplejo;
                        });
        }

        vm.grupoVisible=function(canchaComplejo){
                return vm.grupoMostrado === canchaComplejo;
        }
    }
}());

When you minify this code it looks as below

!function(){"use strict";function a(a,b){var c=this;c.grupoCancha=function(a){c.grupoVisible(a)?c.grupoMostrado=null:c.grupoMostrado=a},c.cargarCanchasComplejo=function(){b.obtenerCanchasComplejo().then(function(a){c.canchasComplejo=a})},c.grupoVisible=function(a){return c.grupoMostrado===a}}angular.module("example.cancha").controller("CanchaController",["$state","canchaService",a])}();

So I suggest you Angular Style Guide by John Papa.

Hope this might help you

Stick on to one pattern, ensure that the team works in the same pattern.

Hope it is helpful :).