• 1. AngularJS理论与实战大漠穷秋 2014-10-251
  • 2. 我是大漠穷秋本名:章小飞 公司:ZTEsoft 职位:技术架构师 技能:Java、ActionScript/Flex、jQuery/Extjs/AngularJS... 著作:《Ext江湖》 《ActionScript3.0游戏设计基础(第二版)》 《用AngularJS开发下一代WEB应用》2
  • 3. 内容概要AngularJS简介 自己动手搭建前端自动化开发平台 实例演示AngularJS核心特性 AngularJS核心原理简析 使用AngularJS开发移动APP TDD和前端自动化测试3
  • 4. AngularJS简介4
  • 5. AngularJS 简介Misko HeverySince 2009MIT License5
  • 6. AngularJS 简介目前最新版本1.3.0 放弃了IE8 引入了单向数据绑定 删掉了一堆过时的API(据说是为了AngularJS2.0做准备)6
  • 7. 前端开发工具7
  • 8. 思考:我们需要什么样的前端开发环境?代码编辑工具 断点调试工具 版本管理工具 代码合并和混淆工具 依赖管理工具 单元测试工具 集成测试工具刀耕火种的时代已经过去,前端开发急需自动化、工业化!!!8
  • 9. AngularJS开发环境代码编辑工具---Sublime 断点调试工具---chrome+batarang 版本管理工具---git 代码合并和混淆工具---grunt 依赖管理工具---bower 单元测试工具---Karma+jasmine 集成测试工具---Protractor9
  • 10. 常见前端开发工具,请按需搭配Protractorkarma-coverage10
  • 11. 开发和调试工具---NodeJShttp://nodejs.org/11
  • 12. 代码合并和混淆工具---GruntJS文件合并 JS代码自动压缩 每次Ctrl+S的时候自动执行以上动作 还可以每次Ctrl+S自动运行单元测试、集成测试 http://www.gruntjs.org/Grunt把前端开发带入了自动化时代12
  • 13. AngularJS核心特性13
  • 14. Angular核心特性特性1:MVC 特性2:模块化与依赖注入 特性3:指令系统 特性4:双向数据绑定 ngRouter、uiRouter、AngularUI Provider、Service、Factory14
  • 15. 特性1:MVC15
  • 16. MVCViewModelController起源:1979年,Trygve Reenskaug第一次正式提出了MVC模式 Model:数据模型层 View:视图层,负责展示 Controller:业务逻辑和控制逻辑 好处:职责清晰,代码模块化 问题:为什么23中设计模式里面没有MVC?16
  • 17. 不要试图去复用Controller,一个控制器一般只负责一小块视图 不要在Controller中操作DOM,这不是控制器的职责 不要在Controller里面做数据格式化,ng有很好用的表单控件 不要在Controller里面做数据过滤操作,ng有$filter服务 一般来说,Controller是不会互相调用的,控制器之间的交互会通过事件进行 AngularJS中使用Controller的注意点17
  • 18. $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的核心是$scope18
  • 19. CreationWatcher registrationModel mutationMutation observationScope destruction$scope的生命周期19
  • 20. Sencha中的MVC实现20
  • 21. Backbone中的MVC实现http://backbonejs.org/21
  • 22. 特性2:模块化与依赖注入22
  • 23. AngularJS核心特性2---模块化Module23
  • 24. ng官方推荐的模块切分方式appcontrollersdirectivesservicesroutesfilters任何一个ng应用都是由控制器、指令、服务、路由、过滤器等有限的模块类型构成的 控制器、指令、服务、路由、过滤器分别放在一个模块里面(可借助于grunt合并) 用一个总的app模块作为入口点,它依赖其它所有模块24
  • 25. AngularJS的模块化实现25
  • 26. 模块之间的依赖---依赖注入26
  • 27. 特性3:指令系统27
  • 28. 最简单的指令28
  • 29. 复杂一些的指令29
  • 30. 指令嵌套注意:使用Angular来封装UI控件可以让代码得到大幅度简化。30
  • 31. AngularUIhttp://angular-ui.github.io/31
  • 32. ng-gridhttp://angular-ui.github.io/32
  • 33. 后台管理型UI特性分析33
  • 34. 互联网和电商型UI特性分析34
  • 35. 后台管理型系统必备的UI组件共36个,红框中为重量级组件http://miniui.com/35
  • 36. http://sencha.com/后台管理型系统必备的UI组件36
  • 37. 互联网和电商型系统必备UI组件http://gallery.kissyui.com/coms37
  • 38. 特性4:双向数据绑定38
  • 39. AngularJS核心特性4---双向数据绑定39
  • 40. AngularJS核心特性4---双向数据绑定40
  • 41. AngularJS核心特性4---双向数据绑定思考3个问题: 为什么其它所有前端框架都不实现双向数据绑定? 如果让你来实现双向数据绑定,你会怎么去实现? 双向数据绑定机制有什么潜在的问题吗? 41
  • 42. 最简单的例子42
  • 43. {{}}与ng-bind指令在脚本没有加载完成时,用户会看到{{}},界面比较丑陋 一般做法:在index.html里面使用ng-bind,其它动态加载进来的内容使用{{}}43
  • 44. 双向绑定的典型场景---表单44
  • 45. 双向数据绑定实现动画:ngAnimatehttp://css.doyoe.com/45
  • 46. 思考问题为什么大多数框架不实现双向绑定?双向绑定难在哪里? 如何进行“脏值检测”? 如何解决“振荡问题”或者“循环依赖问题”? 双向绑定有没有潜在的问题? 46
  • 47. AngularJS双向绑定的大概步骤用$watch()监控数据模型$digest()启动脏值检测触发视图变化编译指令,设置监听器定时器轮询、对象“深比较”用事件通知指令刷新视图47
  • 48. 关于双向数据绑定的一些忠告监控的表达式不要过于复杂,表达式数量不要太多 监听函数内不要有DOM操作,那样会显著降低性能 不能互相监听对方会修改的属性,以免形成交叉引用 ng默认的TTL是10次 深拷贝式的脏值检测会消耗更多内存(树形的JSON数据尤其如此)http://www.csdn.net/article/2013-09-18/2816972-AngularJS-performance-tuning-for-long-list大量数据列表的性能优化建议(核心都是尽量减少digest的次数):48
  • 49. ngRouter、uiRouter、AngularUI49
  • 50. 前端路由的概念Ajax请求不会留下History记录 用户无法直接通过URL进入应用中的指定页面 Ajax对SEO是个灾难 路由的核心是给应用定义“状态” 使用路由机制会影响到应用的整体编码方式(需要预先定义好状态) 考虑兼容性问题与“优雅降级”50
  • 51. 使用ngRoute进行视图之间的路由51
  • 52. 第三方实现的ng-router实例52
  • 53. 综合实例多层嵌套的ui-view和命名ui-view53
  • 54. Provider、Service、Factory54
  • 55. Service的概念Service都是单例的 Service由$injector负责实例化 Service在整个应用的生命周期中存在,可以用来共享数据 在需要使用的地方利用依赖注入机制注入Service 自定义的Service需要写在内置的Service后面 内置Service的命名以$符号开头,自定义Service应该避免55
  • 56. AngularJS中常用的Service56
  • 57. 创建自己的Service57
  • 58. Service、Provider、Factoryhttp://www.zhex.me/blog/2013/08/03/provider-factory-and-service-in-angularjs/Service、Provider、Factory本质上都是Provider Provider模式是“策略模式”+“抽象工厂模式”的混合体58
  • 59. 其它常用的Service:内置的共24个$compile:编译服务 $filter:数据格式化工具,内置了8个 $interval $timeout $locale $location $log $parse $http:封装了Ajaxhttp://www.ngnice.com/docs/api/ng/59
  • 60. AngularJS核心原理简析60
  • 61. AngularJS核心原理简析AngularJS的启动过程 Provider与Injector 指令的执行过程 $scope与双向数据绑定61
  • 62. AngularJS的启动过程62
  • 63. 指令的执行过程:compile与linkcompile函数的作用是对指令的模板进行转换; link的作用是在模型和视图之间建立关联,包括在元素上注册事件监听; scope在链接阶段才会被绑定到元素上,因此compile阶段操作scope会报错; 对于同一个指令的多个实例,compile只会执行一次;而link对于指令的每个实例都会执行一次; 一般情况下我们只要编写link函数就够了; 请注意,如果你编写的自定义的compile函数,自定义的link函数无效,因为compile函数应该返回一个link函数供后续处理;63
  • 64. 双向数据绑定:最简单的一维结构{ email:'253445528@qq.com', password:'20070702' }64
  • 65. 双向数据绑定:二维表格[ {index:1,firstName:'Mark',lastName:'Otto',userName:'@mdo'}, {index:2,firstName:'Jacob',lastName:'Thomton',userName:'@fat'}, {index:3,firstName:'Larry',lastName:'the Bird',userName:'@twitter'} ]65
  • 66. 双向数据绑定:Tree型结构{ root:{ name:'root', showRoot:false, children:[ { name:'Base', children:[ //... ] } //... ] } }由于ng的$digest机制和“对象深比较”机制,ng在处理Tree型结构方面性能非常差; 后面分析$digest源码的过程中会解释; 建议不要对Tree型结构使用双向数据绑定!66
  • 67. ng支持哪些类型的表达式?数学运算:+ 、- 、/ 、* 、% 比较运算:= = 、! = 、> 、< 、> = 、< = 布尔运算:& & 、| | 、! 位运算:^ 、 & 、| 对象和数组字面值:[ ] 、{ } 注意:不支持if/for/while等控制逻辑!67
  • 68. 自己动手实现双向数据绑定?如何把一个Model绑定到多个View?(观察者模式) 如何才能知道Model发生了变化?(脏值检测$watch与$digest) 如果Model是深层嵌套的结构,如何知道某个属性是不是变了?(对象深比较) 深层次的问题:A和B两个方法互相watch对方的时候,如何避免发生“振荡”?(TTL机制) 绑定的过程中如何支持表达式?($parser与$eval自制JS版的编译器,Oh NO!)http://www.html-js.com/article/186368
  • 69. 使用AngularJS开发移动APP69
  • 70. 开发移动APP的3种方式Native APPWEB APPHybrid APP70
  • 71. Native APP---优缺点运行效率高 可调用各种设备资源人力成本高 发布速度慢(AppStore确认的时间很长) 更新版本的问题(用户就是不更新!) 实现图文混排等功能有各种坑71
  • 72. 一水儿的水果机,你司有不?72
  • 73. 混乱不堪的Android平台---版本帝4个大版本,14个小版本73
  • 74. 混乱不堪的Android平台---众多品牌...74
  • 75. 混乱不堪的Android平台---各种分辨率38种屏幕尺寸75
  • 76. 混乱不堪的Android平台---众多厂商22家大型厂商+无数山寨厂商BBK(步步高)-中国 OPPO(步步高旗下)-中国 lenovo(联想)- 中国 ZTE(中兴)-中国 HUAWEI(华为)-中国 时尚安卓手机 时尚安卓手机(12张) MEIZU (魅族) - 中国 AUX(奥克斯)-中国 XIAOMI(小米公司)-中国 HTC(宏达国际电子)- 中国台湾 Acer(宏碁)-中国台湾 Motorola Mobility(摩托罗拉移动技术)- 美国 MOTOROLA(摩托罗拉)-中国 Samsung Electronics(三星电子)- 韩国 Sony Ericsson(索尼爱立信)-英国 LG Electronics(LG电子)-韩国 Lumigon (丹麦陆力更手机公司)- 丹麦 ARCHOS(爱可视)-法国 TOSHIBA(东芝)-日本 GiONEE 金立 SKYC (星天空数码)- 中国76
  • 77. WEBAPP核心思路.ipa.apk.xap打包77
  • 78. 常用打包工具:Phonegaphttp://phonegap.com/78
  • 79. 常用打包工具:Appcanhttp://www.appcan.cn/index.html79
  • 80. 常用打包工具:appceleratorhttp://www.appcelerator.com/80
  • 81. 设计开发打包一体化工具Intel XDK81
  • 82. Android打包过程npm安装Phonegap下载ADTPhonegap调用ADT打包就算开发存的WEB APP,还是要搭建原生环境的,因为要打包啊!82
  • 83. IOS打包过程npm安装Phonegap升级IOS和XCodePhonegap调用XCode打包各种Lisence,各种审核,各种矫情IOS账户和一大堆配置就算开发存的WEB APP,还是要搭建原生环境的,因为要打包啊!83
  • 84. Phonegap暴露的设备API84
  • 85. 常见WEB APP框架对比优点:技术栈统一,学习成本低 缺点:低端安卓机存在性能问题优点:各项技术架构都非常完善 缺点:学习成本高(与Extjs内核相同)优点:衍生自jQuery,性能更好 缺点:有不少坑官方没有及时填起来http://zeptojs.com/http://jquerymobile.com/85
  • 86. 常见WEB APP框架对比框架名称运行效率学习成本是否开源备注jQuery Mobile低低是低端安卓机很卡;zepto高低是体积小,只有10k; 只有内核,没有UI;Sencha Touch中高是ext-core内核,架构复杂GMU中高是来自百度ionic高高是内核是AngularJS86
  • 87. 基于AngularJS的ionichttp://ionicframework.com/87
  • 88. WEBAPP最好的案例88
  • 89. WEB APP---优缺点操作流畅程度不够(转场动画、列表滚动) 运行性能差 设备API不够89
  • 90. WEB APP---优缺点致命缺陷:运行效率太差!90
  • 91. 桌面平台上的Hybrid APP外层是一个“壳子”,内部嵌入了浏览器内核91
  • 92. 桌面平台上的Hybrid APP92
  • 93. 桌面平台上的Hybrid APP93
  • 94. 桌面平台上的Hybrid APP94
  • 95. 移动平台上的Hybrid APP95
  • 96. 移动平台上的Hybrid APP96
  • 97. 移动平台上的Hybrid APPhttp://div.io/topic/56097
  • 98. Hybrid APP架构示意图Mobile UI控件库Android 外壳IOS外壳WebViewUIWebViewView切换 通讯服务WebKit内核 HTML5/CSS3通用组件98
  • 99. WEB调用Native时序图99
  • 100. Native调用WEB时序图100
  • 101. 重要的参考资源http://luics.com/demo/d2/index.html#/101
  • 102. 关于WebKit与WebView102
  • 103. Hybrid APP---优缺点运行效率中等(切换等交互效果) 需要写一点原生代码(至少2个平台)综合了开发效率和运行效率 发版本方便103
  • 104. Hybrid APP与WEB APP的核心不同点Hybrid APP的本质是多WebView实例 WebApp本质是单WebView实例104
  • 105. TDD和前端自动化测试105
  • 106. TDD与前端自动化测试TDD简介 前端单元测试 前端集成测试106
  • 107. 单元测试runner---KarmaPivotal Labs出品 原名:Testacular 2012年开源,2013年改名Karma 发音: ['kɑrmə] (中文模拟“卡马儿”) 含义:因果报应,因缘 Karma只是一款用来跑测试用例的runner http://karma-runner.github.io/0.12/index.html107
  • 108. 单元测试工具---Jasmine发音:['dʒæzmɪn] 含义:茉莉花 作用:类似Java里面的JUnit,提供了一套语法,用来编写测试用例 http://jasmine.github.io/Jasmine四个核心概念:分组、用例、期望、匹配,分别对应Jasmine的四种函数: describe(string,function)这个函数表示分组,也就是一组测试用例。 it(string,function)这个函数表示测试用例。 expect(expression)表示期望expression这个表达式具有某个值或者具有某种行为。 to***(arg)这个函数表示匹配。108
  • 109. AngularJS专用---ProtractorProtractor是一款集成测试工具,专门为AngularJS应用而设计; Proctactor基于WebDriverJS; 原理:利用WebDriverJS,可以借助于NodeJS直接调用浏览器(IE、FF、Chrome)的接口; https://github.com/angular/protractor https://code.google.com/p/selenium/wiki/WebDriverJs请注意,Protractor是为AngularJS专门定制的工具,但是WebDriverJS是通用的109
  • 110. 一个完整的项目结构和演示110
  • 111. http://www.imooc.com/view/156111
  • 112. 脚本娃娃-AngularJS2号群112
  • 113. Keep an open heart 感谢聆听113