介绍

你好世界！

当我们想要启动一个新的 angular 应用程序时，我们想到的主要问题之一是如何创建一个好的文件夹结构，尤其是当我们不知道应用程序将来可能会增长多少时。 在这些情况下，我总是喜欢使用文件夹结构来创建高度可扩展的应用程序。

TL;DR

src
|-- app
     |-- core
       |-- [+] guards
       |-- [+] interceptors
       |-- [+] services
       |-- core.module.ts
     |-- shared
          |-- components
              |-- header
              |-- footer
              |-- button
          |-- [+] pipes
          |-- [+] directives
          |-- [+] models     
     |-- features
       |-- home
           |-- [+] components
           |-- [+] services
           |-- home-routing.module.ts
           |-- home.module.ts
       |-- awesome-widget
           |-- [+] components
           |-- [+] services
           |-- [+] models
           |-- awesome-widget.module.ts
     app.component.html
     app.component.css
     app.component.spec.ts
     app.component.ts
     app.module.ts
     app-routing.module.ts

创建可扩展应用程序的关键

在创建文件夹结构之前，我们必须考虑一些事情

独立的小组件

每个组件都应该有其存在的理由，并且应该尽可能小。例如，如果我们创建一个组件来管理整个页面，将很难修改，因为我们将有数百行代码，但是如果我们将该页面拆分为不同的组件，则很容易维护，因为我们将有小班级和 html。

可重用组件

在一个大型应用程序中，我们会有许多具有相同功能和设计的元素（按钮、输入、标题等），因此考虑为应用程序中的每个元素创建一个组件，以便为它们提供自定义样式和避免使用全局样式。

如果您使用的是外部组件库，我建议您将这些组件包装在您自己的组件上。您可能想要更改库或创建自定义库，它会帮助您重构组件。

状态管理

如果我们想要一个高度可扩展的应用程序，状态管理是强制性的。它将帮助您处理加载时间和 API 调用。

如果我们使用 angular，NgRx 是一个可以使用的。

偷懒(延迟加载)

在构建可扩展应用程序时，Angular 中的延迟加载模块可能是最重要的关键，我们只想加载我们将要使用的内容！

创建文件夹结构

现在我们知道我们必须考虑什么，让我们从创建文件夹结构开始。

应用模块(App Module)

Angular 需要一个模块来引导应用程序。如果我们使用 Angular CLI，它会自动生成。它还导入 AppRoutingModule，其中包括应用程序的主要路由。

此 AppModule 将在 src/app 文件夹下创建。

核心模块(Core Module)

CoreModule 负责提供应用程序范围和单例服务、拦截器或防护。

该模块应由 AppModule 导入一次，并将在 src/app/core 文件夹中创建。

在 src/app/core 文件夹下，如果需要，创建一个 services/interceptors/guards 文件夹，然后我们可以为我们想要包含在这个模块中的每个 service/interceptor/guard 创建一个新文件夹。

共享模块(Shared Module)

在 SharedModule 中并包含我们想要在应用程序中共享的每个组件/管道/指令。该模块还导入了 angular 所需的模块（CommonModule、FormsModule、ReactiveFormsModule...）。

这个模块可以被每个其他想要使用共享组件/管道/指令或角度模块的模块导入。为了能够做到这一点，请记住重新导出要共享的组件/指令/管道/模块。 SharedModule 将在 src/app/shared 文件夹中创建。

在 src/app/sharedfolder 下，如果需要，创建一个 components/pipes/directives 文件夹，然后我们可以为我们想要包含在这个模块中的每个组件/管道/指令创建一个新文件夹

特性模块 (Feature Module)

对于应用程序中的每个功能，我们将创建一个新模块并将其视为具有自己文件夹结构的不同项目。

此功能模块应在 src/app/features/<feature-name> 中创建。

在每个功能模块中，我们可能包含服务、组件、模型……我们在各自的子文件夹下需要此功能

在这些模块上，如果需要，我们还包括该功能的路由模块。

最后结果

src
|-- app
     |-- core
       |-- [+] guards
       |-- [+] interceptors
       |-- [+] services
       |-- core.module.ts
     |-- shared
          |-- components
              |-- header
              |-- footer
              |-- button
          |-- [+] pipes
          |-- [+] directives
          |-- [+] models     
     |-- features
       |-- home
           |-- [+] components
           |-- [+] services
           |-- home-routing.module.ts
           |-- home.module.ts
       |-- awesome-widget
           |-- [+] components
           |-- [+] services
           |-- [+] models
           |-- awesome-widget.module.ts
     app.component.html
     app.component.css
     app.component.spec.ts
     app.component.ts
     app.module.ts
     app-routing.module.ts

构建可扩展的 Angular 应用程序的其他技巧

在这篇文章中，我写了为高度可扩展的应用程序创建一个良好的文件夹结构，但是在构建这些类型的应用程序时，我还建议执行以下操作：

• 尽量使用缓存
• 别忘了写测试
• 使用 linter 和格式化程序
• 使用适当的版本控制

结论

处理文件夹结构总是很棘手，并没有 100% 正确的方法来做这件事，这取决于你将要从事的项目，但我希望这篇文章可以帮助你构建一个很棒的 Angular 应用程序。

原文：https://medium.com/edataconsulting/high-scalable-folder-structure-in-an…

本文：http://jiagoushi.pro/node/1627