I’ve been wondering in the last weeks about a different approach on how we write our AngularJS stuff.

TL;DR: you could use annotations to separate your code and the framework syntax as much as possible.

Update: I’ve created a lib/node module/gulp plugin that converts the comments into AngularJS syntax ☺

— If you want to see it in action, check this project:

https://github.com/darlanalves/angular-repository

In the AngularJS world we have a module system that holds services, controllers, filters, and directives. Services have a little variation of syntax, so we also have factories, values and providers. All this stuff is essential part of the framework’s inner working, and they all have a way to be declared imperatively. Most of them, however, are not really AngularJS “things” but general concepts that we know already from MVC. The code goes like this:

var $module = angular.module('module.name', ['dependency']); $module.factory('ServiceOne', ['OtherService', function(a) {}]);

$module.filter('filterName', function() {});

AngularJS syntax is not a big deal here, but we have some things that need to be done properly to avoid problems when our code is shipped for production.

One of this things is the array syntax, as seen in the factory above. To make sure the first parameter passed in to the factory is the “OtherService”, we have to annotate it in a specific format, in this case using an array and naming the dependency as string. This is both boring and error prone, also breaking one of the fundamental laws of code: DRY (don’t repeat yourself)!

To circumvent that, we have the awesome ng-annotate project, which does it automagically. But that’s not enough, as we still have to write this imperative declarations everywhere and this code ties the entire project to AngularJS in some way.