快速起步

Angular 应用是由组件组成的。 组件由 HTML 模板和组件类组成，组件类控制视图。下面是一个显示简单字符串的组件:

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:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent { name = 'Angular'; }

每个组件都以@Component装饰器函数开始，它接受一个元数据对象参数。该元素对象描述了 HTML 模板和组件类是如何一起工作的。

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.

selector属性为 Angular 指定了在index.html中的自定义<my-app>标签里显示该组件。

The selector property tells Angular to display the component inside a custom <my-app> tag in the index.html.

<my-app>Loading AppComponent content here ...</my-app>

template属性定义了<h1>标题里的一条消息。 该消息以 “Hello” 开始，以 Angular 插值绑定表达式{{name}}结束。 在运行时，Angular 用组件的name属性值替换{{name}}。 插值绑定是 Angular 的特征之一。你将在本文档中探索更多 Angular 的特征。

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.

在这个例子中，把组件类的name属性从'Angular'改为'World'，看看会怎么样。

In the example, change the component class's name property from 'Angular' to 'World' and see what happens.