• 界⾯面规整，模式单⼀一 • 键盘操作 • 逻辑复杂 • 加载速度的侧重不同 • 浏览器版本相对宽松 传统的B/S企业应⽤用前端 • B/S企业软件常⽤用的展现层技术 – HTC 在浏览器端扩展标签 – JSF等 在服务端⽣生成界⾯面 – GWT 编译阶段⽣生成界⾯面 – ExtJS ⽤用JS封装界⾯面组件 – Flex等 脱离HTML体系，另辟蹊径 – 放后端⽐比放前端的多。。。 流⾏行过什么样的技术 单页应⽤用 • 传统企业应⽤用 – 通过iframe加载菜单 – 每个功能菜单都是独⽴立界⾯面 – 各功能菜单包含完整的公共库（JS，样式） • 单页应⽤用 – 每个功能都是部件 – 动态加载 – 整个系统共享⼀一个作⽤用域 单页应⽤用架构 前端的分层 • 为什么单页应⽤用⼀一定要分层？ – polymer，angularjs 业务逻辑层 • 在良好的分层机制下，前端可以独⽴立出⼀一层 与界⾯面元素⽆无关的纯逻辑层 • 这⼀一层是与业务相关的，⽐比界⾯面层稳定 • 业务逻辑层可以⽤用单元测试来覆盖 • 甚⾄至因为与DOM⽆无关，这个单元测试可以在 NodeJS⾥里做 ⼆二次开发平台 • ⼆二次开发平台是做什么⽤用的？ – 业务⼈人员通过拖拉配置，⽣生成可⽤用的功能。 • 为什么企业会需要⼆二次开发平台？

经过精心的前期设计，涵盖了开发中的各个 层面，层与层之间都经过精心调适。开发者借助这个“开箱即用”的框架，就可以完成大 部分的前端开发工作，而不需要费时费力去组合、评估其他前端技术。这可以有效降低开 发者和开发团队的决策成本，有利于项目的快速起步。 Angular 5 是构建动态 JavaScript 应用程序的领先框架，而想讲清楚这个包罗万象的一 站式框架的各项强大功能是一项很大的挑战。Adam Freeman 5 高级编程(第 2 版)》详细描述如何在项目中使用 Angular，从最基本的构造块开始，到最终构建最先进 和复杂的功能，深入讲解开发者所需要掌握的所有知识。本书讲解 Angular 框架的面面俱 到，同时也不放过任何有用的细节，特别是对于一些最重要的 Angular 功能，本书都给出 了常见问题以及解决办法。 即便是一位希望从事 Web 前端开发工作的新手，考虑到 Angular 框架陡峭的学习曲线， 降低学习痛苦指数。而对于经验丰富的前端老兵，尽管具有 Angular 框架使用经验，本书 也值得推荐，因为本书内容已经升级到 Angular 5，能助你快速将项目升级到 Angular 框架 的最新版，充分利用最新框架的强大功能。 本书由杨明军、颜炯翻译。此外，参与本书翻译的还有肖国尊、胡季红、李辉、马蓉、 李新军、易民全、姚建军、鲍春雷、甘信生、郝雪松、凌栋、王发云、王继云、赵建军、 朱宝庆、朱钱。Be Flying

构建客户端应用的平台与框架。Angular 本身使用 TypeScript 写 成的。它将核心功能和可选功能作为一组 TypeScript 库进行实现，你可以把它们导入你的应用中。 1.1 架构概览 Angular 的基本构造块是 NgModule，它为组件提供了编译的上下文环境。NgModule 会把相关的代码 收集到一些功能集中。Angular 应用就是由一组 NgModule 定义出的。应用至少会有一个用于引导应用的根 模块，通常还会有很多特性模块。 • 组件定义视图。视图是一组可见的屏幕元素，Angular 可以根据你的程序逻辑和数据来选择和修改它 们。每个应用都至少有一个根组件。 • 组件使用服务。服务会提供那些与视图不直接相关的功能。服务提供商可以作为依赖被注入到组件 中，这能让你的代码更加模块化、可复用，而且高效。 强行在这里插入一个公式： lim x→0 ex − 1 2x [ 0 0] = H lim x→0 ex ule 可以将其组件和一组相关代码（如服务）关联起来，形成功能单元。 每个 Angular 应用都有一个根模块，通常命名为 AppModule。根模块提供了用来启动应用的引导机制。 一个应用通常会包含很多功能模块。 3 像 JavaScript 模块一样，NgModule 也可以从其它 NgModule 中导入功能，并允许导出它们自己的功能供 其它 NgModule 使用。比如，要在你的应用

支持单元测试，集成测试和功能 AngularJS 团队开发了 Karma 测试工具。 另外，第三方的工具 Protractor 也可以用于AngularJS的测试 数据绑定 数据绑定 双向数据绑定是连接页面UI和数据模型的纽带，及更改模型的数据，页面UI能够同步响应 ExtJS： ExtJS 5 组件有新的绑定配置，用于实现此功能 在早期的ExtJS版本中，使用Store对象来实现此功能。但是任然有 一些工作需要做，比如加载Store等 如果一个模型有2000-3000个观测者，那么系统会变慢 就算你的应用足够快，使用户不会感到相应延迟，你也不能直接在一页上展示2000个信息给用户。因为这是一个很坏的UI设计，用户会感动无所适从，但是， 使用排序组件或者具有双向绑定功能的表格，你能够很好的组织这2000条数据，给用户更好的展现。 观测者： 观测者： 默认情况下，所有绑定到UI的模型数据都被观察。比如，他们都有一个观测者注册到了观察列表上。你也可以通过$watch

每個元件都可能有自己的「樣板」 • Metadata 每個元件都可以標示「中繼資料」 • Data Binding 樣板與元件屬性、方法可以進行綁定 • Directive 將 DOM 轉換為多功能的「宣告命令」 • Service 由「服務」集中管理資料與運算邏輯 • Dependency Injection 由「相依注入」機制管理物件生命週期 20 快快樂樂建立 ANGULAR 2