宜宾网站建设公司

angularjs表达式-Expression

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

创新互联从2013年创立，先为忻府等服务建站，忻府等地企业，进行企业商务咨询服务。为忻府企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

    $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.  
  2.  
  3.  
  4.  
  5.  
  6.  
  7.  
  8.  
  9.  
  10.  
  11.  
  12.  
  13.  
  14.  
  15.  
  16.  
  17. Expression:  
  18.  
  19.  
  20.  
  21. Evaluate 
  22.  
    23.  
    •  
    •  
    •  
    • [ X ]  
    •  
    • `expr` =>  
    •  
    •  
    •  
     
  24.  
 
  •  
  •  
  •  
  •  
  •  

    • 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.  

     

    $scope.removeExp = function(index) {

    exprs.splice(index, 1);

    };

    }

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

    属性执行

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

    html:

    1.  
    2.  
    3.  
    4.  
    5.  
    6.  
    7.  
    8.  
    9.  
    10.  
    11.  
    12.  
    13.  
    14.  
    15.  
    16.  
    17. Name:  
    18.  
    19. Greet 
    20.  
     
  •  
  •  
  •  
  •  
  •  

    • 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. }  
    14.  

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


    网站名称：angularjs表达式-Expression
    文章地址：http://ybzwz.com/article/jgspis.html

    其他资讯