javascript - 项目组织和命名约定

Question

这有点像 Repeating module name for each module component 的后续行动问题。

我们决定遵循 Best Practice Recommendations for Angular App Structure 中的建议博客文章 Angular 项目组织和命名约定，同时构建一个用于测量连接质量的小型内部应用程序。

这就是我们目前所拥有的:

$ tree -L 1
.
├── app-config-service.js
├── app-config-service_test.js
├── app-connection-service.js
├── app-connection-service_test.js
├── app-controller.js
├── app-controller_test.js
├── app-countdown-directive.js
├── app-countdown-directive_test.js
├── app-footer-directive.js
├── app-footer-directive_test.js
├── app-footer-service.js
├── app-footer-service_test.js
├── app-math-service.js
├── app-math-service_test.js
├── app-stats-directive.js
├── app-stats-directive_test.js
├── app-status-directive.js
├── app-status-directive_test.js
├── app-status-service.js
├── app-status-service_test.js
├── app-time-directive.js
├── app-time-directive_test.js
├── app.css
├── app.js
├── bower_components
├── config.json
├── countdown.html
├── footer.html
├── img
├── index.html
├── ping
├── stats.html
└── status.html

如您所见，有几个与主题文件无关的指令、服务、部分、单个 Controller 、模块声明文件以及耦合配置和特定于应用程序的文件。这真的变成了一堆文件，而且可读性和易用性都不是很好。

这可能是因为我们只有一个模块并将所有内容都放在里面。

是否可以使用旧的面向组件的方法并为 services、controllers、directives 和 设置特殊目录？如此简单的应用程序的部分？这是否意味着新的“按功能组织”方法仅适用于非平凡的大型应用程序？

Answer 1

你说你决定“遵循 Best Practice Recommendations for Angular App Structure 博客文章中的建议”，但你似乎没有遵循它......

---

根据推荐的方法，每个组件/功能都应该在自己的目录中(在 components 目录下)。

由于Gil Birman指出的原因并且在上述 blog post 中也有详细说明以及 Repeating module name for each module component , 按功能组织目录(例如 foo-feature 目录包含与该功能相关的所有指令、服务、 Controller 、部分等)比按类型组织(例如所有 Controller 合而为一)更有意义目录，另一个中的所有服务)等

---

无论如何，以上所有都是指南(更多的是一种思维方式)，而不是可以为您决定将每个文件放在哪里的精确方法或确定性算法(例如，是否会有一个组件/lib/ 目录，服务将进入功能目录或 components/common/ 目录等)。
您需要了解这些指南(以及它们试图实现的目的/需要)并制定适合您团队风格的约定。

有时您不确定将文件放在哪里。你可以与团队进行辩论，做出决定并接受它。这是完全正常的(尤其是一开始)，但您会发现随着时间的推移，这种情况会越来越少。

---

就是说，我希望您的目录和文件结构更像那样(对哪些服务可能更通用/类似实用程序做出一些假设):

app/
|___ app.css
|___ app.js
|___ app-controller.js
|___ app-controller_test.js
|___ bower_components
|___ config.json
|___ index.html
|
|___ components/
|    |___ common/ or util/
|    |    |___ config-service.js
|    |    |___ config-service_test.js
|    |    |___ connection-service.js
|    |    |___ connection-service_test.js
|    |    |___ math-service.js
|    |    |___ math-service_test.js
|    |
|    |___ countdown/
|    |    |___ countdown.html
|    |    |___ countdown-directive.js
|    |    |___ countdown-directive_test.js
|    | 
|    |___ footer/
|    |    |___ footer.html
|    |    |___ footer-directive.js
|    |    |___ footer-directive_test.js
|    |    |___ footer-service.js
|    |    |___ footer-service_test.js
|    |
|    |___ img/
|    |    |___ ...
|    |
|    |___ stats/
|    |    |___ stats.html
|    |    |___ stats-directive.js
|    |    |___ stats-directive_test.js
|    | 
|    |___ status/
|    |    |___ status.html
|    |    |___ status-directive.js
|    |    |___ status-directive_test.js
|    |    |___ status-service.js
|    |    |___ status-service_test.js
|    |
|    |___ time/
|         |___ time-directive.js
|         |___ time-directive_test.js
|
|___ misc/
     |___ ping