AngularJS: Best practices

Question

I don't think this question is considered opinion-based since it is asking about best practices, but at the same time I don't think there are any industry standards for AngularJS best practices, so it's hard to avoid opinions in some cases. In other cases, one way of programming is clearly better than the other. I am not sure which category this question falls under.

I don't think there are any official AngularJS best practices. There are guidelines, and some people have released their own best practices, but I haven't stumbled upon an industry standard.

I have a question about how I'm organizing my modules and the code itself. It feels like I have a lot of small files and too many folders, even though I have broken down the app into common components and core features. It's still a relatively small application, but it's likely to grow.

The biggest question I have was how I should organize my submodules. Currently each submodule is broken down into various files, separating controllers, directives, and services. I was wondering if I should just define them all in one file, and then if the submodule gets too large, break it down again.

For instance, right now I have a module app.buttonToggle , with various files:

buttonToggle.app.js

angular.module('app.buttonToggle', []);

buttonToggleCtrl.js

angular.module('app.buttonToggle').controller('ButtonToggleCtrl', ButtonToggleCtrl);

function ButtonToggleCtrl() ...
...

buttonToggle.js

angular.module('app.buttonToggle').directive('buttonToggle', buttonToggle);

function buttonToggle() ...
...

Instead would it be better to combine them into one file?

buttonToggle.app.js

angular.module('app.buttonToggle', [])

    .controller('ButtonToggleCtrl', function() { ... })

    .directive('buttonToggle', function() { ... });

What would be the benefit of doing the latter, if any? I like how it uses less code, but is it harder to test?

Answer 1

I recommend using John Papa's style guide - it is what I use to help make these decisions and keep up with and potentially contribute to the best practices. It will help you with this issue. These style guides are becoming very popular to help you with your questions.

In this case, the community agrees you should have one component per file and use a task runner like gulp or grunt to package for shipping.

https://github.com/johnpapa/angular-styleguide

Answer 2

The main benefit here

angular.module('app.buttonToggle').controller('ButtonToggleCtrl', ButtonToggleCtrl);

is that (due to JS hoisting) controller constructor can annotated in readable manner, eg

ButtonToggleCtrl.$inject = ['...'];
function ButtonToggleCtrl(...) {

It isn't an issue when automatic annotation is used.

It is also a bit more convenient to debug named functions rather than anonymous ones, though Angular provides meaningful feedback on errors in all cases.

What would be the benefit of doing the latter, if any? I like how it uses less code, but is it harder to test?

It isn't. All of module components can be tested separately irregardless of how they were defined, as long as their definitions don't contain syntactic errors.