include ../_util-fns // #docregion intro :marked Our Angular application manages what the user sees and does through the interaction of a Component class instance (the *component*) and its user-facing template. 我们的Angular应用管理着用户之所见，并通过组件类的实例以及组件面向用户的模板来与用户交互。 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-binding) * [Attribute, class, and style bindings](#other-bindings) * [元素属性、class和style绑定](#other-bindings) * [Event binding](#event-binding) * [事件绑定](#event-binding) * [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) // #enddocregion intro .l-sub-section :marked The [live example](/resources/live-examples/template-syntax/ts/plnkr.html) demonstrates all of the syntax and code snippets described in this chapter. 这个[在线例子](/resources/live-examples/template-syntax/ts/plnkr.html)演示了本章中描述的所有语法和代码片段。 // #docregion html-1 .l-main-section :marked ## HTML ## HTML HTML is the language of the Angular template. Our [QuickStart](../quickstart.html) application had a template that was pure HTML: HTML是Angular模板的“语言”。我们的[QuickStart](../quickstart.html)应用就有一个模板是纯HTML的： // #enddocregion html-1 +makeExample('template-syntax/ts/app/app.component.html', 'my-first-app')(format=".") // #docregion html-2 :marked Almost all HTML syntax is valid template syntax. The `