Angular 应用管理着用户的所有视图和所有的操作，并通过 Component 类的实例（组件）和面向用户的模板来与用户交互。
在 Angular 中，对于模型：视图-控制器 (MVC) 或模型-视图-视图模型 (MVVM)，组件扮演着控制器或视图模型的角色，模板则扮演视图的角色。
模版中的HTML
HTML 是 Angular 模板的语言。几乎所有的 HTML 语法都是有效的模板语法。
但是 <script> 元素，它被禁用了，以阻止脚本注入攻击的风险。（实际上，<script> 只是被忽略了。）。
有些合法的 HTML 被用在模板中是没有意义的。比如：<html>、<body> 和 <base> 元素这个舞台上中并没有扮演有用的角色。剩下的所有元素基本上就都一样用了。可以通过组件和指令来扩展模板中的 HTML 词汇。它们看上去就是新元素和属性。
1.数据绑定的第一种形式 —— 插值表达式( {{}} )
<p>My current hero is {{currentHero.name}}</p>插值表达式可以把计算后的字符串插入到 HTML 元素标签内的文本或对标签的属性进行赋值，一般来说，括号间的素材是一个模板表达式，Angular 先对它求值，再把它转换成字符串。
<p>The sum of 1 + 1 is {{1 + 1}}</p>Angular 对所有双花括号中的表达式求值，把求值的结果转换成字符串，并把它们跟相邻的字符串字面量连接起来。最后，把这个组合出来的插值结果赋给元素或指令的属性。
2.模板表达式
模板表达式产生一个值。 Angular 执行这个表达式，并把它赋值给绑定目标的属性，这个绑定目标可能是 HTML 元素、组件或指令。
{{1 + 1}} 中所包含的模板表达式是 1 + 1。 在属性绑定中会再次看到模板表达式，它出现在 = 右侧的引号中，就像这样：
[property]="expression"编写模板表达式所用的语言看起来很像 JavaScript。 很多 JavaScript 表达式也是合法的模板表达式，但不是全部。
JavaScript 中那些具有或可能引发副作用的表达式是被禁止的，包括：
-
赋值 (
=,+=,-=, ...) -
new运算符 -
使用
;或,的链式表达式 -
自增和自减运算符：
++和--
和 JavaScript 语 法的其它显著不同包括：
-
不支持位运算
|和& -
具有新的模板表达式运算符，比如
|、?.和!。
a.典型的表达式上下文就是这个组件的实例，（实例化的组件），这个实例化的组件是各种绑定值的来源。
{{title}}
<span [hidden]="isUnchanged">changed</span>b.表达式的上下文可以包括组件之外的对象。
<div *ngFor="let hero of heroes">{{hero.name}}</div>
<input #heroInput> {{heroInput.value}}表达式中的上下文变量是由模板变量、指令的上下文变量（如果有）和组件的成员叠加而成的。 如果你要引用的变量名存在于一个以上的命名空间中，那么，模板变量是最优先的，其次是指令的上下文变量，最后是组件的成员。模板表达式不能引用全局命名空间中的任何东西，比如 window 或 document。它们也不能调用 console.log 或 Math.max。 它们只能引用表达式上下文中的成员。
2.表达式指南
模版表达式在应用中非常重要，如果表达错误可能会给使整个应用崩掉。
应遵循一下原则：
1.目标单纯，对应用没有目标之外的影响
模板表达式除了目标属性的值以外，不应该改变应用的任何状态。
这条规则是 Angular “单向数据流”策略的基础。 永远不用担心读取组件值可能改变另外的显示值。 在一次单独的渲染过程中，视图应该总是稳定的。
2.执行速度要快
Angular 会在每个变更检测周期后执行模板表达式。 它们可能在每一次按键或鼠标移动后被调用。
表达式应该快速结束，否则用户就会感到拖沓，特别是在较慢的设备上。 当计算代价较高时，应该考虑缓存那些从其它值计算得出的值。
3.逻辑简单
虽然在表达式中，可以写出非常复杂的表达式，但是不建议那么做。
常规的做法是属性名或方法调用。也可以逻辑取反 (!) 。 其它情况下，应在组件中实现应用和业务逻辑，使开发和测试变得更容易
4.尽可能的保持依赖不变（幂等性）
最好使用幂等表达式，因为它没有其他影响，并且能提升 Angular 变更检测的性能。
在 Angular 的术语中，幂等的表达式应该总是返回完全相同的东西，直到某个依赖值发生改变。
在单独的一次事件循环中，被依赖的值不应该改变。 如果幂等的表达式返回一个字符串或数字，连续调用它两次，也应该返回相同的字符串或数字。 如果幂等的表达式返回一个对象（包括 Date 或 Array），连续调用它两次，也应该返回同一个对象的引用。
简单点说：在一次事件中，每次循环调用的返回结果的最好返回的是同一个类型。
3.模版语句
模板语句用来响应由绑定目标（如 HTML 元素、组件或指令）触发的事件。它出现在 = 号右侧的引号中，就像这样：
<button (click)="deleteHero()">Delete hero</button>模板语句有副作用的。 这是事件处理的关键。因为要根据用户的输入更新应用的状态。
响应事件是 Angular 中“单向数据流”的另一面。 在一次事件循环中，可以随意改变任何地方的任何东西。
和模板表达式一样，模板语句使用的语言也像 JavaScript。 模板语句解析器和模板表达式解析器有所不同，特别之处在于它支持基本赋值 (=) 和表达式链 (; 和 ,)。
然而，某些 JavaScript 语法仍然是不允许的：
-
new运算符 -
自增和自减运算符：
++和-- -
操作并赋值，例如
+=和-= -
位操作符
|和& -
管道操作符 ( | )
-
非空断言操作符（!）