紧接上节谈到再谈angularjs DI(Dependency Injection),在这里介绍关于angularjs的表达式expression。expression指的是javascript的一小片段代码,通常用于绑定(binding)例如:{{ expression }}。在angularjs中是通过$parse
service解析。
$parse用法: $parse(expression);
- 参数:javascript代码片段。
- 返回值:{function(context, locals)},表达式编译结果:
- context:嵌入表达式执行的作用于scope。
- locals:本地变量,常用于替换重写context。
- 返回值同样带有
assign
属性,允许为表达式赋值。
下面的表达式在angularjs将都是合法的表达式:
1+2
3*10 | currency
user.name
angularjs表达式vs. javascript表达式
angularjs视图表达式有点像javascript表达式,但是并不是利用javascript表达式eval()函数解析执行的,与javascript表达式区别如下:
- 所有属性都依赖于scope作用于。并不是javascript的全局作用于window。
- 表达式计算兼容处理null和undefined,而javascript则会抛出NullPointerExceptions异常。
- 没有控制流程语句,条件,循环throw。
- 过滤器,多余angularjs表达式计算结果可以通过过滤器转化格式,|表达式,如时间,货币,数字格式等。
注: 对于angularjs表达式,可以采用
方法解析执行。$eval()
Demo
html:
2
3 < html ng-app >
4
5 < head >
6
7 < script src ="http://code.angularjs.org/angular-1.0.2.min.js" ></ script >
8
9 < script src ="script.js" ></ script >
10
11 </ head >
12
13 < body >
14
15 < div ng-controller ="Cntl2" class ="expressions" >
16
17 Expression:
18
19 < input type ='text' ng-model ="expr" size ="80" />
20
21 < button ng-click ="addExp(expr)" >Evaluate </ button >
22
23 < ul >
24
25 < li ng-repeat ="expr in exprs" >
26
27 [ < a href ="" ng-click ="removeExp($index)" >X </ a > ]
28
29 < tt >{{expr}} </ tt > => < span ng-bind ="$parent.$eval(expr)" ></ span >
30
31 </ li >
32
33 </ ul >
34
35 </ div >
36
37 </ body >
38
39 </ html >
js:
2
3 var exprs = $scope.exprs = [];
4
5 $scope.expr = '3*10|currency';
6
7 $scope.addExp = function(expr) {
8
9 exprs.push(expr);
10
11 };
12
13
14
15 $scope.removeExp = function(index) {
16
17 exprs.splice(index, 1);
18
19 };
20
21 }
jsfiddle演示: http://jsfiddle.net/whitewolf/yduLt/1/
属性执行
angularjs所有的表达式执行都将依赖于一个作用于scope,不同于javascript的window全局作用域.如果你想引用全局作用于window,这必须依赖于上节的DI特性中引用$window service. 实例如下:
html:
2
3 < html ng-app >
4
5 < head >
6
7 < script src ="http://code.angularjs.org/angular-1.0.2.min.js" ></ script >
8
9 < script src ="script.js" ></ script >
10
11 </ head >
12
13 < body >
14
15 < div class ="example2" ng-controller ="Cntl1" >
16
17 Name: < input ng-model ="name" type ="text" />
18
19 < button ng-click ="greet()" >Greet </ button >
20
21 </ div >
22
23 </ body >
24
25 </ html >
js:
2
3 $scope.name = 'World';
4
5
6
7 $scope.greet = function() {
8
9 ($window.mockWindow || $window).alert('Hello ' + $scope.name);
10
11 }
12
13 }
jsfiddle演示:http://jsfiddle.net/whitewolf/MF2Ku/1/
兼容执行
如上所述:angularjs表达式计算兼容处理null和undefined不会抛出任何异常,因为这将现实处理在view显示,而javascript则会抛出NullPointerExceptions异常。例如表达式
{{a.b.c}},与其同等效果的javascript代码将是{{((a||{}).b||{}).c}}。
无控制流程
在angularjs表达式中将不存在条件,循环,throw控制流程语句。因为angularjs作为mvc或者贴近pm模式要求表现层逻辑必须包含在controller中,而不是view,view应该足够的被动。在表达式模式中都尽力将表现层不变的表现逻辑和多样易变的UI view中抽离出来,便于更好的自动化测试构建等。
过滤器(Filters)
数据仅作为一种持久化存储领域模型(表现层或者确切的成为视图模型viewmodel),当展现给用户的时候很多时候需要更友好的方式,比如时间,数字,货币格式本地化,
例如: name | uppercase ,
123 | number:2,3*10|currency。
filters支持链式写法,如何powershell或者其他操作系统外壳语言一样的管道式模型,形如
value | filter1 | filter2。
其他资源可参考本博客中其他angularjs随笔或者angularjs官方文档http://angularjs.org/。