Angular 应用程序的文件夹结构

这意味着在我们启动 Angular 项目时会创建许多目录和文件。Angular 应用程序中的所有文件和文件夹都起什么作用？我们还将在本节讨论 Angular 应用程序如何启动。这表明当我们运行 Angular 应用程序时，首先执行哪些文件，然后是其他文件。哪个文件作为 Angular 应用程序的入口点？文件引用的位置在哪里？这意味着我们将在本教程中讨论 Angular 应用程序的整体工作流程。

本教程是我们早期教程的扩展。因此，在阅读本文之前，本文概述了使用 Angular CLI 创建 Angular 项目的精确步骤，请先阅读我们之前的文章。让我们开始在 Visual Studio Code 中打开我们在上一课中使用 Angular CLI 创建的项目。

使用 Visual Studio Code 打开项目

• 首先启动 Visual Studio Code 以打开项目。接下来，如下图所示，从上下文菜单中选择“文件”=>“打开文件夹”。
• 单击“选择文件夹”按钮后，Visual Studio Code 将启动您的项目并显示其文件夹和文件结构。
• 如您所见，它生成了许多配置文件以及三个文件夹（e2e、node_modules 和 src）。让我们更深入地探讨每个文件夹和文件的用途和用法。

e2e 文件夹

端到端测试 (e2e)。这旨在测试应用程序在生产服务器上部署后的用户行为，而不是测试应用程序的功能（单元测试）。这意味着它将跟踪谁访问您的应用程序，谁登录，他们停留了多长时间，他们查看了多少页面，何时注销以及其他详细信息。请查看 e2e 文件夹的内容。

它不在主要的 src 文件夹中。这是因为您的应用程序和 e2e 测试是不同的。如您所见，它们有自己的 src 文件夹。

node_modules 文件夹

名为 node_modules 的文件夹包含在创建 Angular 项目时安装到应用程序中的包的文件夹。您安装的任何第三方包的文件夹也将保留在此 node_modules 文件夹中。我们将在本课程的后面学习当我们安装 JQuery 等第三方库时，此 node_modules 文件夹中如何形成 bootstrap 和 JQuery 文件夹。

请务必记住，在提交到 git 存储库或将应用程序部署到生产服务器时，不应包含此文件夹。迁移项目到新位置时也不应包含它。而是使用 npm 在新位置安装此文件夹。

src 文件夹

我们 Angular 应用程序的源文件夹位于 src 文件夹中。这意味着我们将所有应用程序的源代码放在这里。因此，我们应该只将所有必要的组件、服务类和模块放在此文件夹中。如您所见，当我们在 Angular 项目中创建 Angular 项目时，Angular 框架会自动生成大量文件。

如您所见，src 文件夹中有大量文件和子文件夹。让我们讨论 src 文件夹内每个文件和子文件夹的用途和必要性。

App 文件夹

应用程序文件夹位于此处。您想要创建的任何组件、服务或模块都必须在此 app 文件夹内创建。如您所见，默认情况下，它会生成一个模块 (app.module.ts) 和一个组件 (app.component.ts)。Angular 应用程序至少需要一个模块和一个组件。

除了这两个文件之外，还有许多其他文件，包括路由模块、HTML、CSS 和 Sass。在我们下一篇文章中，我们将更详细地讨论这些文件。

Assets 文件夹

为了构建您的应用程序，您需要复制许多静态资源，例如图像和图标。您可以将它们保存在此文件夹中。请看一下 Angular 框架自动创建的 assets 文件夹。

Environments 文件夹

此文件夹用于设置多个环境。如您在下图中所见，这里有两个文件。

此文件可用于包含特定于环境（生产或开发）的配置，例如服务器 IP 地址或数据库凭据。以下是这两个文件

• products.ts。此文件，environment.ts，用于生产环境。这是开发环境的 favicon.ico 文件。
• 在浏览器中显示的图标是图标。

index.html

此文件包含 HTML 代码的 head 和 body 部分。它作为您程序的根基，或者作为我们 Angular 应用启动的起点。

main.ts 文件

这就是我们的 Angular 应用程序进入系统的地方。如果您曾经使用过 Java、C 或 C# 等编程语言，您可能会将其与应用程序的 main() 方法进行比较。

polyfills.ts

此文件用于浏览器配置。在使用 Angular 时，您会使用 TypeScript 编写代码。编译器使用 Polyfills.ts 文件将您的 TypeScript 代码编译成特定的 JavaScript 函数，以便各种浏览器可以解析它。

polyfill.ts 文件导入的必要脚本对于执行 Angular 应用程序至关重要。Angular 框架使用 TypeScript 的新 JavaScript 功能，而这些功能在大多数浏览器当前支持的 JavaScript 版本中并不存在。

.editorconfig 文件

基本上，此文件用于配置团队环境。多个开发人员可以实时处理同一个项目。此外，不同的开发人员在声明变量、类、样式、字符大小、长度等时可能遵循不同的编码标准。但最终，为了创建最终结果，我们必须合并每个开发人员的代码。由于每个开发人员编写代码的标准集不同，因此可能会导致某些错误或笨拙的代码。editorconfig 文件用于解决此问题，该文件定义了开发人员在团队中工作时必须遵循的标准准则。

此外，此文件只能由经理或团队负责人访问，他们负责制定规则；开发人员无权访问。如果您打开 editorconfig 文件，将获得以下规则。

只有当组件按照规则开发时，您的组件才会被构建。

.gitignore 文件：您必须在此文件中包含您希望忽略并添加到 git 存储库中的文件。

angular.json 文件

从 angular 6 开始，angular.json 已取代 angular-cli.json。这意味着如果您使用的是 Angular 5 或更早版本，您将找到 angular-cli.json 文件而不是此文件。

browserslist

Autoprefixer 目前使用此文件来修改 CSS，使其能够与指定的浏览器兼容。

• karma.config.js 和 test.ts
• 基本上，我们使用这两个文件进行测试。

用于配置测试环境的 Karma 配置文件称为 test.ts。测试人员将在该文件中为项目的测试编写单元测试用例。

测试用例，或 Karma 配置，保存在 karma.config.js 文件中。它提供了一个编写单元测试的选项。测试运行程序 Karma 使用 Jasmine 作为框架。Angular 团队开发了用于创建单元测试的框架和测试器。

Package-lock.json

当 npm 对 package.json 或 node_modules 树进行更改时，package-lock.json 文件会自动创建。换句话说，npm install 会生成 package.lock.json。package.json

每个 npm 项目都必须有此文件。它包含基本项目信息（名称、描述、许可证等）、可用命令、依赖项（应用程序正常运行所需的包）以及开发依赖项（同样，一组应用程序所需的包，但仅在开发阶段需要，即，我们仅在开发过程中需要 Angular CLI 来构建最终包，但生产中不再使用它）。

README.md 文件

我们希望在 README.md 文件中为最终用户提供项目描述，以便他们能够开始有效地使用我们的应用程序。除了核心项目文档外，此文件还包含一些预填充的 CLI 命令信息。

文件 tsconfig.app.json 包含有关您的应用程序应如何编译的配置信息。它在编译过程中使用。

tsconfig.json

TypeScript 配置存储在此文件中。如果一个目录有一个配置文件，那么该目录就是 TypeScript 项目的根目录，该文件也用于定义与 TypeScript 编译相关的各种设置。

tslint.json

这是一个有用的静态分析工具，用于检查我们 TypeScript 代码的可读性、可维护性和功能。在后续课程中，我们将检查它的操作。

结论

总之，Angular 应用程序推荐的文件夹结构鼓励了可伸缩性、可维护性和组织性。它遵循约定和最佳实践，以帮助开发人员更轻松地协作并加快开发过程。将职责划分为组件、服务、模型和模块等文件夹，可以方便开发人员轻松导航和管理应用程序的各个组件。

Angular 模块的使用得到了模块化框架的鼓励，该框架促进了依赖管理并保持了代码库的模块化。可以通过“assets”文件夹存储静态文件，通过“environments”文件夹进行特定于环境的自定义。第三方依赖项存储在“node_modules”文件夹中，并由 npm 进行处理。

Angular 的模块化架构以及这种标准化的文件夹结构，改善了代码组织，并鼓励开发易于扩展、可伸缩且可维护的应用程序。开发人员可以修改此结构，同时保持通用的模块化和关注点分离概念，以适应各个项目的需求。