快速起步

TypeScript

Angular applications are made of components.

Angular 应用是由组件组成的。

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:

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

app/app.component.ts

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

You can try this out without installing anything. Open the QuickStart example on Plunkr in another tab and follow along.

无需任何安装就可以试试它。在另一个浏览器标签页打开并跟随 Plunker 上的《快速起步》例子

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.

template属性定义了<h1>标题里的一条消息。 该消息以 “Hello” 开始,以 Angular 插值绑定表达式{{name}}结束。 在运行时,Angular 用组件的name属性值替换{{name}}

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

在本例中,将组件类的name属性从'Angular'改为'World',看看会发生什么。

Interpolation binding is one of many Angular features you'll discover in this documentation.

插值绑定是 Angular 的特征之一。你将在本文档中探索更多 Angular 的特征。

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

下一步

To learn how to write a real application, your next step is to set up a local development environment and begin exploring with code. The Developer Guide shows you how.

要学习如何编写应用,你的下一步是构建本地开发环境,并开始一边编程一边探索,参见开发者指南