AngularJS Style Guides - Todd Motto vs John Papa v

Question

I'm pretty new to Angular and I'd like to learn good practices from the beginning. I've come across three Angular style guides and they all seem to be great. I'd like to know which one would be best for me to adopt, but I'm in no position to be the judge on that, since I have little experience with big Angular apps.

So which one is the best? Or even if not better, then more intuitive / causing less problems during development? Maybe some of you have experience with all of them and can point out their pros and cons?

Links:

• Todd Motto's: https://github.com/toddmotto/angularjs-styleguide
• John Papa's: https://github.com/johnpapa/angularjs-styleguide
• Minko Gechev's: https://github.com/mgechev/angularjs-style-guide

Answer 1

I have gone through Motto's and Papa's guides and 90% of the time they agree on same guides and usage. Motto's is short and easy to follow, Papa's is long but covers almost everything. I think you better be start with either of them (preferably shorter one) and when you comes to new thing (ex: you may not implementing directive at first but after sometime) then go and read directives section. Don't try to read everything top to bottom as it may confuse you. Start with most needed ones you to go and start coding the application.

• file structure (Minko) - Application Structure (Papa)
• IIFE (Papa)
• modules (Motto, Papa) - Modularity (Papa)
• controller declaration and best practices (Motto, Papa)
• services declaration and best practices (Motto, Papa)
• comments (Motto, Papa)
• Naming (Papa)

These should be enough you to start and do most of your development work with Angular, then when you come to new area of angular--say if you're planning to build directive--then go and read that section on those guides. Otherwise you will just spend days reading and thinking about guides without doing actual work. Unless you do use it you won't see the best way to implement something by yourself moreover reasons behind the best practices.

Answer 2

Everyone should have long term vision. In other words, start small but keep in mind on where the app is heading down the road.

John papa provides the best file structure according to me and also many useful frameworks like YEOMAN follows john papa sort of app structure.

Key features of John papa are as under :

1. One component per file promotes easier unit testing and mocking.

2. One component per file makes it far easier to read, maintain, and avoid collisions with teams in source control.

3. One component per file avoids hidden bugs that often arise when combining components in a file where they may share variables, create unwanted closures,or unwanted coupling with dependencies.

Answer 3

In July 2016, only one style guide is really up-to-date regarding the challenge of making our AngularJS applications ready for Angular 2. And that is Todd Motto's style guide. A lot of rework has been done in June (just check the commit activity : https://github.com/toddmotto/angular-styleguide/graphs/commit-activity)

It has everything you would expect from a style guide in 2016, including :

• ES2015
• AngularJS 1.5.x
• module.component()
• one-way dataflow
• stateful/stateless components
• etc...

Also, check this awesome seed project, it follows almost every rule in Todd Motto's guidelines :

https://github.com/AngularClass/NG6-starter