Angular 项目结构最佳实践

这是我的 Angular 项目的目录结构。 Angular 应用程序可以通过许多不同类型的组件而变得庞大。组织 Angular 应用程序的最佳实践是什么？

-app
  -layout
     -home-layout
         -header
         -menu
         -content
            -detail-page
               -left-side
                  -left-side.component.html
                  -left-side.component.ts
               -right-side
             -detail-page.component.html
             -detail-page.component.ts
         -footer
     -pipes
     -widget-features
  -material-module
  -services
  -models

结合实际结构，站点地图组织非常清晰，我可以轻松找到不同页面的内容。

但为了获得模块化架构，我想重新组织结构。

您能给我一些建议吗？

请记住，没有灵丹妙药，也没有适合所有项目的通用方法。

也就是说，你可以使用官方的角度风格指南 https://angular.io/guide/styleguide，它试图遵循按功能划分的文件夹结构 https://angular.io/guide/styleguide#folders-by-feature-structure.

关于应用结构，你必须记住LIFT https://angular.io/guide/styleguide#lift:

构建应用程序，以便您可以L快速定位代码，I确认 代码一目了然，保留F最新的结构，以及T来 干燥

• Locate

务必使定位代码直观、简单、快速。

• Identify

请为该文件命名，以便您立即知道它包含什么内容，并且 代表。

请使用文件名进行描述，并将文件的内容保存到 恰好是一个组件。

避免包含多个组件、多个服务或混合的文件。

• Flat

请尽可能长时间地保持扁平的文件夹结构。

当文件夹达到七个或更多时，考虑创建子文件夹 文件。

考虑配置 IDE 以隐藏分散注意力的不相关文件 例如生成的 .js 和 .js.map 文件。

• T尽量保持干燥

一定要保持干燥（不要重复自己）。

避免过于干燥而牺牲可读性。

根据您所显示的结构，可能值得检查的一件事是遵循以下原则的文件夹嵌套级别“尽可能长时间地保持扁平文件夹结构”.

这意味着您应该保持结构尽可能平坦，这样可以更快地找到文件。但这不是一个must规则，但是一个should一。因此，如果使结构更扁平不会影响您当前的逻辑组织，那么您可能应该使其更扁平（否则不要这样做）。

记住这旨在改进开发流程。如果某件事不能改善您的团队组织/生产力等，那么就不要使用它，如果有帮助，就使用它。