javascript AngularJS 风格指南 - Todd Motto vs John Papa vs Minko Gechev

AngularJS Style Guides - Todd Motto vs John Papa vs Minko Gechev

提问by zorza

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

我对 Angular 很陌生，我想从一开始就学习好的做法。我遇到了三个Angular 风格指南，它们似乎都很棒。我想知道哪一个最适合我采用，但我没有资格对此进行评判，因为我对大型 Angular 应用程序几乎没有经验。

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

• 托德座右铭：https: //github.com/toddmotto/angularjs-styleguide
• 约翰爸爸的：https: //github.com/johnpapa/angularjs-styleguide
• Minko Gechev 的：https: //github.com/mgechev/angularjs-style-guide

采纳答案by Tekz

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.

我已经阅读了 Motto 和 Papa 的指南，并且他们 90% 的时间都同意相同的指南和用法。座右铭简短易懂，爸爸的座右铭很长但几乎涵盖了所有内容。我认为你最好从它们中的任何一个开始（最好是较短的），当你遇到新事物时（例如：你可能一开始没有实现指令，但过了一段时间）然后去阅读指令部分。不要试图从上到下阅读所有内容，因为这可能会使您感到困惑。从最需要的开始，然后开始编写应用程序。

• 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)

• 文件结构 (Minko) - 应用程序结构 (Papa)
• IIFE（爸爸）
• 模块（座右铭，爸爸） - 模块化（爸爸）
• 控制器声明和最佳实践（格言，爸爸）
• 服务声明和最佳实践（格言，爸爸）
• 评论（座右铭，爸爸）
• 命名（爸爸）

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.

这些应该足以让您开始并使用 Angular 完成大部分开发工作，然后当您进入 Angular 的新领域时——比如说，如果您打算构建指令——然后去阅读那些指南中的那部分。否则，您只会花几天时间阅读和思考指南，而无需进行实际工作。除非您确实使用它，否则您将看不到自己实现某些东西的最佳方式，以及最佳实践背后的原因。

回答by Mikael Couzic

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)

2016 年 7 月，只有一个风格指南是关于让我们的 AngularJS 应用程序为 Angular 2 做好准备的挑战的真正最新的。那就是 Todd Motto 的风格指南。6 月份已经完成了很多返工（只需检查提交活动：https: //github.com/toddmotto/angular-styleguide/graphs/commit-activity）

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

它拥有您对 2016 年风格指南所期望的一切，包括：

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

• ES2015
• AngularJS 1.5.x
• 模块.组件()
• 单向数据流
• 有状态/无状态组件
• 等等...

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

此外，检查这个很棒的种子项目，它几乎遵循 Todd Motto 指南中的每条规则：

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

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

回答by Mikael Couzic

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 YEOMANfollows john papa sort of app structure.

根据我的说法，John papa 提供了最好的文件结构，而且YEOMAN等许多有用的框架都遵循 john papa 类型的应用程序结构。

Key features of John papa are as under :

John papa 的主要特点如下：

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.

1. 每个文件一个组件促进了更容易的单元测试和模拟。

2. 每个文件一个组件使得阅读、维护和避免与源代码控制团队发生冲突变得更加容易。

3. 每个文件一个组件可以避免隐藏的错误，这些错误在文件中组合组件时经常出现，它们可能共享变量、创建不需要的闭包或与依赖项的不需要的耦合。