block includes
include ../_util-fns
- var _JavaScript = 'JavaScript';
//- Double underscore means don't escape var, use !{__var}.
- var __chaining_op = '; or ,';
- var __new_op = 'new';
- var __objectAsMap = 'object';
:marked
Our Angular application manages what the user sees and can do, achieving this through the interaction of a Component class instance (the *component*) and its user-facing template.
Angular 应用管理着用户之所见和所为，并通过 Component 类的实例（*组件*）和面向用户的模板来与用户交互。
Many of us are familiar with the component/template duality from our experience with model-view-controller (MVC) or model-view-viewmodel (MVVM). In Angular, the component plays the part of the controller/viewmodel, and the template represents the view.
从使用模型-视图-控制器 (MVC) 或模型-视图-视图模型 (MVVM) 的经验中，很多开发人员都熟悉了组件和模板这两个概念。
在 Angular 中，组件扮演着控制器或视图模型的角色，模板则扮演视图的角色。
Let’s find out what it takes to write a template for our view. We’ll cover these basic elements of template syntax:
来看看写视图的模板都需要什么。本章将覆盖模板语法中的下列基本元素：
* [HTML](#html)
[HTML](#html)
* [Interpolation](#interpolation)
[插值表达式](#interpolation)
* [Template expressions](#template-expressions)
[模板表达式](#template-expressions)
* [Template statements](#template-statements)
[模板语句](#template-statements)
* [Binding syntax](#binding-syntax)
[绑定语法](#binding-syntax)
* [Property binding](#property-binding)
[属性 (property) 绑定](#property-binding)
* [Attribute, class, and style bindings](#other-bindings)
[attribute、class 和 style 绑定](#other-bindings)
* [Event binding](#event-binding)
[事件绑定](#event-binding)
* [Two-way data binding](#two-way)
[双向数据绑定](#two-way)
* [Two-way data binding with `NgModel`](#ngModel)
[使用`NgModel`进行双向数据绑定](#ngModel)
* [Built-in directives](#directives)
[内置指令](#directives)
* [NgClass](#ngClass)
[NgClass](#ngClass)
* [NgStyle](#ngStyle)
[NgStyle](#ngStyle)
* [NgIf](#ngIf)
[NgIf](#ngIf)
* [NgSwitch](#ngSwitch)
[NgSwitch](#ngSwitch)
* [NgFor](#ngFor)
[NgFor](#ngFor)
* [* and <template>](#star-template)
[* 与 <template>](#star-template)
* [Template reference variables](#ref-vars)
[模板引用变量](#ref-vars)
* [Input and output properties](#inputs-outputs)
[输入输出属性](#inputs-outputs)
* [Template expression operators](#expression-operators)
[模板表达式操作符](#expression-operators)
* [pipe](#pipe)
[管道](#pipe)
* [safe navigation operator (?.)](#safe-navigation-operator)
[安全导航操作符 (?.)](#safe-navigation-operator)
The
demonstrates all of the syntax and code snippets described in this chapter.
p.
在线例子演示了本章中描述的所有语法和代码片段。
.l-main-section
:marked
## HTML
## HTML
HTML is the language of the Angular template.
The [QuickStart](../quickstart.html) application has a template that is pure HTML:
HTML 是 Angular 模板的语言。[快速起步](../quickstart.html)应用的模板是纯 HTML 的：
code-example(language="html" escape="html").
Hello Angular
:marked
Almost all HTML syntax is valid template syntax. The `