Angular applications are made up of components. A component is the combination of an HTML template and a component class that controls a portion of the screen. Here is an example of a component that displays a simple string:
Angular 应用是由组件组成的。 组件由 HTML 模板和组件类组成,组件类控制视图。下面是一个显示简单字符串的组件:
src/app/app.component.ts
Try this
试试这个
Every component begins with an @Component
decorator
function that takes a metadata object. The metadata object describes how the HTML template and component class work together.
每个组件都以@Component
装饰器函数开始,它接受一个元数据对象参数。该元素对象描述了 HTML 模板和组件类是如何一起工作的。
The selector
property tells Angular to display the component inside a custom <my-app>
tag in the index.html
.
selector
属性为 Angular 指定了在index.html
中的自定义<my-app>
标签里显示该组件。
index.html (inside <body>)
The template
property defines a message inside an <h1>
header.
The message starts with "Hello" and ends with {{name}}
,
which is an Angular interpolation binding expression.
At runtime, Angular replaces {{name}}
with the value of the component's name
property.
Interpolation binding is one of many Angular features you'll discover in this documentation.
template
属性定义了<h1>
标题里的一条消息。
该消息以 “Hello” 开始,以 Angular 插值绑定表达式{{name}}
结束。
在运行时,Angular 用组件的name
属性值替换{{name}}
。
插值绑定是 Angular 的特征之一。你将在本文档中探索更多 Angular 的特征。
In the example, change the component class's name
property from 'Angular'
to 'World'
and see what happens.
在这个例子中,把组件类的name
属性从'Angular'
改为'World'
,看看会怎么样。
This example is written in TypeScript, a superset of JavaScript. Angular uses TypeScript because its types make it easy to support developer productivity with tooling. You can also write Angular code in JavaScript; this guide explains how.
本例是用 JavaScript 的一个超集 TypeScript 编写的。 Angular 使用 TypeScript 是因为它的类型可以帮助工具提高开发者效率。你也可以用 JavaScript 编写 Angular 代码,参见本指南。