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

Exploring the Depths of Web Scraping: A Guide to Scraping Within a Scraped Website

There is no Api.js file in the Cordova iOS platform

Which property is best suited for styling a phone number field in the MUI data grid in ReactJS?

Obtaining the NativeElement of a component in Angular 7 Jasmine unit tests

What is the best way to link multiple checkboxes to a single ng-model?

Having trouble getting Angular-UI-Select to work with a basic variable on $scope?

Using Laravel 8 to create connected dropdown menus with the power of Ajax

Emphasize sections of text within a chart

Is it possible to include additional transformations to a div element?

Can a string variable be passed as a file in a command line argument?

How can I retrieve the length of an array in vuejs?

Can you choose an option from a dropdown menu without relying on jQuery?

To ensure a rectangular image is displayed as a square, adjust its side length to match the width of the parent div dynamically

I am not getting any reply in Postman - I have sent a patch request but there is no response showing up in the Postman console

Finding the arithmetic operator and then assigning both the operator and its index to a globally accessible variable can be accomplished through a

Adding code containing various Google Maps elements in a fresh browser window using JavaScript

Using ngBindHtml in combination with angularUI in a template may yield a different outcome compared to using $sce.parseAs

Finding All Initial Table Cells in jQuery

Using the _id String in a GraphQL query to retrieve information based on the Object ID stored in a

Using Linux variables in the .env file of your Vue.js project can provide a convenient way to