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

在欣欣向荣的 Web 前端领域，新的框架层出不穷，如此多的选择给开发者带来极大的 痛苦：学习难度如何？开发效率如何？运行性能如何？可维护性高吗？还有开发社区、发 展前景等因素需要考虑。评估任何一个框架不仅要看其优势，还要看它给开发者挖的坑有 多深。Angular 框架自最初的 AngularJS，迭代到最新的 Angular 5，其不变的最显著特征就 是其整合性。作为一个一体化框架，Angular 经过精心的前期设计，涵盖了开发中的各个 层面，层与层之间都经过精心调适。开发者借助这个“开箱即用”的框架，就可以完成大 部分的前端开发工作，而不需要费时费力去组合、评估其他前端技术。这可以有效降低开 发者和开发团队的决策成本，有利于项目的快速起步。 Angular 5 是构建动态 JavaScript 应用程序的领先框架，而想讲清楚这个包罗万象的一 站式框架的各项强大功能是一项很大的挑战。Adam 要的 Angular 功能，本书都给出 了常见问题以及解决办法。 即便是一位希望从事 Web 前端开发工作的新手，考虑到 Angular 框架陡峭的学习曲线， 也不要担心，本书由易到难的循序渐进式风格可以极大地降低学习 Angular 框架的门槛， 降低学习痛苦指数。而对于经验丰富的前端老兵，尽管具有 Angular 框架使用经验，本书 也值得推荐，因为本书内容已经升级到 Angular

Angular-Material,Prime-NG,ng2-bootstrap,ionic  第五块内容：参考资源推荐 第一块：集成开发环境@angular/cli 2009年，前端Big Bang! Tool Chains based on NodeJS npm：世界上最糟糕的模块管理器 @angular/cli 把所有零散的Node工具都集成起来多好啊！ 一张图覆盖Angular所有概念 感谢《揭秘Angular2》的汤桂川老师提供如此详细的脑图！ Angular最核心的3个概念 Component Route Module Angular最核心的概念是“组件化” 第一个核心概念：Component http://git.oschina.net/mumu-osc/NiceFish Component Tree App Home User 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 開發框架介紹 之後的模組定義檔 ( *.d.ts ) 22 使用 Angular CLI 建立專案範本 • 請務必在 NTFS 檔案系統執行相關命令 (Windows) • ng new demo1 – 初始化 Git 儲存庫 – 安裝 npm 相依套件 • cd demo1 • ng serve – http://localhost:4200 23 了解專案結構 • 首頁 HTML 與 Angular (社群版) • ng-conf 2016 – YouTube • TypeScript - JavaScript that scales. • TypeScript Handbook (中文版) • 前端工程的夢幻逸品：Angular 2 開發框架介紹 • Angular 2 Fundamentals | AngularClass (免費 ng2 課程) 聯絡資訊 • The Will Will

可以根据你的程序逻辑和数据来选择和修改它 们。每个应用都至少有一个根组件。 • 组件使用服务。服务会提供那些与视图不直接相关的功能。服务提供商可以作为依赖被注入到组件 中，这能让你的代码更加模块化、可复用，而且高效。 强行在这里插入一个公式： lim x→0 ex − 1 2x [ 0 0] = H lim x→0 ex 2 = 1 2 (1.1) 1.1.1 模块 Angular 或其它东西。如图2.1。 • 注入器是主要的机制。你不用自己创建 Angular 注入器。Angular 会在启动过程中为你创建全应用级 注入器。 • 该注入器维护一个包含它已创建的依赖实例的容器，并尽可能复用它们。 • 提供商是一个创建依赖的菜谱。对于服务来说，它通常就是这个服务类本身。你在应用中要用到的任 何类都必须使用该应用的注入器注册一个提供商，以便注入器可以使用它来创建新实例。

Model-View-Vie wModel(MVVM) 8. 依赖注入 Ext JS 能够通过扩展（ Deft JS）增加依赖注入 ✔ 9. 数据绑定 ✔ ✔ 10. 直接操作DOM元素 ✔ ✔ 11. 模块化 ✔ ✔ 测试 测试 12. 自动测试支持 通过扩展工具实现 ✔ 13. 测试框架或者测试工具 许多第三方的测试框架，比如 Siesta (专门为ExtJS优化), Jasmine and Mocha Deft JS 实现依赖注入 它是基于组件，模块化的 AngularJS： AngularJS是一个对于web应用的HTML扩展。 它被描述为了 'Model-View-Whatever' 框架，它并没有规定使用特定的开发 框架。但是它非常容易支持 Model-View-Controller 或者 Model-View-View Model. 它是模块化的。 它自动装盘HTML元素中的依赖注入模块 收。但是对于第三方的api，你需要调用$apply方法来回收脏数据 。 脏数据回收完成，数据的改变就会呈现在UI上。 脏检查是异步的 Deferred bootstrap: Bootstrap指的是初始化的过程，Deferred bootstrap用于延迟启动进程加载很重、很大的依赖文件或者目标。 Deferred bootstrap主要用于端对端测试。 虽然deferred bootstrap对于