AngularJS理论与实战-火龙果软件.PPTVIP

$scope是一个POJO(Plain Old JavaScript Object) $scope提供了一些工具方法$watch()/$apply() $scope是表达式的执行环境（或者叫作用域） $scope是一个树型结构，与DOM标签平行 子$scope对象会继承父$scope上的属性和方法 每一个Angular应用只有一个根$scope对象（一般位于ng-app上） $scope可以传播事件，类似DOM事件，可以向上也可以向下 $scope不仅是MVC的基础，也是后面实现双向数据绑定的基础 可以用angular.element($0).scope()进行调试 AngularJS中MVC的核心是$scope Creation Watcher registration Model mutation Mutation observation Scope destruction $scope的生命周期 核心特性2：模块化与依赖注入 一切都是从模块开始的 ng官方推荐的模块切分方式 app controllers directives services routes filters 任何一个ng应用都是由控制器、指令、服务、路由、过滤器等有限的模块类型构成的 控制器、指令、服务、路由、过滤器分别放在一个模块里面（可借助于grunt合并） 用一个总的app模块作为入口点，它依赖其它所有模块 AngularJS的模块化实现 模块之间的依赖应该怎么做？---依赖注入 一个完整项目结构是什么样的？ npm配置项 各种基于NodeJS的工具 应用的主html文件 作为启动点的js 模块之间的依赖应该怎么做？---依赖注入 Angular的依赖注入实现 每一个Angular应用都有一个injector injector负责自动处理依赖关系、实例化对象 对用户代码来说，injector是透明的 injector会自动分析函数签名，注入所需要的对象 声明依赖关系的三种方式：/guide/di DI可以用在各种不同的地方，主要用在controller和factory中 依赖注入的核心原理 分析匹配参数名 fn.$injections=[] 使用fn.call或者apply传递需要注入的对象 /article/1980 核心特性3：双向数据绑定 最简单的例子 {{}}与ng-bind指令 在脚本没有加载完成时，用户会看到{{}}，界面比较丑陋 一般做法：在index.html里面使用ng-bind，其它动态加载进来的内容使用{{}} 双向绑定的典型场景---表单 思考问题 为什么大多数框架不实现双向绑定？双向绑定难在哪里？ 如何进行“脏值检测”？ 如何解决“振荡问题”或者“循环依赖问题”？ 双向绑定有没有潜在的问题？ AngularJs双向绑定的大概步骤 用$watch()监控数据模型 $digest()启动脏值检测 触发视图变化 编译指令，设置监听器 定时器轮询、对象“深比较” 用事件通知指令刷新视图 AngularJs双向绑定的详细解释 在编译时，Angular使用$watch()在对应的$scope上添加了监控，一旦$scope中的属性值发生变化，这里就会跟着变。（脏值检测的$digest过程） 在指令编译时，Angular对input添加了事件监控，会自动把input的值设置到$scope中的对应属性上。 AngularJs双向绑定的核心代码 关于双向数据绑定的一些忠告 监控的表达式不要过于复杂，表达式数量不要太多 监听函数内不要有DOM操作，那样会显著降低性能 不能互相监听对方会修改的属性，以免形成交叉引用 ng默认的TTL是10次 深拷贝式的脏值检测会消耗更多内存（树形的JSON数据尤其如此） /article/2013-09-18/2816972-AngularJS-performance-tuning-for-long-list 大量数据列表的性能优化建议（核心都是尽量减少digest的次数）： 路由：ngRoute与uiRouter 使用ngRoute进行视图之间的路由 第三方实现的ng-router实例 ? ? ? ? ? ? ? ? 火龙果·整理 AngularJS理论与实战 核心议题 核心议题：共11个 AnguarJS的4大核心特性演示 自己动手搭建自动化的前端开发平台 核心特性1：MVC 核心特性2：模块化与依赖注入 核心特性3：双向数据绑定 路由：ngRoute与uiRouter 核心特性4：Directive与UI控件 Service、Provider、Factory AnguarJS的4大核心特性演示 AnguarJS的4大核心特性演示 第一个例子：MVC 第二个例子：模块化与依