简洁的Angular文件夹结构，让开发过程自然轻松。
多年来参与多个 Angular 项目，我亲身经历了糟糕的设计带来的种种弊端。那些本应可扩展的项目，最终却无法扩展，代码难以阅读，并且不符合Angular 编码风格指南。幸运的是，编码风格指南已经为我们构建项目结构提供了一个起点，它包含一个共享模块和一个用于每个功能的独立模块。
在本指南中，我将更详细地介绍基于特征的方法，并解释其原因和方法。
首先，为什么设计良好的文件夹结构很重要？
- 它使我们的应用程序更加灵活。我们可以在不破坏任何现有功能的情况下添加新功能。
- 设计良好的系统应该简单易懂，易于操作。
- 它提高了测试性、可维护性和可重用性。
我喜欢将项目分成六个主要文件夹，每个文件夹都有自己的职责：core，，，，，和。featuressharedapistypesstore
核心文件夹
该文件CoreModule位于核心文件夹中，包含应用程序许多部分所需的基本服务、组件和其他功能，这些功能要么是一次性使用的组件，要么是单例使用的服务。以下是一些此类组件和服务的示例：
- 组件（页眉、页脚、导航栏、错误提示等）
- 日志服务
- 异常处理服务
- 配置服务
- 本地化服务
- 身份验证服务
- HTTP拦截器
- 卫兵
通过将此功能封装到一个模块中，我们可以集中管理依赖项并从高层次配置应用程序。
该模块CoreModule通常在应用程序的根模块中导入一次。它的组件和服务通过依赖注入提供给其他模块。
为避免意外CoreModule多次导入，请在构造函数中包含以下代码：
constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
if (parentModule) {
throw new Error(`CoreModule has already been loaded. Import it in the AppModule only.`);
}
}
核心文件夹的结构可能如下所示：
|-- core
| |-- components
| | |-- header
| | | |-- header.component.ts
| | | |-- header.component.html
| | | |-- header.component.scss
| | |-- footer
| | | |-- footer.component.ts
| | | |-- footer.component.html
| | | |-- footer.component.scss
| |-- services
| | |-- auth.service.ts
| | |-- logging.service.ts
| | |-- exception.service.ts
| |-- interceptors
| | |-- auth.interceptor.ts
| |-- guards
| | |-- auth.guard.ts
| |-- core.module.ts
共享文件夹
共享文件夹SharedModule通常包含应用程序中常用的可重用 UI 组件，例如按钮、表单字段和输入验证。它也可能包含多个模块使用的指令和管道。
开发者可以通过将这些共享组件封装在“SharedModule”中，避免跨模块的代码重复，否则会导致代码臃肿和维护问题。此外，由于所有模块都将使用相同的共享组件，因此也有助于确保用户界面的一致性。
附加说明：创建一个模块ThirdPartyModule来区分自有组件和供应商组件，例如NgbModule。该模块应导入到 中SharedModule。
共享文件夹可能如下所示：
|-- shared
| |-- components
| | |-- spinner
| | | |-- spinner.component.ts
| | | |-- spinner.component.html
| | | |-- spinner.component.scss
| | |-- modal
| | | |-- modal.component.ts
| | | |-- modal.component.html
| | | |-- modal.component.scss
| |-- directives
| | |-- highlight.directive.ts
| |-- pipes
| | |-- capitalize.pipe.ts
| |-- shared.module.ts
| |-- third-party.module.ts
功能文件夹
此文件夹包含应用程序的各项功能。每个功能都有自己的模块，其中包含组件、服务、指令、管道和其他代码，这些代码封装了应用程序功能的特定方面。
我喜欢把功能比作一块馅饼。你应该能够轻松地取下一块馅饼而不会弄得一团糟。这意味着我们的功能不应该相互依赖。
features 文件夹可能如下所示：
|-- features
| |-- products
| | |-- components
| | | |-- product-list
| | | | |-- product-list.component.ts
| | | | |-- product-list.component.html
| | | | |-- product-list.component.scss
| | | |-- product-details
| | | | |-- product-details.component.ts
| | | | |-- product-details.component.html
| | | | |-- product-details.component.scss
| | |-- product-root.component.html
| | |-- product-root.component.ts
| | |-- product-routing.module.ts
| | |-- product.module.ts
Apis文件夹
apis 文件夹用于存储与使用 RESTful API 或其他 Web 服务相关的文件。这些文件可能包括服务类、模型或接口，以及与使用 API 相关的辅助函数。
|-- apis
| |-- product.service.ts
类型文件夹
类型文件夹用于存储应用程序中使用的类型定义。
|-- types
| |-- user
| | |-- user.ts
| | |-- user-status.enum.ts
| |-- product
| | |-- product.ts
| | |-- product-type.enum.ts
存储文件夹
如果您将其用于NgRx状态管理，则 store 文件夹非常适合为管理应用程序状态提供集中位置，这有助于简化代码库并使复杂的状态交互更容易管理。
|-- store
| |-- user
| | |-- actions
| | | |-- user.actions.ts
| | |-- reducers
| | | |-- user.reducers.ts
| | |-- selectors
| | | |-- user.selectors.ts
| |-- product
| | |-- actions
| | | |-- product.actions.ts
| | |-- reducers
| | | |-- product.reducers.ts
| | |-- selectors
| | | |-- product.selectors.ts
| |-- store.module.ts
总之，Angular 世界和最佳实践都在不断发展，我们也在不断进步。一年后我会再次回来，探讨哪些方面可以改进（比如，信号机制！）。
持续学习，保持好奇心，永不停歇地编程！
如果你喜欢我的文章，想请我喝杯咖啡，可以点击这里。
文章来源：https://dev.to/vixero/a-simple-angular-folder-struct-that-makes-development-feel-natural-and-easy-241d