模板语法
Angular 应用管理着用户之所见和所为，并通过 Component 类的实例（组件）和面向用户的模板交互来实现这一点。
从使用模型-视图-控制器 (MVC) 或模型-视图-视图模型 (MVVM) 的经验中，很多开发人员都熟悉了组件和模板这两个概念。 在 Angular 中，组件扮演着控制器或视图模型的角色，模板则扮演视图的角色。
这是一篇关于 Angular 模板语言的技术大全。 它解释了模板语言的基本原理，并描述了你将在文档中其它地方遇到的大部分语法。
插值与模板表达式
插值能让你把计算后的字符串合并到 HTML 元素标签之间和属性赋值语句内的文本中。模板表达式则是用来供你求出这些字符串的。
插值表达式
所谓 "插值" 是指将表达式嵌入到标记文本中。 默认情况下，插值表达式会用双花括号 {{和 }} 作为分隔符。
在下面的代码片段中，{{ currentCustomer }} 就是插值表达式的例子。
<h3>Current customer: {{ currentCustomer }}</h3>
插值表达式也可以对标签的属性进行赋值
<img src="{{itemImageUrl}}">
angular 会对括号间的数据进行求值计算，并转化成字符串
<p>1 + 1= {{1 + 1}}</p> //会生成1+1=2
插值表达式还可以调用组件中定义过的方法，进行计算求值
模板：
<p>调用表达式：getData()</p>
组件：
getData(){
return "hello world"
}
输出：
Angular 对所有双花括号中的表达式求值，把求值的结果转换成字符串，并把它们跟相邻的字符串字面量连接起来。最后，把这个组合出来的插值结果赋给元素或指令的属性。
从表面上看，你就像是在元素标签之间插入了结果并对标签的属性进行了赋值。
模板表达式
模板表达式会产生一个值，并出现在双花括号 {{ }} 中。 Angular 执行这个表达式，并把它赋值给绑定目标的属性，这个绑定目标可能是 HTML 元素、组件或指令。
{{1 + 1}} 中所包含的模板表达式是 1 + 1。 在属性绑定中会再次看到模板表达式，它出现在 = 右侧的引号中，就像这样：[property]="expression"。
在语法上，模板表达式与 JavaScript 很像。很多 JavaScript 表达式都是合法的模板表达式，但也有一些例外。
你不能使用那些具有或可能引发副作用的 JavaScript 表达式，包括：
-
赋值 (
=,+=,-=,...) -
new、typeof、instanceof等操作符。 -
使用
;或,串联起来的表达式 -
自增和自减运算符：
++和-- -
一些 ES2015+ 版本的操作符
和 JavaScript 语法的其它显著差异包括：
-
不支持位运算，比如
|和& -
新的模板表达式运算符，比如
|、?.和!。
网友评论