紧接上节谈到再谈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:

<!doctypehtml><htmlng-app><head><scriptsrc="http://code.angularjs.org/angular-1.0.2.min.js"></script><scriptsrc="script.js"></script></head><body><divng-controller="Cntl2"class="expressions">Expression: <inputtype='text'ng-model="expr"size="80"/><buttonng-click="addExp(expr)">Evaluate</button><ul><ling-repeat="exprinexprs">[<ahref=""ng-click="removeExp($index)">X</a>] <tt>`expr`</tt>=&gt;<spanng-bind="$parent.$eval(expr)"></span></li></ul></div></body></html>

js:

functionCntl2($scope){ varexprs=$scope.exprs=[]; $scope.expr='3*10|currency'; $scope.addExp=function(expr){ exprs.push(expr); };

$scope.removeExp = function(index) {

exprs.splice(index, 1);

};

}

jsfiddle演示:http://jsfiddle.net/whitewolf/yduLt/1/

属性执行

angularjs所有的表达式执行都将依赖于一个作用于scope,不同于javascript的window全局作用域.如果你想引用全局作用于window,这必须依赖于上节的DI特性中引用$window service. 实例如下:

html:

<!doctypehtml><htmlng-app><head><scriptsrc="http://code.angularjs.org/angular-1.0.2.min.js"></script><scriptsrc="script.js"></script></head><body><divclass="example2"ng-controller="Cntl1">Name:<inputng-model="name"type="text"/><buttonng-click="greet()">Greet</button></div></body></html>

js:

functionCntl1($window,$scope){ $scope.name='World'; $scope.greet=function(){ ($window.mockWindow||$window).alert('Hello'+$scope.name); } }

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/。