[Angular学习笔记]Angular模板语法

模板语法

Angular 应用管理着用户之所见和所为，并通过 Component 类的实例（组件）和面向用户的模板交互来实现这一点。

从使用模型-视图-控制器 (MVC) 或模型-视图-视图模型 (MVVM) 的经验中，很多开发人员都熟悉了组件和模板这两个概念。 在 Angular 中，组件扮演着控制器或视图模型的角色，模板则扮演视图的角色。

这是一篇关于 Angular 模板语言的技术大全。 它解释了模板语言的基本原理，并描述了你将在文档中其它地方遇到的大部分语法。

插值与模板表达式

插值能让你把计算后的字符串合并到 HTML 元素标签之间和属性赋值语句内的文本中。模板表达式则是用来供你求出这些字符串的。

插值表达式

所谓 "插值" 是指将表达式嵌入到标记文本中。 默认情况下，插值表达式会用双花括号 {{和 }} 作为分隔符。

在下面的代码片段中，{{ currentCustomer }} 就是插值表达式的例子。

Current customer: {{ currentCustomer }}

插值表达式也可以对标签的属性进行赋值

angular 会对括号间的数据进行求值计算，并转化成字符串

1 + 1= {{1 + 1}}
 //会生成1+1=2

插值表达式还可以调用组件中定义过的方法，进行计算求值

模板：
调用表达式：getData()
组件：
getData(){
  return "hello world"
}

输出：

Angular 对所有双花括号中的表达式求值，把求值的结果转换成字符串，并把它们跟相邻的字符串字面量连接起来。最后，把这个组合出来的插值结果赋给元素或指令的属性。
从表面上看，你就像是在元素标签之间插入了结果并对标签的属性进行了赋值。

模板表达式

模板表达式会产生一个值，并出现在双花括号 {{ }} 中。 Angular 执行这个表达式，并把它赋值给绑定目标的属性，这个绑定目标可能是 HTML 元素、组件或指令。

{{1 + 1}} 中所包含的模板表达式是 1 + 1。 在属性绑定中会再次看到模板表达式，它出现在 = 右侧的引号中，就像这样：[property]="expression"。

在语法上，模板表达式与 JavaScript 很像。很多 JavaScript 表达式都是合法的模板表达式，但也有一些例外。

你不能使用那些具有或可能引发副作用的 JavaScript 表达式，包括：

• 赋值 (=, +=, -=, ...)

• new、typeof、instanceof 等操作符。

• 使用 ; 或 , 串联起来的表达式

• 自增和自减运算符：++ 和 --

• 一些 ES2015+ 版本的操作符

和 JavaScript 语法的其它显著差异包括：

• 不支持位运算，比如 | 和 &

• 新的模板表达式运算符，比如 |、?. 和 !。