组件是Angular JS应用程序的逻辑代码。一个组件包括以下内容-
- 模板 -用于呈现应用程序的视图。它包含需要在应用程序中呈现的HTML。这部分还包括绑定和指令。
- 类 -这就像用C等任何语言定义的类。它包含属性和方法。它具有用于支持视图的代码。它在TypeScript中定义。
- 元数据 -这具有为Angular类定义的额外数据。它由装饰器定义。
现在让我们转到app.component.ts文件并创建我们的第一个Angular组件。
让我们将以下代码添加到文件中,并详细查看各个方面。
类
类装饰器。该类在TypeScript中定义。该类在TypeScript中通常具有以下语法。
句法
class classname { Propertyname: PropertyType = Value}
参量
- 类名-这是要给类的名称。
- Propertyname-这是要赋予属性的名称。
- PropertyType-由于TypeScript是强类型的,因此您需要为属性指定类型。
- 值 -这是要赋予属性的值。
例
export class AppComponent { appTitle: string = 'Welcome';}
在示例中,需要注意以下几点:
- 我们正在定义一个名为AppComponent的类。
- 使用export关键字,以便该组件可以在Angular JS应用程序的其他模块中使用。
- appTitle是属性的名称。
- 该属性具有字符串类型。
- 该属性的值为“欢迎”。
模板
这是需要在应用程序中呈现的视图。
句法
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标签包含以下代码-
输出量
现在,如果我们转到浏览器并看到输出,我们将看到输出已在组件中呈现。