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?

Chris Story · Accepted Answer · 2015-09-22 18:52:26Z

4

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

edited Sep 22, 2015 at 18:52

answered Sep 22, 2015 at 18:46

Chris Story

1,1971 gold badge8 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

UltraSonja Over a year ago

That's what I used to start, but after programming I saw that no one else used to wrap any of their code in (function() { // code goes here } )();. He also breaks one of his "rules" in one of his example applications, but that could be just because it was an earlier version of what was considered to be a best practice at the time.

Chris Story Over a year ago

The temporal aspect is difficult with any amount of code. If I looked at my angular code two years ago, I would have laughed at myself but that was the common thing to see in angular documentation and posts on stackoverflow.Given it is GitHub, many people start with a guide like this, fork it, and then update based on what is best for them. I know several organizations that take that approach.

Estus Flask · Accepted Answer · 2015-09-22 19:15:52Z

The main benefit here

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

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

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.

Collectives™ on Stack Overflow

AngularJS: Best practices

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related