Angular项目结构最佳实践

Question

这是我的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

在当前网站结构下，网站地图的组织非常清晰，我能够轻松地找到不同页面的内容。

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

你能给我一些建议吗？

- pierre

---

请查看 https://dev59.com/Za3la4cB1Zd3GeqPOYky#52634990 - Raja Rama Mohan Thavalam

Mathis Garberg有一些想法：https://itnext.io/choosing-the-right-file-structure-for-angular-in-2020-and-beyond-a53a71f7eb05 - Nilesh

Answer 1

记住，没有通用的解决方案适用于所有项目。

尽管如此，您可以使用官方的Angular Style Guide，它试图遵循按功能分组的文件夹结构。

关于应用程序结构，您必须记住保持LIFT：

构建应用程序时，请使代码定位快速，一眼识别，保持最扁平的结构，并尝试保持DRY

• Locate

请使代码定位直观、简单和快速。

• Identify

请为文件命名，以便您立即知道它包含和表示什么。

请使用描述性文件名，并将文件内容保持到一个组件中。

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

• Flat

保持尽可能扁平的文件夹结构。当一个文件夹达到七个或更多文件时，考虑创建子文件夹。考虑配置IDE以隐藏分散注意力、无关的文件，如生成的.js和.js.map文件。

尝试遵循DRY原则（不要重复自己）。但避免过度追求DRY而牺牲可读性。

---

根据您展示的结构，值得审查的一件事是遵循原则“尽可能保持扁平文件夹结构”之后的文件夹嵌套级别。这意味着应该尽可能保持结构扁平化，以便更快地定位文件。但这不是必须遵守的规则，而是应该遵守的规则。因此，如果使结构更扁平不影响当前的逻辑组织，您可能应该让它更扁平（否则不要）。请记住，这旨在改进开发过程。如果某些东西没有改善团队组织/生产力等方面，则不要使用它；如果有帮助，则使用它。

- lealceldeiro

---

扁平化文件夹更好吗？所以我应该将页面组件（如详细信息）放入另一个文件夹中。 - pierre

@pierre，你应该尽可能保持结构扁平化，这样可以更快地定位文件。但这不是必须的规则，而是一个“应该”的规则。这意味着，如果使结构更扁平化不影响您拥有的逻辑组织，那么您可能应该使其更扁平（否则您就不应该）。请记住，这旨在改善开发过程。如果您发现某些东西并没有改善团队组织/生产力等方面，那么请不要使用它；如果它有帮助，请使用它 :) - lealceldeiro

Answer 2

我喜欢这篇Medium文章推荐的结构：Angular文件夹结构，但我们公司进行了一些修改，最终得到了以下结构：

-app
  
 -shared
     -services
     -pipes
     -components
     -models

-modules
  -users
    -components
        -list
        -edit
    -models
        -users.model.ts
    -services
        -user-service.ts

    users.component.ts // this component should act like a container/smart component
    users.component.html
    users.module.ts
    users.route.ts

  -organisations
    -components
        -list
        -manage
    -models
        organisation.model.ts
    -services
        organisation.service.ts
        
    organisations.component.ts  // this component should act like a container/smart component
    organisations.component.html
    organisations.module.ts
    organisations.route.ts

-app.component.ts
-app.component.html
-app.module.ts
-app-routing.module.ts

这也提供了一种微服务架构，其中每个模块/特性都有自己的服务/依赖关系。

- Sami

---

你如何处理被多个模块使用的API路由？在所有受影响的模块服务中是否有一种方法，或者你将这些方法外包给“共享”？ - Sebastian S.

Answer 3

Angular Style Guide倾向的架构被称为“特性模块”架构，其中功能被封装在Angular模块中（带有@NgMoule装饰器的TypeScript类）。

要了解此架构，请尝试使用Angular CLI运行一些生成命令。

例如，要创建包含一些封装组件/服务的功能模块，请按顺序运行以下命令：

ng g m my-awesome-feature
ng g c my-awesome-feature/cool-component
ng g s my-awesome-feature/fancy-service

CLI会为您创建漂亮的模块结构，甚至可以自动在模块文件中声明组件！

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CoolComponentComponent } from './cool-component/cool-component.component';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [CoolComponentComponent]
})
export class MyAwesomeFeatureModule { }

- hevans900

Answer 4

我个人喜欢使用一种类似于基于URL结构和模块化架构相结合的结构。具体来说，它大致如下：

• 应用程序
  • _models
  • _services
  • _shared
    • 共享组件
    • 共享模块
  • 主页
  • 其他页面
    • 特定组件

基本上，在“_shared”中，您可以放置所有在不同页面之间共享的组件和模块，例如页脚或Material模块。您必须在_shared模块中声明或导入它们，并将它们导出。

我假设所有服务都是共享的，并在应用程序模块中提供，但是当然您可以将它们放在_shared模块或任何其他子模块中。

顺便说一句，我在它们的名称前加了一个实际的下划线，以便它们在资源管理器中浮现。这很方便，因为您知道它们总是会在那里。

- RTYX

---

我有许多枚举和模型，所以我应该将相似的类或枚举混合到单个文件中吗？ - pierre

@pierre 我不会这样做！ - lealceldeiro

你是把所有的HTML代码放在共享组件的.ts文件中还是放在主文件夹下？ - pierre

我认为组件是由三个文件组成的：ts、html和css。每个组件都在自己的文件夹中，包含这三个文件。在我看来，唯一应该单独存在的html文件是不属于任何组件的文件（index.html）。 - RTYX

Answer 5

在我的项目中，我通常选择以下结构。模块、组件和共享组件之间的区别在于，共享组件用于所有模块，而模块的组件仅与该模块相关。

例如共享组件：ModalComponent、LoaderComponent 等等...

- app - core - services（服务） - interceptors（拦截器） - guards（守卫） - models（数据模型） - helpers（辅助函数） - modules - x 模块 - components（组件） - pages（页面） - y 模块 - components（组件） - pages（页面） - shared - components（组件） - header（页头） - footer（页脚） - directives（指令） - pipes（管道）

- mr. pc_coder

Answer 6

这里是一篇来自Medium的完整文章，其中包含有关Angular项目的有用建议。

1. 使用共享模块： 简而言之，使用共享模块时： DO声明组件、管道、指令并导出它们。 DO导入FormsModule、ReactiveFormsModule和其他（第三方）所需模块。 DO将SharedModule导入到任何其他功能模块中。 DO NOT在SharedModule中提供应用程序范围的单例服务。相反，将其移至CoreModule中。 DO NOT将SharedModule导入AppModule中。

2. 使用核心模块： 简而言之，使用核心模块时： DO导入应该在应用程序中实例化一次的模块。 DO将服务放在模块中，但不要提供它们。 DO NOT声明组件、管道、指令。 DO NOT将CoreModule导入到除AppModule之外的任何其他模块中。

3. 简化您的导入：

4. 缩短相对路径

5. 使用SCSS变量

- Ezechias Kumbu Kumbu