AngularJs学习

发表于

AngularJS基础

Angular的表达式

  • 作用域：
    属性表达式是对应于当前的作用域的，不像Javascript对应的是全局window对象。
  • 允许未定义值：
    执行表达式时，AngularJS能够允许undefined或者null，不像Javascript会抛出一个异常。
  • 没有控制结构：
    你不能在AngularJS表达式中使用“条件判断”、“循环”、“抛出异常”等控制结构。
  • 过滤器(类似unix中的管道操作符)： 你可以通过过滤器链来传递表达式的结果。例如将日期对象转变成指定的阅读友好的格式。
  • 不能定义函数
  • 不能使用正则表达式
  • 不能使用new操作符新建对象
  • 不能使用按位操作符,逗号和void关键字
    如果想使用更复杂的语句，可以在controller的函数中定义后，在view中调用该函数。
    如果想自己指定一个angular表达式，可以使用$eval函数。

作用域

Angular不使用javascript的eval函数，而使用$parse服务执行其表达式。
在Angular代码中无法直接访问window和location等全局对象。目的是为了减少全局命名空间的污染而导致的恶心的BUG。
作为替代的，可以使用$window和$location。
你也可以使用this关键字访问当前的作用域对象。

内置过滤器:

currency, date, filter, orderBy等
如何创建自定义过滤器?
->app.filter

要注意这里不是或操作符！

1
{{ greet | upperCase}}

可以通过冒号来给过滤器传递参数，比如，将123显示成带有两位小数的形式

1
123 | number:2

$event

在ngClick或ngFocus这样的指令(Directive)中可以传递$event对象。
当页面中引入了JQuery时，$event对象是JQuery Event Object。
否则，$event对象是jqLite对象。顾名思义，angularjs自己实现了一套JQuery的精简版。

一次绑定

当表达式是以::开始的场合，此表达式被视为一次绑定。也就是说在此表达式获得值（non-undifined）后，$watch函数不会再更新此表达式的值。

1
{{::name}}

一次绑定的用处

原因主要是为了减少浏览器资源的占用。

Value stabilization algorithm

此处不懂

引导程序

To be continue.

注入器

参考文章

通过injector.annotate来推测参数
使用injector.invoke来进行实例参数注入

  • angular会在定义的函数原型链中添加$inject属性，此属性中放置函数的参数名称

    1
    2
    var aController = function($scope, greet){};
    aController.$inject = ["$scope", "greet"];

  • 另一种注释方式为内联注释，这种方式的优点为在对代码进行压缩时不会收到影响。否则$scope和greet可能会被转义。

    1
    angular.module().controller("MyController", ["$scope", "greet", function($scope, greet){}]);

    注释函数用于提取指定函数的参数
    var injector = angular.injector([‘ng’]);
    injector.annotate(function($q,greeter){})

由此可见，最安全的方式为使用最下面的方式，但是此方式写起来略显繁琐。还好还有各种第三方应用的支持。
譬如可以使用ngMin来对文件进行解析并转换，他会做如下的转换。

1
2
3
4
5
angular.module().controller("MyController", function($scope, greet){});
=>
angular.module().controller("MyController", ["$scope", "greet", function($scope, greet){}]);

作用域

下面的文章写的很好，对于JavaScript的原型继承说明的很到位。
参考文章
AngularJs的四个作用域还不算完全看懂，需要实战演练和再次理解。
AngularJS存在四种作用域:

  • 普通的带原型继承的作用域
    ng-include, ng-switch, ng-controller, directive with scope: true；
  • 普通的带原型继承的，并且有赋值行为的作用域
    ng-repeat，ng-repeat为每一个迭代项创建一个普通的有原型继承的子作用域，但同时在子作用域中创建新属性存储迭代项；
  • “Isolate”作用域
    directive with scope: {…}， 该作用域没有原型继承，但可以通过’=’, ‘@’, 和 ‘&’与父作用域通信。
  • “transcluded”作用域
    directive with transclude:true，它也是普通的带原型继承的作用域，但它与“Isolate”作用域是相邻的好基友。

控制器的单体测试

使用karma进行测试，简单使用了一下，看起来很爽。等待学习。

自定义组件

指令

ngSrc标签阻止了浏览器向非法的目的地发送HTTP请求。
此句话的意思是