I've been looking at using SonarQube to do quality checking on some javascript code, but this code is written using AngularJS.

One of the SonarQube rules checks the number of lines in a function - which seems sensible - but in AngularJS, functions are used to define controllers, services and directives, and these functions can get pretty big. Conceptually, they're really more like class definitions, with other functions nested within them.

Ideally, I'd like SonarQube to check the lengths of the inner functions, and possibly the outer function with the inner ones excluded, but I don't know of any way to do this.

Has anyone else encountered this problem using SonarQube with AngularJS, or does anyone know a good solution?

I've been looking at using SonarQube to do quality checking on some javascript code, but this code is written using AngularJS.

One of the SonarQube rules checks the number of lines in a function - which seems sensible - but in AngularJS, functions are used to define controllers, services and directives, and these functions can get pretty big. Conceptually, they're really more like class definitions, with other functions nested within them.

Ideally, I'd like SonarQube to check the lengths of the inner functions, and possibly the outer function with the inner ones excluded, but I don't know of any way to do this.

Has anyone else encountered this problem using SonarQube with AngularJS, or does anyone know a good solution?

• javascript
• angularjs
• sonarqube

• I don't know anything about AngularJS but how do you differentiate outer from inner functions? Naming convention? Something else? – David RACODON - QA Consultant Commented Mar 7, 2014 at 21:34
• By "inner function", I just mean a function that's declared inside another one. In AngularJS, that's typically an anonymous function that is declared and immediately assigned as a property on the 'scope' object, which is passed to the outer function that defines the controller, service or directive in question. It would be nice if Sonar could recognise for example, that a function which does nothing other than declare and assign 10 other 100 line functions, doesn't count in itself as a 1000 line function. – Dan King Commented Mar 8, 2014 at 13:43
• See the "Simple Spicy Controller" example here (it's about half way down the page - you'll need to click the app.js button on that example to see the code), for a very simple example of how controllers are declared in AngularJS: docs.angularjs/guide/controller – Dan King Commented Mar 8, 2014 at 13:44
• OK, I see. One question though: Why these outer functions may get big? Isn't there any other way to design them? Inner functions of inner funcion? – David RACODON - QA Consultant Commented Mar 8, 2014 at 22:28
• 1 That's the pattern for using the AngularJS framework. The controller is a function whose job is to assign other functionality to the scope. For a large page or plicated control there could be a number of inner functions involved. In this situation, the controller is really acting a bit more like a class declaration. Instead of using inner functions, you could define the functions you want outside the controller before using the controller to assign them to the scope, but then these functions would be globally-scoped which isn't really what you want. – Dan King Commented Mar 8, 2014 at 23:05

1 Answer 1

One solution is to declare all your methods separately in your self-executing function.

(function(){
    var controller = function(dependency){
         //...
    },

    someDirective = function(dependency){
        //...
    },

    //Finally, your module
    module = angular.module("MyMod", []);

    module.controller("MyController", ['dependency', controller]);
    module.directive("someDirective", ['dependency', someDirective]);
}());

This definitely can be an unfortable pattern for some devs, but it's one way to break your functions into smaller pieces for SonarQube.