Correctly define the vm function within the Controller As scope

Question

Correctly define the vm function within the Controller As scope

I am a newcomer to javascript and AngularJS.

So... Maybe it's a simple question, but I've noticed two ways to define functions in javascript.

In the following controllers, pay attention to "grupoCancha" and "grupoVisible" (I included the entire script because there are other variables that need to be defined depending on 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() {
        loadCanchasComplejo();

    })();

    //function that calls the service to get the complex fields
    function loadCanchasComplejo() {
        canchaService.obtainComplexFields()
            .then(function(canchasComplejo) {
                vm.canchasComplejo = canchasComplejo;
            });
    }

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

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


}
})();

The other way is a bit odd (maybe because of my background in Java). But the function definition is quite complex:

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() {
        loadCanchasComplejo();

    })();

    //function that calls the service to get the complex fields
    function loadCanchasComplejo() {
        canchaService.obtainComplexFields()
            .then(function(canchasComplejo) {
                vm.canchasComplejo = canchasComplejo;
            });
    }

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

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


}
})();

Could someone please explain which method is better for defining functions and why? Thank you!!

javascript angularjs

Answer 1

Answer №1

There are multiple approaches to writing Java Script, but it's best to adhere to the recommended usage outlined in the documentation. It's crucial to prioritize performance when dealing with large-scale applications. Opt for Minification to achieve optimal results.

I've made adjustments to your Controller 1, which now appears as follows:

(function() {
'use strict';
angular
    .module('example.cancha')
    .controller('CanchaController', 
                ['$state', 
                'canchaService',
                CanchaController]);

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

        canchasComplejo: [],

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

        vm.cargarCanchasComplejo=function() {
                canchaService.obtenerCanchasComplejo()
                        .then(function(canchasComplejo) {
                        vm.canchasComplejo = canchasComplejo;
                        });
        }

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

Upon minifying this code, it transforms into:

!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])}();

Considering this, I recommend following the guidelines presented in the Angular Style Guide by John Papa.

Hopefully, this guidance proves beneficial to you.

Maintain consistency in your approach and ensure unity within the team.

Wishing you success :).

Answer 2

There are multiple approaches to writing Java Script, but it's best to adhere to the recommended usage outlined in the documentation. It's crucial to prioritize performance when dealing with large-scale applications. Opt for Minification to achieve optimal results.

I've made adjustments to your Controller 1, which now appears as follows:

(function() {
'use strict';
angular
    .module('example.cancha')
    .controller('CanchaController', 
                ['$state', 
                'canchaService',
                CanchaController]);

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

        canchasComplejo: [],

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

        vm.cargarCanchasComplejo=function() {
                canchaService.obtenerCanchasComplejo()
                        .then(function(canchasComplejo) {
                        vm.canchasComplejo = canchasComplejo;
                        });
        }

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

Upon minifying this code, it transforms into:

!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])}();

Considering this, I recommend following the guidelines presented in the Angular Style Guide by John Papa.

Hopefully, this guidance proves beneficial to you.

Maintain consistency in your approach and ensure unity within the team.

Wishing you success :).

Answer 3

Answer №2

One notable contrast I observe is the utilization of vm with the last two functions in the second snippet of your code. In the first example, you have:

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

This function remains private within the scope of your controller's JavaScript code (given that your controller is immediately executed - (function(){})()) and cannot be accessed from the HTML directly. However, if you rewrite it as:

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

It becomes possible to access this function later on in the HTML using

ng-controller="CanchaController as cc"

, like so:

<div ng-controller="CanchaController as cc">
  <button ng-if="cc.grupoVisible()">SOME BUTTON</button>
</div>

Answer 4

One notable contrast I observe is the utilization of vm with the last two functions in the second snippet of your code. In the first example, you have:

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

This function remains private within the scope of your controller's JavaScript code (given that your controller is immediately executed - (function(){})()) and cannot be accessed from the HTML directly. However, if you rewrite it as:

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

It becomes possible to access this function later on in the HTML using

ng-controller="CanchaController as cc"

, like so:

<div ng-controller="CanchaController as cc">
  <button ng-if="cc.grupoVisible()">SOME BUTTON</button>
</div>

Correctly define the vm function within the Controller As scope

Answer №1

Answer №2

Similar questions

Is it not possible to call a function directly from the controller in AngularJS?

Orchard's TinyMce now supports a drop event with jQuery integration

Looking to cycle through arrays containing objects using Vue

Incorporating S3 images into vanilla JavaScript within a Django storages environment

Having trouble appending a new attribute to the Mongoose output

Mapping DOM elements to VueJS components for hydration is a key process in facilitating

Basic PHP code converted into a JavaScript function for an onSubmit event within an HTML form

Is there a method in AngularJS to compel TypeScript to generate functions instead of variables with IIFE during the compilation process with gulp-uglify?

Sketch the borders of the element (animated)

Automatically generated list items are failing to react to the active class

Guide on smoothly transitioning between 2 points within a requestAnimationframe iteration

Using the AngularJS filter within the controller to only display values that are not empty

Is Grouping Together Installed Private Modules Possible?

What is causing the click function to malfunction after selecting a second item?

Enabling or disabling a button dynamically in Ionic based on a conditional statement

Leveraging AJAX for managing multiple selection options without the need for a submit button

Wordpress team exhibition

Creating a curved edge for a shape in React Native can add a stylish and

Issue encountered when attempting to redirect following a jQuery Ajax request

Tips for showcasing an array in nested elements within an Angular mat-tree