AngularJS技术交流(基础篇)解析.ppt

AngularJs双向绑定的详细解释 在编译时，Angular使用$watch()在对应的$scope上添加了监控，一旦$scope中的属性值发生变化，这里就会跟着变。（脏值检测的$digest过程） 在指令编译时，Angular对input添加了事件监控，会自动把input的值设置到$scope中的对应属性上。 AngularJs双向绑定的核心代码 关于双向数据绑定的一些忠告 监控的表达式不要过于复杂，表达式数量不要太多 监听函数内不要有DOM操作，那样会显著降低性能 不能互相监听对方会修改的属性，以免形成交叉引用 ng默认的TTL是10次 深拷贝式的脏值检测会消耗更多内存（树形的JSON数据尤其如此） 指令 指令 指令 什么是指令 指令是AngularJS用来扩展浏览器能力的技术之一。在DOM编译期间，和HTML关联着的指令会被检测到，并且被执行。这使得指令可以为DOM指定行为，或者改变DOM的结构。 指令 指令如何被检测 第一步：编译DOM 第二步：链接指令 从ng-app开始，获取DOM节点，使用 $compile方法遍历DOM节点收集指令，将这 些指令放入一个队列中。然后逐个调用这些指 令的$compile方法，逐个返回链接函数。 这些函数会被集合在一个方法对象里。最后 $compile方法会返回这个方法对象。 调用第一步$compile返回的方法，将作用域 （scope，即数据对象）与模板链接起来。在 这些链接函数里，会对DOM模板添加监听事 件，同时建立对作用域（scope）的监听，实 现双向绑定。 将这两部分分开是 为了提高效率，以 应对ng-repeat等需 要重复产生节点的 情况，避免重复编 译。 生成链接函数集合 指令的命名规则 关于自定义指令的命名，你可以随便怎么起名字都行，官方是推荐用[命名空间-指令名称]这样的方式，像ng-controller。不过千万不要用 ng-前缀了，防止与系统自带的指令重名。另外一个需知道的地方，指令命名时用驼峰规则，使用时用-分割各单词。如：定义myDirective，使用时 像这样：my-directive。 声明指令的方式 声明指令并不是一定要创建元素，也可以创建属性、类、注释 格式如下： my-directive/ my-directive div my-directive/ div div class=“my-directive”/div !--directive:my-directive-- 创建类似的指令的时候只要在自定义指令里面指定restrict就可以，元素（E），属性（A）、类（C）、注释（M），也可以一次指定多个 例“ACEM” 内置指令 所有已ng前缀开头作为命名空间的指令都是AngularJS提供的内置指令 基础的ng属性指令 ng-href;ng-src;ng-disabled;ng-checked; ng-readonly;ng-selected;ng-class; ng-style 布尔属性 1、ng-disabled: 可以绑定的html元素 input(text,checkbox,radio,number,url, Email,submit);textarea;select;button Html 中的 disabled属性只会禁用这个输入字段，通过ng-disabled可以根据值来具体的判断，参考例子directive5-disabled.html 2、ng-readonly,ng-checked，ng-selected的使用方式跟disabled差不多这里就不多做举例了 类布尔属性 ng-href 参考例子 ：directtive7-href.html ng-href跟ng-src都能够有效的帮助重构和避免错误，因此在改进代码时强烈建议用他们来代替原来的href跟src属性？ Ng-app和ng-controller ng-app 任何具有ng-app属性的DOM元素都将被标记为$rootScope的起始点 $rootScope是作用域的起始点，任何嵌套在ng-app内的指令都会继承它 在JS中通过run方法来访问$rootScope ng-controller 作用是为嵌套在其中的指令创建一个子作用域，避免将所有的操作和模型都定义在$rootScope 用这个指令可以在一个DOM元素上放置控制器 AngularJS的优势 AngularJS的优势在哪？ 解耦 视图、逻辑解 耦，具有更 大的灵活性。 组件化 通过指令方式 可以灵活封装 html组件。 功能完整 提供完整的解 决方案。内置 丰富的服务。 利于测试 因为模块化管 理，可以对模 进行块单元测 试。 模块化 引入依赖注入 技术管理各模 块。 AngularJ