探索 MEAN Stack 项目结构

在上一节中，我们设置了 MEAN stack 组件，安装了 Angular CLI，创建了一个 angular 项目，并安装了 IDE 以在 angular 项目中进行更改。现在，在本节中，我们将探索 MEAN stack 项目结构。

在 Visual Studio Code 中安装所需的扩展后，我们的项目将如下所示

我们将在项目中看到一堆子文件夹和文件。这些文件中的大多数完全用于配置，无需担心它们。

1. json 文件很有趣，因为该文件包含项目的所有依赖项和仅用于开发的依赖项。稍后我们将在此处添加一些 MongoDB 依赖项。
2. 我们还将获得用于配置 Typescript 编译的文件，我们不需要担心它。
3. 我们还将获得用于 Angular CLI 的 json 文件，我们也不需要担心它。
4. e2e 文件夹用于端到端测试，而 node_modules 存储 json 中列出的所有依赖项。
5. 在 src 文件夹中，我们的 angular 应用程序位于其中。在这里，我们将获得更多配置文件和一个 app
6. 在 -app 文件夹中，我们将编写 Angular 应用程序的实现。 Angular 使用组件，我们将在后面讨论。我们将通过从这些组件组合我们的 UI 来创建整个应用程序。

app.component.html 文件包含默认应用程序的代码，它看起来像这样

我们删除此完整代码并编写以下代码行。一旦我们替换了代码，页面将自动重新编译并重新加载。这需要我们的 ng 服务器在我们的机器中运行。

我们创建一个 单页应用程序，并在 app 文件夹中看到一个 index.html。

此 index.html 文件目前由 ng serve 提供。该文件不包含很多内容，因为我们的构建工作流程注入了脚本导入。

如果我们返回到我们的应用程序，我们可以看到我们在页面上看到的内容是 app.component.html 文件的内容。在此文件中，我们将构建我们的组件或 html 元素。在 index.html 文件中，我们在 body 部分看到一个 html 元素。它不是默认的 html 元素；它是我们的自定义组件。

最后，它检测到此 app-root 元素并将其与我们组件的内容交换。

还有另一个重要的文件名 app.module.ts。此文件对 angular 来说很重要。 Angular 认为在应用程序中，应用程序被分成模块。

在这个项目中，有一个模块，该模块定义了我们应用程序的构建块。组件不是唯一但可能是 angular 应用程序中最重要的构建块。在 app.module.ts 文件中，将有一个 ngModule，其中声明了我们的 AppComponent。这正在向 angular 注册。因此，现在 angular 知道 AppComponent。它本身只允许我们在另一个 angular 组件中使用该组件选择器，而不是在 index.html 文件中使用。通过将其添加到引导程序数组中也允许这样做。

还有另一个名为 main.ts 的文件。此文件首先执行。

Angular 组件

Angular 认为在 "组件" 中。这些组件是我们使用 angular 时必须理解的关键内容之一。本质上，我们用这些组件组合了整个页面。我们使用这些组件构建我们的应用程序，因为这样做的优势在于我们拥有用于 UI 的小巧、易于维护和管理的构建块。我们甚至可以重用它，因为某些组件在页面上出现多次。

在下一节中，我们将了解 Angular 前端，我们将通过实现来清除它的所有基础知识。