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类的实例(*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-binding)
* [Attribute, class, and style bindings](#other-bindings)
* [HTML属性、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)
The
demonstrates all of the syntax and code snippets described in this chapter.
p.
这个#[+liveExampleLink2('在线例子')]演示了本章中描述的所有语法和代码片段。
.l-main-section
:marked
## HTML
## HTML
HTML is the language of the Angular template. Our [QuickStart](../quickstart.html) application has a template that is pure HTML:
HTML是Angular模板的“语言”。我们的[“快速起步”](../quickstart.html)应用就有一个模板是纯HTML的：
code-example(language="html" escape="html").
My First Angular 2 App
:marked
Almost all HTML syntax is valid template syntax. The `