组件是Angular JS应用程序的逻辑代码.一个组件包含以下 :

• 模板 : 这用于呈现应用程序的视图.这包含需要在应用程序中呈现的HTML.这部分还包括绑定和指令.

• Class : 这就像用C等任何语言定义的类.它包含属性和方法.它具有用于支持视图的代码.它在TypeScript中定义.

• 元数据 : 这具有为Angular类定义的额外数据.它是用装饰器定义的.

现在让我们转到app.component.ts文件并创建我们的第一个Angular组件.

让我们将以下代码添加到文件中并查看每个方面都有详细说明.

Class

类装饰器.该类在TypeScript中定义.该类通常在TypeScript中具有以下语法.

语法

class classname {   Propertyname: PropertyType = Value}

参数

• 班级名称 : 这是给予班级的名称.

• Propertyname : 这是给予该物业的名称.

• PropertyType : 由于TypeScript是强类型的，因此您需要为该属性指定一个类型.

• 值 : 这是给予该属性的值.

示例

export class AppComponent {   appTitle: string = 'Welcome';}

在示例中，需要注意以下事项和减去;

• 我们正在定义一个名为AppComponent的类.

• 使用export关键字以便可以使用该组件在Angular JS应用程序的其他模块中.

• appTitle是该属性的名称.

• 该属性被赋予字符串类型.

• 该属性的值为"Welcome".

模板

这是需要在应用程序中呈现的视图.

语法

Template: '      class properties'

参数

• HTML代码 : 这是需要在应用程序中呈现的HTML代码.

• 类属性 : 这些是可以在模板中引用的类的属性.

示例

template: '   
      
{{appTitle}}
      
To Tutorials Point
   
'

在这个例子中，需要注意以下事项和减去;

• 我们正在定义将在我们的应用程序中呈现的HTML代码

• 我们还引用了appTitle属性来自我们班级.

元数据

这用于装饰Angular JS类及其他信息.

让我们看一下包含我们的类，模板和元数据的已完成代码.

示例

import { Component } from '@angular/core';@Component ({   selector: 'my-app',   template: ` 
      
{{appTitle}}
      
To Tutorials Point
   
 `,})export class AppComponent {   appTitle: string = 'Welcome';}

在上面的例子中，需要注意以下事项和减去;

• 我们使用import关键字从angular/core模块导入'Component'装饰器.

• 然后我们使用装饰器来定义组件.

• 该组件有一个名为"my-app"的选择器.这只是我们的自定义html标签，可以在我们的主html页面中使用.

现在，让我们转到我们的index.html我们的代码中的文件.

让我们确保body标签现在包含对组件中自定义标记的引用.因此，在上述情况下，我们需要确保body标签包含以下代码 :

输出

现在，如果我们转到浏览器并查看输出，我们将看到输出已呈现因为它在组件中.