快速起步

TypeScript

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

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

Try this QuickStart example on Plunker without installing anything. Try it locally with the QuickStart seed and prepare for development of a real Angular application.

试试这个Plunker上的QuickStart范例。 也可以在本地使用QuickStart种子工程来为开发真实的Angular应用做好准备。

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>)

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

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',看看会怎么样。

A word about TypeScript
关于 TypeScript

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 代码,参见本指南

Next step

下一步

Start learning Angular.

开始学习 Angular.