迹忆客 专注技术分享

说有条理是程序员的核心价值观之一，一点也不为过。 除了编写干净简洁的代码外，养成使用结构良好的组件文件夹创建项目的习惯也是一种很好的做法。

Angular 项目结构的最佳实践

为什么为 Angular 项目保留一个优秀的文件夹结构是好的？

1. 保持有条理的文件夹结构将您描绘成一位经验丰富的编码员，他知道保持事物井井有条的价值。
2. 良好的结构易于阅读和维护，尤其是在共享代码或构建项目时； 它使每个人都可以轻松找到我们要处理的文件。
3. 它使检测和纠正我们应用程序中的错误变得容易。
4. 有组织的项目文件夹是构建大型应用程序的理想选择； 在这种情况下，保持组织良好的项目结构非常重要，因为我们将创建主机文件、组件和服务。试图在一堆杂乱无章的文件夹中查找特定文件可能会令人沮丧。

通常，Angular CLI 提供的默认文件夹树对于简单的应用程序应该足够了，但是在构建大型应用程序时我们如何创建可扩展的文件结构呢？

如何定义高度可扩展的项目文件夹

1. 按功能组织文件夹和子文件夹

我们创建的应用程序具有执行不同功能的不同组件； 我们应该尽量根据每个组件的特性创建文件夹。

例如，如果我们向应用程序中注入一个服务，我们应该创建一个服务文件夹； 如果我们有一个让用户登录的应用程序，我们应该创建一个登录文件夹来处理用户登录。

如果我们需要创建一些与登录文件夹直接相关的其他组件，明智的做法是在登录文件夹内创建一个子文件夹。

2. 命名文件和文件夹

在任何情况下查找文件时，我们首先查看与该文件名密切相关的文件夹名称。

如果您要查找音乐文件，我们首先要查看音乐文件夹。 同样的情况也适用于我们命名文件和组件的方式。

在文件夹中创建组件时，我们可以使用连字符样式命名文件。 例如，在待办事项列表文件夹中创建文件时，我们可以将文件命名为 edit-todo.component.ts 。

这样，如果我们想纠正错误，我们很容易重新定位文件； 它还使我们的合作者可以轻松查看我们的代码。

3. 设计平面文件夹结构

虽然为密切相关的组件创建子文件夹是一种很好的做法，但我们应该尽量保持子文件夹尽可能少。

我们应该尽可能地确保子文件夹不超过九个子文件夹，超过这个数量会使我们在组合组件时很快感到疲倦。

4. 启动

要获得高度可扩展的项目文件夹，需要考虑的另一件事是将引导逻辑放在项目应用程序的 main.ts 文件中。

避免将应用程序逻辑放在文件中。 错误处理也可以放在引导程序逻辑中。

总结

理想情况下，没有通用的方法来为 Angular 项目设置有效的文件夹结构，但可以采用上述步骤。