基于AngularJS的企业应⽤用前端架构 徐飞 新浪微博：@民⼯工精髓V 企业应⽤用前端的特点 • 独占模式 • 重业务，轻视觉 • 界⾯面规整，模式单⼀一 • 键盘操作 • 逻辑复杂 • 加载速度的侧重不同 • 浏览器版本相对宽松 传统的B/S企业应⽤用前端 • B/S企业软件常⽤用的展现层技术 – HTC 在浏览器端扩展标签 业务逻辑 – 放后端⽐比放前端的多。。。 流⾏行过什么样的技术 单页应⽤用 • 传统企业应⽤用 – 通过iframe加载菜单 – 每个功能菜单都是独⽴立界⾯面 – 各功能菜单包含完整的公共库（JS，样式） • 单页应⽤用 – 每个功能都是部件 – 动态加载 – 整个系统共享⼀一个作⽤用域 单页应⽤用架构 前端的分层 • 为什么单页应⽤用⼀一定要分层？ 为什么单页应⽤用⼀一定要分层？ – 前端逻辑有⼀一定规模，分层有利协作 – 便于保证数据的⼀一致性 – 业务逻辑的复⽤用 – 每个层次的单独可测试 • Struts这种服务端MVC的弱点在哪⾥里？ – 拉长了视图层的⽣生成和渲染 – 不利于UI⼈人员协作 ⾃自定义标签 • 在创建界⾯面时，声明式代码是有优势的。 • HTML的标签集是⽐比较贫乏的。 • 服务端⾃自定义标签的劣势

Web 开发经典丛书 Angular 5 高级编程 (第 2 版) [美] Adam Freeman 著 杨明军 颜炯 等译 北 京 Pro Angular, Second Edition Adam Freeman EISBN：978-1-4842-2306-2 图书在版编目(CIP)数据 Angular 5高级编程：第2版 / (美)亚当 • 弗里曼(Adam Freeman) 著；杨明军 等译. —北京：清华大学出 版社，2018 (Web 开发经典丛书) 书名原文：Pro Angular, Second Edition ISBN 978-7-302-49117-0 Ⅰ. ①A… Ⅱ. ①亚… ②杨… Ⅲ. ①超文本标记语言－程序设计－教材 产品编号： ■ ■ ■ 译 者 序 在欣欣向荣的 Web 前端领域，新的框架层出不穷，如此多的选择给开发者带来极大的 痛苦：学习难度如何？开发效率如何？运行性能如何？可维护性高吗？还有开发社区、发 展前景等因素需要考虑。评估任何一个框架不仅要看其优势，还要看它给开发者挖的坑有 多深。Angular 框架自最初的 AngularJS，迭代到最新的 Angular

第一块内容：集成开发环境@angular/cli  第二块内容：Angular三大核心概念 Component,Module,Route  第三块内容：Angular架构特色 依赖注入、数据绑定  第四块内容：UI库 Angular-Material,Prime-NG,ng2-bootstrap,ionic  第五块内容：参考资源推荐 第一块：集成开发环境@angular/cli 第一块：集成开发环境@angular/cli 2009年，前端Big Bang! Tool Chains based on NodeJS npm：世界上最糟糕的模块管理器 @angular/cli 把所有零散的Node工具都集成起来多好啊！ @angular/cli @angular/cli >npm install -g @angular/cli >ng --version >ng js bundle-2.js bundle-3.js NgModule 文件体积 请求数量 这里需要取得一个平衡 第三个核心概念：Router 问题：前端为什么需要Router？ 前端为什么需要Router？ 如果没有Router，浏览器的前进后退按钮没法用 如果没有Router，你将无法把URL拷贝并分享给你的朋友 Angular应用中路由形成的Tree形结构

Angular 2.0.0-rc.5 版本 我們所認識的前端技術都是假的 千萬不要執著你之前學會的任何技術 忘掉一切的業障 才有重生的機會 今天我們要來 重新認識 Angular 2 開發框架 記得：今天是來消除業障的！ ANGULAR 2 簡介 Angular 2 Introduction Angular 2 從框架轉向平台 10 前端工程的夢幻逸品：Angular 2 開發框架介紹 (社群版) • ng-conf 2016 – YouTube • TypeScript - JavaScript that scales. • TypeScript Handbook (中文版) • 前端工程的夢幻逸品：Angular 2 開發框架介紹 • Angular 2 Fundamentals | AngularClass (免費 ng2 課程) 聯絡資訊 • The Will Will

AngularJS 我们用ExtJS和AngularJS开发了一个简单测试的应用程序，进行完整的性能测 试。我们选取了同样的组件，规范了测试的流程，以保证测试的结果。 ExtJS 对比 AngularJS: 特性比较 性能比较 框架比较 架构比较 进一步的分析 Sencha Ext JS 强大的企业级开发框架 良好的浏览器兼容性 基于MVC的框架开发 图标插件 Modern UI widgets ✔ 幸运的是， AngularUI中已经包含了许 多开源的组件， AngularUI Bootstrap, K endo (and Angular-Kendo), Wijmo 和其他 的. 3. 开发单页应用 ✔ ✔ 4. 跨浏览器兼容性 ✔ AngularJS 基于jqLite/jQuery实现浏览器 的兼容。但是其集成的第三方组件不一 定支持跨浏览器兼容。 注意： AnugularJS JS快3倍。 16. 轻量级 - 下载的包 ✘ ✔ 移动端 移动端 17. Web应用的移动端支持 Sencha 建议 Sencha Touch开发移动端版本。有些组件， 比如NestedList，在移动端，比Grids要好。这就意味着 ，需要开发独立的移动版应用。 使用ng-touch库、angular-gestures 和 ang ularJS 响应模块实现响应式Web应用， 18.

Applications Google Angular Team 编著 北京 • BEIJING 序 Angular 是一个开发平台。它能帮你更轻松的构建 Web 应用。Angular 集声明式模板、依赖注入、端到 端工具和一些最佳实践于一身，为你解决开发方面的各种挑战。Angular 为开发者提升构建 Web、手机或桌 面应用的能力。 i 前言 Web 应用程序的安全涉及到很多方面。针对常见的漏 中导入功能，并允许导出它们自己的功能供 其它 NgModule 使用。比如，要在你的应用中使用路由器（Router）服务，就要导入 Router 这个 NgModule。 把你的代码组织成一些清晰的功能模块，可以帮助管理复杂应用的开发工作并实现可复用性设计。另 外，这项技术还能让你获得惰性加载（也就是按需加载模块）的优点，以尽可能减小启动时需要加载的代 码体积。 然后，我在这里强行引用上述公式1.1。 1.1.2 模板、指令和数据绑定