Structuring AngularJS Code: Injecting with Whitespace

structuring-angular-injectors

(function () {

    'use strict';

    angular.module('app').controller('editController',

            ['$scope', '$location',
    function ($scope,   $location) {

        // get crazy with your controller here ;)

    }]);

}());

Originally published at: Structuring AngularJS Code: Injecting with Whitespace

---

Dan Wahlin has a great post called Structuring AngularJS Code where he takes you through a number of patterns for ways to make your Angular code easier-to-read and more straightforward to maintain.

As he and I were reviewing code for my latest Pluralsight course he noticed something in my application that jumped out to him (in a good way) and I thought I'd share it with you.

Dependency Injection Can Be a Pain

For anyone new to dependency injection, the concept can be confusing. Even for those who are a little more seasoned, keeping track of the injected resources in an Angular controller or service and be hard to keep straight from time to time.

Consider the this code from the official Angular documentation.

One of the problems of this approach is that it's often hard to see if the string values in the array correctly line up with the variable names in the controller function. It just gets even more confusing when you need to add to the list of injected resources. This is why people like Dan suggest you construct your controllers in separate steps. While Dan's pattern adds a lot, it's still a bit difficult to keep the injection array strings synchronized with the function parameters.

Why not try a bit of whitespace?

Adding Whitespace to Clarify Dependency Injection

One of the techniques you can use to add some clarity to your controller, service, etc. declarations is to add the appropriate whitespace around the function so you can clearly see the association between injection strings and function parameters.

Consider the code above and see if you have an easier time keeping track of what's being injected into the code.

By adding just a bit more whitespace surrounding the injection you can create code that is much easier to maintain. Notice how the array declaration is indented to line up directly above the function and how there are spaces between function arguments to make them line up with the values in the array. This makes it super easy to clearly see the injection strings and arguments lined up together - and make sure they match!

Note: Just make sure you don't forget the trailing commas after controller name and the last string in the array :)

I hope this helps make your Angular code a little easier to read and maintain.