Angular是一个前端开发框架。
它最初以AngularJS的形式发布，但很快被重命名为" Angular"。
Angular是一个基于TypeScript的框架。
它用于创建单页Web应用程序。
如果我们不知道什么是单页Web应用程序，则可以查看我们的"什么是Angular？
"教程 。
Angular由Google的一组开发人员开发。
公开发布后，Google还负责发布定期更新。
Angular当前是第8版，主要发布了有关HTTP模块以及BAZEL和IVY如何集成到Angular中的更改。

Angular就足够了，让我们来解决一下房间里的大象，例如：Angular组件。

什么是Angular组件？

简而言之，组件是任何Angular应用程序的基础。

Gmail是使用Angular制作的，因此是展示组件的一个很好的例子。
考虑一下我标记为单独组件的每个部分。
每个组件都是其自己HTML，CSS和TypeScript包。
通过使用组件，可以将整个页面分解为更简单的部分，可以对其进行单独编码并在以后进行集成。

通过使用组件，开发人员还可以更接近DRY协议。
组件一旦创建，便可以根据需要多次使用，从而减少了编码时间，并且也无需编写重复的代码。
现在，我们已经对Angular组件有了一个大致的了解，让我们学习如何创建它们。

如何创建一个组件？

有两种创建组件的方法

• 使用CLI

• 手动地

使用CLI创建组件

使用CLI创建组件非常容易和直接。
这是我们大多数时候将使用的方法。
要创建称为服务器的组件，可以使用以下命令：

ng generate component server

上面的命令也可以写成：

ng g c server

我们还可以在以下位置指定要创建组件的路径：

ng g c server-folder/server

以上任何命令都将创建一个称为服务器的组件。
由于它是通过有Angular的CLI创建的，因此导入和声明都是自动完成的。
如果我们出于某些原因希望手动创建组件，情况会有所不同。
让我们看看如何手动创建这些文件。

手动创建组件

在本节中，我们将手动创建服务器组件。

步骤1：在项目中的app/src下创建一个名为server的文件夹。

步骤2：在此文件夹中创建一个名为server.component.html的新文件。
我们以这种方式命名它，以便我们非常清楚所创建的文件。

步骤3：使用适当的代码填写HTML文件。
对于此示例，我们仅粘贴以下内容：

<h3>You are currently viewing the server component</h3>

步骤4：现在创建一个TypeScript文件。
右键单击该文件夹并创建一个新文件。
将其命名为server.component.ts。

步骤5：为组件创建CSS文件。
将其命名为server.component.css

步骤6：在TypeScript文件中，我们将定义组件的业务逻辑。
除此之外，还在此定义了组件的元数据。

import { Component } from '@angular/core';
@Component ({
selector: 'app-server',
templateUrl: './server.component.html',
styleUrl: [ './server.component.css' ]
})
export class ServerComponent {}

在第一行代码中，我们从核心Angular库中导入组件。
然后，我们使用组件装饰器定义组件的元数据。
在元数据中，我们首先定义选择器，这里是应用程序服务器。
要使用此组件，我们必须在HTML文件中使用<app-server> </app-server>标记。
templateUrl告诉Angular其中寻找应用程序服务器的内容，同样，stylesUrl告诉我们该特定组件的样式。

最后，我们将导出ServerComponent类，以便可以在项目的其他部分中使用该组件。
在该类中，我们可以定义我们认为适合于组件的逻辑。
步骤7：我们已经完成了组件的创建，但是我们仍然需要将我们已经创建的这个新组件告知TypeScript和Angular。
转到应用程序模块文件。
该文件的名称应为app.module.ts。
在文件中，我们将找到一个声明数组。
将ServerComponent添加到声明中。
之后，导入组件。

import { ServerComponent } from './server.component'

组件的组成

一个组件有3个主要文件。

• HTML在HTML文件中，定义组件的视图结构。

• CSS在CSS文件中，定义与组件有关的样式。

• TypeScript在TypeScript文件中，为组件定义元数据和业务逻辑。

这三个文件一起工作时，构成一个Angular分量。