AngularJS controller exceeding allowed complexity (SonarLint alert)

Question

AngularJS controller exceeding allowed complexity (SonarLint alert)

While utilizing SonarLint in Eclipse, I encountered an issue while working on an AngularJS application. Specifically, I was cleaning up a controller to improve readability when SonarLint flagged the following problem:

The function has a complexity of 11, exceeding the authorized limit of 10.

Here is the code snippet for the controller in question:

app.controller('LauncherCtrl', function ($scope, $http) {

    $scope.genStatus = "stopped";

    $scope.startgenerator = function() {
        $http.get('/start').success(function () {
            $scope.updateStatus();
        });
    };

    $scope.resumegenerator = function() {
        $http.get('/resume').success(function () {
            $scope.updateStatus();
        });
    };

    $scope.suspendgenerator = function() {
        $http.get('/suspend').success(function () {
            $scope.updateStatus();
        });
    };

    $scope.stopgenerator = function() {
        $http.get('/stop').success(function () {
            $scope.updateStatus();
        });
    };

    $scope.updateStatus = function() {              
        $http.get('/status').success(function (response) {
              $scope.genStatus = response.data;
        });
    };

    $scope.updateStatus();
});

I am puzzled as to why this triggered the complexity issue. The only nested functions seem to be the start/stop/resume/pause functions calling the update function. Upon careful inspection, I verified the correct syntax with brackets and parentheses as well.

javascript angularjs sonarqube complexity-theory

Answer 1

Answer №1

To simplify your code, you can create a single function:

    $scope.generatorAction = function(action) {
        $http.get('/' + action).success(function () {
            $scope.updateStatus();
        });
    };

Then you can use it like this:

$scope.generatorAction('stop');

Alternatively, you could use a service to handle your HTTP requests, which is considered a best practice.

Edit:

I follow the styleguide for my Angular applications found here: https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md

You can create a simple service for your HTTP requests like so:

(function() {
  'use strict';

  angular
    .module('yourModuleName')
    .factory('generator', generatorFactory);

  function generatorFactory($http) {

     var service = {
        start: start,
        resume: resume,
        suspend: suspend,
        stop: stop
     }

     return service;

     function start() {
        return $http.get('/start');
     }

     function resume() {
        return $http.get('/resume');
     }

     function suspend() {
        return $http.get('/suspend');
     }

     function stop() {
        return $http.get('/stop');
     }
  }

})();

Then in your controller:

app.controller('LauncherCtrl', function ($scope, generator, $http) {

    $scope.genStatus = "stopped";

    $scope.startgenerator = function() {
        generator.start().then(function () {
            $scope.updateStatus();
        });
    };

    $scope.resumegenerator = function() {
        generator.resume().then(function () {
            $scope.updateStatus();
        });
    };

    $scope.suspendgenerator = function() {
        generator.suspend().then(function () {
            $scope.updateStatus();
        });
    };

    $scope.stopgenerator = function() {
        generator.stop().then(function () {
            $scope.updateStatus();
        });
    };

    $scope.updateStatus = function() {              
        $http.get('/status').success(function (response) {
              $scope.genStatus = response.data;
        });
    };

    $scope.updateStatus();
});

At first glance, it may seem like more code and complexity, but by using a service, you make it easier to stop the generator from other pages or components simply by injecting the 'generator' service and calling generator.stop();. If the endpoint URLs ever change, you only need to update them in the service.

Answer 2

To simplify your code, you can create a single function:

    $scope.generatorAction = function(action) {
        $http.get('/' + action).success(function () {
            $scope.updateStatus();
        });
    };

Then you can use it like this:

$scope.generatorAction('stop');

Alternatively, you could use a service to handle your HTTP requests, which is considered a best practice.

Edit:

I follow the styleguide for my Angular applications found here: https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md

You can create a simple service for your HTTP requests like so:

(function() {
  'use strict';

  angular
    .module('yourModuleName')
    .factory('generator', generatorFactory);

  function generatorFactory($http) {

     var service = {
        start: start,
        resume: resume,
        suspend: suspend,
        stop: stop
     }

     return service;

     function start() {
        return $http.get('/start');
     }

     function resume() {
        return $http.get('/resume');
     }

     function suspend() {
        return $http.get('/suspend');
     }

     function stop() {
        return $http.get('/stop');
     }
  }

})();

Then in your controller:

app.controller('LauncherCtrl', function ($scope, generator, $http) {

    $scope.genStatus = "stopped";

    $scope.startgenerator = function() {
        generator.start().then(function () {
            $scope.updateStatus();
        });
    };

    $scope.resumegenerator = function() {
        generator.resume().then(function () {
            $scope.updateStatus();
        });
    };

    $scope.suspendgenerator = function() {
        generator.suspend().then(function () {
            $scope.updateStatus();
        });
    };

    $scope.stopgenerator = function() {
        generator.stop().then(function () {
            $scope.updateStatus();
        });
    };

    $scope.updateStatus = function() {              
        $http.get('/status').success(function (response) {
              $scope.genStatus = response.data;
        });
    };

    $scope.updateStatus();
});

At first glance, it may seem like more code and complexity, but by using a service, you make it easier to stop the generator from other pages or components simply by injecting the 'generator' service and calling generator.stop();. If the endpoint URLs ever change, you only need to update them in the service.

Answer 3

Answer №2

Is there a problem with this code?

You're seeking an unbiased response to a subjective inquiry. Let's consider that as the complexity of a function increases, it becomes more challenging for you or others to maintain it. This issue indicates that you've reached a point where the code may become difficult to comprehend.

Could the complexity be 11?

The method SonarQube uses to calculate complexity doesn't align perfectly with any established standards. Nonetheless, here is how it arrived at the number 11 in this case:

def login():
    username = request.form['username']
    if username == 'admin':
        return 'Hello admin!'
    else:
        return 'Invalid username'

Answer 4

Is there a problem with this code?

You're seeking an unbiased response to a subjective inquiry. Let's consider that as the complexity of a function increases, it becomes more challenging for you or others to maintain it. This issue indicates that you've reached a point where the code may become difficult to comprehend.

Could the complexity be 11?

The method SonarQube uses to calculate complexity doesn't align perfectly with any established standards. Nonetheless, here is how it arrived at the number 11 in this case:

def login():
    username = request.form['username']
    if username == 'admin':
        return 'Hello admin!'
    else:
        return 'Invalid username'

AngularJS controller exceeding allowed complexity (SonarLint alert)

Answer №1

Answer №2

Similar questions

Ways to navigate through textarea components within an iframe tag

Why aren't the divs appearing on the page?

How can an array be generated functionally using properties from an array of objects?

Merging double borders in a div using CSS is essential for creating

Is it possible to use the googleapis npm package to make a query to a googleSheet?

Addressing the issue of prolonged Electron initialization

Unable to install vue-property-decorator

Ways to pinpoint a particular division and switch its class on and off?

Difficulty understanding JavaScript sum calculations

What is the best approach to determine the value of a textbox in an array for each row of

Is sending an AJAX request to a Node.js Express application possible?

What is the method to extract information from the provided URL?

Achieving the minimum width of a table column in Material-UI

AngularJS is capable of executing conditional logic using the if/else statement

Delete one item from a group of objects[]

Implementing nested popup windows using Bootstrap

Experience the click action that comes equipped with two unique functions: the ability to effortlessly add or remove a class

Issue: parsing error, only 0 bytes out of 4344 have been successfully parsed on Node.js platform

Creating a button that redirects to an external link in CodeIgniter:

Ways to execute a GET request including all idRefs