Angular 中的组件与模块

1. Angular 中的模块
2. Angular 中的组件
3. 结论

本文将介绍 Angular 中的组件和模块，并讨论它们的区别。

Angular 中的模块

该模块是我们应用程序的完整功能。

例如，用户身份验证是一个完整的功能，包括用户登录、注册和身份验证（忘记密码和验证电子邮件）。因此，用户身份验证是我们应用程序的一个模块。

当我们拥有一组相互关联的功能时，就像用户身份验证一样，该模块将包含一个或多个组件、服务和点子。

例如，我们在用户身份验证中包含三个组件登录、注册和忘记密码。我们的服务将是用户身份验证中的 API 调用，而 pips 将是助手。

因此，将这些相互关联的不同功能组合在一起，就可以在我们的 Angular 应用程序中创建一个模块。

现在，让我们使用以下命令创建一个新应用程序。

# angular
ng new my-app

在 Angular 中创建我们的新应用程序后，我们将使用此命令转到我们的应用程序目录。

# angular
cd my-app

现在，让我们运行我们的应用程序来检查所有依赖项是否安装正确。

# angular
ng serve --open

然后，我们将打开 app.module.ts 文件。

# angular
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

如你在上面的代码中所见，我们在 App 模块中导入了 NgModule 和 BrowserModule。我们还导入了一个组件，AppComponent。

但是，如果我们想在我们的模块中导入更多的组件，我们可以使用声明在我们的模块中注册我们的组件。如果我们要导入另一个模块，我们可以使用 imports。

我们可以使用以下命令轻松地在 Angular 应用程序中创建新模块。

# angular
ng generate module user-auth

此命令将在 App 文件夹内创建一个新文件夹并创建一个新模块，如下所示。

输出：

Angular 中的组件

组件是为特定任务创建的一段代码。

例如，如果我们希望用户自己注册，我们可以创建一个新组件 register，它允许用户在我们的应用程序上注册。

组件可以根据需要在哪里重复使用。例如，如果我们想在 Angular 应用程序的所有网页中使用页眉和页脚，我们可以创建 header 和 footer 并将这些组件导入到我们想要使用它们的任何位置。

一个组件由 4 个文件组成：

1. 用于编写组件样式的 CSS 文件。
2. 用于编写我们组件的前端或视图的 HTML 文件。
3. 用于编写测试案例的 Specs 文件。
4. 组件文件，我们在其中编写组件的逻辑部分，其中包含函数、API 调用等。

现在，让我们使用以下命令创建一个新应用程序。

# angular
ng new my-app

在 Angular 中创建我们的新应用程序后，我们将使用此命令转到我们的应用程序目录。

# angular
cd my-app

现在，让我们运行我们的应用程序来检查所有依赖项是否安装正确。

# angular
ng serve --open

然后，我们将打开 app.component.ts 文件。

# angular
import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title = "App Component";
}

正如你在上面的代码中看到的，我们从@angular/core 导入了一个 component 方法。现在，我们可以使用刚刚导入的 component 为我们的组件定义 selector、templateUrl 和 styleUrls。

选择器是一个标签，用于在我们的 Angular 应用程序中显示我们组件的内容。

从上面的代码中，如果我们在 index.html 文件中创建标签 <app-root></app-root>，Angular 应用程序将检测该标签并将其替换为我们组件的内容。

templateUrl 用于为我们的组件定义模板。并且 styleUrls 将为我们的组件定义编写样式的 CSS 文件。

我们可以使用以下命令轻松地在 Angular 应用程序中创建新组件。

# angular
ng generate component login

此命令将为我们的组件创建 4 个带有新选择器的新文件。

输出：

结论

在本教程中，我们了解了 Angular 中的模块和组件、如何创建新组件、了解它们的方法以及它们是由什么组成的。