angularjs表达式-Expression

      紧接上节谈到再谈angularjs DI(Dependency Injection)，在这里介绍关于angularjs的表达式expression。expression指的是javascript的一小片段代码，通常用于绑定（binding）例如：{{ expression }}。在angularjs中是通过$parse service解析。

    $parse用法： $parse(expression);

1.      参数：javascript代码片段。
2.      返回值：{function(context, locals)}，表达式编译结果：
   1. context：嵌入表达式执行的作用于scope。
   2. locals：本地变量，常用于替换重写context。
   3. 返回值同样带有assign属性，允许为表达式赋值。

  下面的表达式在angularjs将都是合法的表达式：

1. 1+2
2. 3*10 | currency
3. user.name

angularjs表达式vs. javascript表达式

    angularjs视图表达式有点像javascript表达式，但是并不是利用javascript表达式eval()函数解析执行的，与javascript表达式区别如下：

1. 所有属性都依赖于scope作用于。并不是javascript的全局作用于window。
2. 表达式计算兼容处理null和undefined，而javascript则会抛出NullPointerExceptions异常。
3. 没有控制流程语句，条件，循环throw。
4. 过滤器，多余angularjs表达式计算结果可以通过过滤器转化格式，|表达式，如时间，货币，数字格式等。

   注： 对于angularjs表达式，可以采用$eval()方法解析执行。

Demo

html:

 1  <! doctype 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:

 1  function Cntl2($scope) {
 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 }

属性执行

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

html:

 1  <! doctype 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:

 1  function Cntl1($window, $scope){
 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/。