緊接上節談到再談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+23*10 | currencyuser.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/。