迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > Angular >

Angular 中的组件与模块

作者:迹忆客 最近更新:2023/03/23 浏览次数:

本文将介绍 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 结果中的模块


Angular 中的组件

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

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

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

一个组件由 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 为我们的组件定义 selectortemplateUrlstyleUrls

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

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

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

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

# angular
ng generate component login

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

输出:

组件在 Angular 中的结果


结论

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

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

在 Angular 中上传文件

发布时间:2023/04/14 浏览次数:71 分类:Angular

本教程演示了如何在 Angular 中上传任何文件。我们还将介绍如何在文件上传时显示进度条,并在上传完成时显示文件上传完成消息。

Angular 2 中的复选框双向数据绑定

发布时间:2023/04/14 浏览次数:139 分类:Angular

本教程演示了如何一键标记两个复选框。这篇有 Angular 的文章将着眼于执行复选框双向数据绑定的不同方法。

在 AngularJs 中加载 spinner

发布时间:2023/04/14 浏览次数:107 分类:Angular

我们将介绍如何在请求加载时添加加载 spinner,并在 AngularJs 中加载数据时停止加载器。

在 Angular 中显示和隐藏

发布时间:2023/04/14 浏览次数:78 分类:Angular

本教程演示了 Angular 中的显示和隐藏。在开发商业应用程序时,我们需要根据用户角色或条件隐藏一些数据。我们必须根据该应用程序中的条件显示相同的数据。

在 Angular 中下载文件

发布时间:2023/04/14 浏览次数:104 分类:Angular

本教程演示了如何在 angular 中下载文件。我们将介绍如何通过单击按钮在 Angular 中下载文件并显示一个示例。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便