Skip to content

Instantly share code, notes, and snippets.

@sycobuny
Last active June 10, 2016 22:32
Show Gist options
  • Save sycobuny/4dbf02c618ed72a74dd1d5d514719c09 to your computer and use it in GitHub Desktop.
Save sycobuny/4dbf02c618ed72a74dd1d5d514719c09 to your computer and use it in GitHub Desktop.
Puzzling out some left-ambiguous angular style guide recommendations

So, in the IIFE section of the angular styleguide, it suggests using function expressions to encapsulate angular component definitions inside of a function expression in order to keep the logic easy to understand while also keeping the global namespace clear.

And, later in the document, it has a more complete example including putting binding members of a controller at the top of a function defining a component. It shows that, inside of this component's function, more functions are declared.

My question is, is there anything to be gained from inserting the functions containing the methods inside the body of the component, or can they similarly be extracted to the outer scope of the IIFE. This would reduce indentation, which (for those of us obsessed with keeping with the tradition of an 80-character window width) would save precious characters, and for those who don't have text editors that auto-indent (hey, they exist) it would save needless typing. Plus, we're already more-or-less assuming pretty much the entire file will be indented at least one level, do we really need the bulk of the logic for a component to be indented a second level?

Ultimately, the decision rests with any developer, and everything should get minified so in the long run it doesn't matter much. But, for my own personal curiosity, I'm wondering what the feeling is, because the style guide doesn't seem to say you shouldn't do it, but it doesn't seem to say you should either.

(function() {
angular
.module('myApp')
.controller('MyController', MyController);
MyController.$inject = ['myStuff'];
/**
* docs go here for MyController?
*/
function MyController(myStuff) {
this.oneFunction = oneFunction;
this.anotherFunction = anotherFunction;
};
/**
* docs go here for oneFunction(argOne, argTwo)?
*/
function oneFunction(argOne, argTwo) {
// do stuff
}
/**
* docs go here for anotherFunction()?
*/
function anotherFunction() {
// do more stuff
}
})();
(function() {
angular
.module('myApp')
.controller('MyController', MyController);
MyController.$inject = ['myStuff'];
/**
* docs go here for MyController?
*/
function MyController(myStuff) {
this.oneFunction = oneFunction;
this.anotherFunction = anotherFunction;
/**
* docs go here for oneFunction(argOne, argTwo)?
*/
function oneFunction(argOne, argTwo) {
// do stuff
}
/**
* docs go here for anotherFunction()?
*/
function anotherFunction() {
// do more stuff
}
};
})();
@sycobuny
Copy link
Author

Thinking after trying it on a little bit, that the somewhat-condensed.js is the better way to go, because of the availability of this (or, as the controllerAs section suggests, vm), localized to the specific controller instance:

(function() {
    angular
        .module('myApp')
        .controller('MyController', MyController);

    MyController.$inject = ['myStuff'];

    /**
     * docs go here for MyController?
     */
    function MyController(myStuff) {
        /* jshint validthis: true */
        var vm = this;

        vm.oneFunction     = oneFunction;
        vm.anotherFunction = anotherFunction;

        /**
         * docs go here for oneFunction(argOne, argTwo)?
         */
        function oneFunction(argOne, argTwo) {
            var tmp = vm.someValue;
            // do stuff with "tmp"
        }

        /**
         * docs go here for anotherFunction()?
         */
        function anotherFunction() {
            // do more stuff
        }
    };
})();

If oneFunction() didn't have access to the controller-instance-scoped vm, it wouldn't be able to access an instance variable on it, which means that the condensed form wins out for the binding capabilities.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment