发布于 2015-01-27 14:27:14 | 1226 次阅读 | 评论: 0 | 来源: PHPERZ

这里有新鲜出炉的AngularJS教程,程序狗速度看过来!

AngularJS 前端JS框架

AngularJS诞生于Google是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入,等等。


本文为大家介绍的是AngularJS表达式操作方法,AngularJS表达式类似Javascript的代码片段,通常在数据绑定中用到,写在双大括号中,如:{{表达式}}。表达式是用$parse方法来处理的。感兴趣的同学参考下。

下面是一些合法的AngularJS表达式

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

你可能会认为AngularJS视图中的表达式就是Javascript表达式,这种认识不完全对,因为AngularJS不会用Javascript的eval()函数去执行表达式。 不过除了以下几个需要区别的地方以外,你可以把AngularJS表达式看成是Javascript表达式: 

  • 属性表达式:属性表达式对应于当前的作用域,不像Javascript对应的是全局的window对象。
  • 允许未定义值:执行表达式时,AngularJS能够允许undefined或者null,不像Javascript会抛出一个异常。
  • 没有控制结构: 你不能在AngularJS表达式中使用“条件判断”、“循环”、“抛出异常”等控制结构。
  • 过滤器(类似unix中的管道操作符): 你可以通过过滤器链来传递表达式的结果。例如将日期对象转变成指定的阅读友好的格式。

如果你想要在表达式中使用标准的Javascript,那么你应该把它写成一个控制器的方法,然后在表达式中调用这个方法。如果你想在Javascript中执行AngularJS表达式,你可以使用$eval()方法。

举个例子:

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/angular-1.0.2.min.js"></script>
    <script>
      function Cntl2($scope) {
        var exprs = $scope.exprs = [];    
        $scope.expr = '3*10|currency';
        $scope.addExp = function(expr) {     //在控制器里面定义了一个addExp方法,在这个方法中,使用的是标准的js代码
             exprs.push(expr); 
        };
        $scope.removeExp = function(index) {
            exprs.splice(index, 1);
        };
    }
  </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> => <span ng-bind="$parent.$eval(expr)"></span>   //这里的expr是在js中,如果想运行此angular表达式,就调用$eval。
        </li>
      </ul>
    </div>
  </body>
</html>

属性表达式

属性表达式计算是发生在作用域中的。Javascript默认是以window为作用域的。AngularJS要使用window作用域的话得用$window来指向全局window对象。 比如说,你使用window中定义的alert()方法,在AngularJS表达式中必须写成$window.alert()才行。

示例代码:

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/angular-1.0.2.min.js"></script>
    <script>
        function Cntl1($window, $scope){
        $scope.name = 'World';
        $scope.greet = function() {
            ($window.mockWindow || $window).alert('Hello ' + $scope.name);
        }
    }
    </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>

允许未定义值

表达式在执行时是可以允许undifinednull的。 在Javascript中,计算a.b.c会抛出一个异常,如果这不是一个对象的话。但是如果大多数时候表达式是用来作数据绑定的,像下面这种形式:

{{a.b.c}}

那么表达式返回一个空值会比触发异常更有意义。因为通常我们是在等待服务器的响应,并且变量马上就会被定义和赋值。如果表达式不能容忍未定义的值,那么我们绑定的代码就不得不写成形如:

{{((a||{}).b||{}).c}}

angular在执行未定义的函数a.b.c()是,也会返回undefined,不会触发异常。

没有流程控制结构

你不能在表达式中使用控制结构。这样设计的原因在于AngularJS的设计理念之一就是逻辑代码都应该在控制器里。如果你需要使用条件、循环、或者处理异常,你就应该写在控制器的方法里。

过滤器

当你将数据呈献给用户时,你很可能需要将数据转换为阅读友好的格式。比方说,你可能需要在显示之前将一个日期对象转换为用户本地的时间格式。你可以用链式的过滤器来传递表达式,像下面这样:

name | uppercase

这个表达式会将name的值传递给uppercase这个过滤器。

链式过滤器使用的是下面这样的语法:

value | filter1 | filter2

你也可以通过冒号来给过滤器传递参数,比如,将123显示成带有两位小数的形式:123 | number:2

$符号

你可能会好奇,这个$的前缀有什么用?其实这只是一个标记AngularJS专有属性的符号,用来表示区别于开发者自定义属性的符号。

AngularJS的设计是在已有的对象上添加行为。使用$做前缀的话,就能使得开发者的代码和AngularJS的代码和谐共处了。



最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务