基于AngularJS的企业应⽤用前端架构 徐飞 新浪微博：@民⼯工精髓V 企业应⽤用前端的特点 • 独占模式 • 重业务，轻视觉 • 界⾯面规整，模式单⼀一 • 键盘操作 • 逻辑复杂 • 加载速度的侧重不同 • 浏览器版本相对宽松 传统的B/S企业应⽤用前端 • B/S企业软件常⽤用的展现层技术 – HTC 在浏览器端扩展标签 • 业务逻辑 – 放后端⽐比放前端的多。。。 流⾏行过什么样的技术 单页应⽤用 • 传统企业应⽤用 – 通过iframe加载菜单 – 每个功能菜单都是独⽴立界⾯面 – 各功能菜单包含完整的公共库（JS，样式） • 单页应⽤用 – 每个功能都是部件 – 动态加载 – 整个系统共享⼀一个作⽤用域 单页应⽤用架构 前端的分层 • 为什么单页应⽤用⼀一定要分层？

是两种企业级的富 UI设计框架。 这篇文章从优势、架构、测试、性能等各个方面比较了 ExtJS 和 AngularJS 我们用ExtJS和AngularJS开发了一个简单测试的应用程序，进行完整的性能测 试。我们选取了同样的组件，规范了测试的流程，以保证测试的结果。 ExtJS 对比 AngularJS: 特性比较 性能比较 框架比较 架构比较 进一步的分析 Sencha Ext JS ✔ ✔ 4. 跨浏览器兼容性 ✔ AngularJS 基于jqLite/jQuery实现浏览器 的兼容。但是其集成的第三方组件不一 定支持跨浏览器兼容。 注意： AnugularJS (1.3 及其以上版本) 移除了对IE8的支持。如果需要对于IE8 的支持，请选择ExtJS 5. 绘图组件 ExtJS 包含独立的绘图组件，非常的强大。在大部分的 企业应用中已经足够 AngularJS D3 绘图组件。详情请见D3 charts a t D3.js. 6. 学习成本 高 中等 架构 架构 7. 应用程序设计框架 ExtJS 5 支持 MVC (Model-View-Controller) 和 MVVM (M odel-View-ViewModel) MVW (Model-View-Whatever). 它支持流行的设计模式，比如 Model-Vi ew-Controller(MVC) 和

洞和攻击，比如跨站脚本攻击，Angular 提供了一 些内置的保护措施。 iii 目 录 序 i 前言 iii 第一部分 Angular 应用基础 1 第一章 核心知识 3 1.1 架构概览 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . TypeScript 构建客户端应用的平台与框架。Angular 本身使用 TypeScript 写 成的。它将核心功能和可选功能作为一组 TypeScript 库进行实现，你可以把它们导入你的应用中。 1.1 架构概览 Angular 的基本构造块是 NgModule，它为组件提供了编译的上下文环境。NgModule 会把相关的代码 收集到一些功能集中。Angular 应用就是由一组 NgModule 定 解析绑定表达式， 以修改 HTML 元素和 DOM。Angular 支持双向数据绑定，这意味着 DOM 中发生的变化（比如用户的选择） 同样可以反映回你的程序数据中。 在视图显示出来之前，Angular 会先根据你的应用数据和逻辑来运行模板中的指令并解析绑定表达式， 以修改 HTML 元素和 DOM。Angular 支持双向数据绑定，这意味着 DOM 中发生的变化（比如用户的选择） 同样可以反映回你的程序数据中。

■ ■ ■ 译 者 序 在欣欣向荣的 Web 前端领域，新的框架层出不穷，如此多的选择给开发者带来极大的 痛苦：学习难度如何？开发效率如何？运行性能如何？可维护性高吗？还有开发社区、发 展前景等因素需要考虑。评估任何一个框架不仅要看其优势，还要看它给开发者挖的坑有 多深。Angular 框架自最初的 AngularJS，迭代到最新的 Angular 5，其不变的最显著特征就 (Microsoft Certified Professional， 微软认证专家)等多项认证，而且还是一位多产的作家和技术评审员。十多年来，他为多家 意大利和国际杂志撰写了大量文章，与人合著了十多本关于各类计算机主题的书籍。 ■ ■ ■ 目 录 第 1 章 准备工作 .....................................1 .....605 25.3.3 在代码中导航...............611 25.3.4 接收导航事件...............614 25.3.5 删除事件绑定和 支持代码.....................615 25.4 小结.......................................618 第 26 章 路由与导航：第 2

内容提纲  第一块内容：集成开发环境@angular/cli  第二块内容：Angular三大核心概念 Component,Module,Route  第三块内容：Angular架构特色 依赖注入、数据绑定  第四块内容：UI库 Angular-Material,Prime-NG,ng2-bootstrap,ionic  第五块内容：参考资源推荐 第 Angular应用中路由形成的Tree形结构 Angular路由用法：静态路由 Angular路由用法：异步路由 Angular路由用法：路由守卫 防止未授权访问 第三块：Angular架构特色 依赖注入 依赖注入 Parent Injector Child Injector 注射器（Injector） 也是一个树型结构 依赖注入 依赖注入  每一个HTML标签上面都会有一个注射器实例

快快樂樂學會 Angular 2 網站開發框架 多奇數位創意有限公司 技術總監 黃保翕 ( Will 保哥 ) 部落格：http://blog.miniasp.com/ 適用 Angular 2.0.0-rc.5 版本 我們所認識的前端技術都是假的 千萬不要執著你之前學會的任何技術 忘掉一切的業障 才有重生的機會 今天我們要來 重新認識 Angular 2 開發框架 記得：今天是來消除業障的！ { title = 'app works!'; } 18 Angular 2 結構剖析 19 Angular 2 結構剖析 • Module 應用程式被切分成許多「模組」 • Component 每個模組下有許多「元件」 • Template 每個元件都可能有自己的「樣板」 • Metadata 每個元件都可以標示「中繼資料」 • Data Binding 樣板與元件屬性、方法可以進行綁定