JavaScript基础教程之angularjs表达式-Expression-职坐标

JavaScript基础教程之angularjs表达式-Expression

沉沙 2019-07-18 来源：阅读 1036 评论 0

摘要：本篇文章探讨了JavaScript基础教程之angularjs表达式-Expression，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

本篇文章探讨了JavaScript基础教程之angularjs表达式-Expression，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

JavaScript基础教程之angularjs表达式-Expression

本文介绍关于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:

<!doctype html>  <html ng-app>  <head>  <script src=""//code.angularjs.org/angular-1.0.2.min.js""></script>  <script src=""script.js""></script>  </head>  <body>  <div ng-controller=""Cntl2"" class=""expressions"">  Expression:   <input type='text' ng-model=""expr"" size=""80""/>  <button ng-click=""addExp(expr)"">Evaluate</button>  <ul>  <li ng-repeat=""expr in exprs"">  [ <a href="""" ng-click=""removeExp($index)"">X</a> ]   <tt>`expr`</tt> =&gt; <span ng-bind=""$parent.$eval(expr)""></span>  </li>  </ul>  </div>  </body>  </html>

js:

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

$scope.removeExp = function(index) {

exprs.splice(index, 1);

};

}

属性执行

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

html:

<!doctype html>  <html ng-app>  <head>  <script src=""//code.angularjs.org/angular-1.0.2.min.js""></script>  <script src=""script.js""></script>  </head>  <body>  <div class=""example2"" ng-controller=""Cntl1"">  Name: <input ng-model=""name"" type=""text""/>  <button ng-click=""greet()"">Greet</button>  </div>  </body>  </html>

js:

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

兼容执行

如上所述：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。

本文由职坐标整理发布，学习更多的相关知识，请关注职坐标IT知识库！

web程序设计 web前端技术雷达 web前端知识体系

本文由 @沉沙发布于职坐标。未经许可，禁止转载。