模板语法
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 语法的其它显著差异包括:
不支持位运算,比如
|
和&
新的模板表达式运算符,比如
|
、?.
和!
。