项目组织和命名约定

Question

这有点是每个模块组件问题的重复模块名称的后续操作.

我们已经决定遵循角度项目组织和命名约定的最佳实践建议中的建议,同时构建一个用于测量连接质量的小型内部应用程序.

这就是我们现在所拥有的:

$ 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

如您所见,有几个指令,服务,部分,单个控制器,模块声明文件以及与主题文件无关的配置和应用程序特定.这实际上变成了一堆文件,并且不易读取且易于使用.

这可能是因为我们只有一个模块并且保留了所有内容.

是不是好使用好老的面向构件的方法,并有特殊的目录中services,controllers,directives和partials这样一个简单的应用程序？这是否意味着新的"按功能组织"方法仅适用于非平凡的巨大应用程序？

Answer 1

你说你决定"遵循Angular App Structure博客文章的最佳实践建议中的建议 ",但你似乎没有遵循它......

根据推荐的方法,每个组件/功能应位于其自己的目录中(在components目录下).

由于Gil Birman指出的原因以及上述博客文章以及每个模块组件的重复模块名称中的详细说明,按功能组织目录更有意义(例如foo-feature目录包含所有指令,服务,与该特征相关的控制器,部分等,而不是按类型组织(例如,一个目录中的所有控制器,另一个目录中的所有服务)等.

在任何情况下,以上都是指导方针(更多的思维方式),而不是精确的配方或确定性算法,可以决定你在哪里放置每个文件(例如,是否会有一个components/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