为什么其它所有前端框架都不实现双向数据绑定.PPT

AngularJS理论与实战 大漠穷秋 2014-10-25 AngularJS简介 前端开发工具 思考：我们需要什么样的前端开发环境？ 代码编辑工具 断点调试工具 版本管理工具 代码合并和混淆工具 依赖管理工具 单元测试工具 集成测试工具 AngularJS开发环境 代码编辑工具---Sublime 断点调试工具---chrome+batarang 版本管理工具---git 代码合并和混淆工具---grunt 依赖管理工具---bower 单元测试工具---Karma+jasmine 集成测试工具---Protractor 常见前端开发工具，请按需搭配 开发和调试工具---NodeJS 代码合并和混淆工具---Grunt AngularJS核心特性 Angular核心特性 特性1：MVC 特性2：模块化与依赖注入 特性3：指令系统 特性4：双向数据绑定 ngRouter、uiRouter、AngularUI Provider、Service、Factory 特性1：MVC MVC AngularJS中使用Controller的注意点 不要试图去复用Controller，一个控制器一般只负责一小块视图 不要在Controller中操作DOM，这不是控制器的职责 不要在Controller里面做数据格式化，ng有很好用的表单控件 不要在Controller里面做数据过滤操作，ng有$filter服务 一般来说，Controller是不会互相调用的，控制器之间的交互会通过事件进行 AngularJS中MVC的核心是$scope $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()进行调试 $scope的生命周期 Sencha中的MVC实现 Backbone中的MVC实现 特性2：模块化与依赖注入 AngularJS核心特性2---模块化Module ng官方推荐的模块切分方式 任何一个ng应用都是由控制器、指令、服务、路由、过滤器等有限的模块类型构成的 控制器、指令、服务、路由、过滤器分别放在一个模块里面（可借助于grunt合并） 用一个总的app模块作为入口点，它依赖其它所有模块 AngularJS的模块化实现 模块之间的依赖---依赖注入 特性3：指令系统 最简单的指令 复杂一些的指令 指令嵌套 AngularUI ng-grid 后台管理型系统必备的UI组件 互联网和电商型系统必备UI组件 特性4：双向数据绑定 AngularJS核心特性4---双向数据绑定 AngularJS核心特性4---双向数据绑定 AngularJS核心特性4---双向数据绑定 最简单的例子 {{}}与ng-bind指令 在脚本没有加载完成时，用户会看到{{}}，界面比较丑陋 一般做法：在index.html里面使用ng-bind，其它动态加载进来的内容使用{{}} 双向绑定的典型场景---表单 双向数据绑定实现动画：ngAnimate 思考问题 AngularJS双向绑定的大概步骤 关于双向数据绑定的一些忠告 ngRouter、uiRouter、AngularUI 前端路由的概念 使用ngRoute进行视图之间的路由 第三方实现的ng-router实例 综合实例 Provider、Service、Factory Service的概念 AngularJS中常用的Service 创建自己的Service Service、Provider、Factory 其它常用的Service：内置的共24个 AngularJS核心原理简析 双向数据绑定：最简单的一维结构 双向数据绑定：二维表格 双向数据绑定：Tree型结构 ng支持哪些类型的表达式？ 自己动手实现双向数据绑定？ 使用AngularJS开发移动APP 基于AngularJS的ionic WEB APP---优缺点 移动平台上的Hybrid APP 重要的参考资源 关于WebKit与WebView Hybrid APP与WEB APP的核心不同点 TDD和前端自动化测试 TDD与前端自动化测试 单元测试runner---Karma 单元测试工具---Jasmine AngularJS