Angular核心特性 大漠穷秋 2017-05-13 内容提纲  第一块内容：集成开发环境@angular/cli  第二块内容：Angular三大核心概念 Component,Module,Route  第三块内容：Angular架构特色 依赖注入、数据绑定  第四块内容：UI库 Angular-Material,Prime-NG,ng2-bootstrap

一 站式框架的各项强大功能是一项很大的挑战。Adam Freeman 撰著的《Angular 5 高级编程(第 2 版)》详细描述如何在项目中使用 Angular，从最基本的构造块开始，到最终构建最先进 和复杂的功能，深入讲解开发者所需要掌握的所有知识。本书讲解 Angular 框架的面面俱 到，同时也不放过任何有用的细节，特别是对于一些最重要的 Angular 功能，本书都给出 了常见问题以及解决办法。 降低学习痛苦指数。而对于经验丰富的前端老兵，尽管具有 Angular 框架使用经验，本书 也值得推荐，因为本书内容已经升级到 Angular 5，能助你快速将项目升级到 Angular 框架 的最新版，充分利用最新框架的强大功能。 本书由杨明军、颜炯翻译。此外，参与本书翻译的还有肖国尊、胡季红、李辉、马蓉、 李新军、易民全、姚建军、鲍春雷、甘信生、郝雪松、凌栋、王发云、王继云、赵建军、 朱宝庆、朱钱。Be Flying 1 第 1 部分：准备...................2 1.2.2 第 2 部分：使用 Angular........2 1.2.3 第 3 部分：Angular 的 高级功能.............................2 1.3 大量示例.....................................2 1.4 获取示例代码......

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

AngularJS 我们用ExtJS和AngularJS开发了一个简单测试的应用程序，进行完整的性能测 试。我们选取了同样的组件，规范了测试的流程，以保证测试的结果。 ExtJS 对比 AngularJS: 特性比较 性能比较 框架比较 架构比较 进一步的分析 Sencha Ext JS 强大的企业级开发框架 良好的浏览器兼容性 基于MVC的框架开发 图标插件 Modern UI widgets AngularJS license 和 开源软件基于 GPL 许可 开源的JavaScript 框架，基于 MIT 许可. 28. 完整的稳定，教程，食品，案例 ✔ ✔ 29. 支持：一般的讨论，bug提交， 开发新特性请求 基础支持和付费支持 完全支持 30. 完整程度：集成第三方控件，不 存在因第三方控件BUG而引发的 问题 ✔ ✘ 其他 其他 31. 动画效果支持 ✔ ✔ 32. Deferred 它支持浏览器收藏夹和浏览器前进/后退导航 AngularJS： AngularJS路由将 controllers, view templates, 和浏览器当前 URL 地址联系 在了一起。使用这个特性，我们实现了深度链接 通过使用深度链接，实现了使用一个超链接，导航到本页面的特定位置。 它使我们能够使用浏览器历史（前进/后退导航）和浏览器收藏夹 测试； 测试； ExtJS： ExtJS应用能够使用第三方的测试框架来测试，比如

– 放后端⽐比放前端的多。。。 流⾏行过什么样的技术 单页应⽤用 • 传统企业应⽤用 – 通过iframe加载菜单 – 每个功能菜单都是独⽴立界⾯面 – 各功能菜单包含完整的公共库（JS，样式） • 单页应⽤用 – 每个功能都是部件 – 动态加载 – 整个系统共享⼀一个作⽤用域 单页应⽤用架构 前端的分层 • 为什么单页应⽤用⼀一定要分层？ – 业务逻辑层可以⽤用单元测试来覆盖 • 甚⾄至因为与DOM⽆无关，这个单元测试可以在 NodeJS⾥里做 ⼆二次开发平台 • ⼆二次开发平台是做什么⽤用的？ – 业务⼈人员通过拖拉配置，⽣生成可⽤用的功能。 • 为什么企业会需要⼆二次开发平台？ – ⼈人⼒力与定制化需求的⽭矛盾 • 为什么企业选择⾃自⼰己做⼆二次开发平台？ – 每个⾏行业都有⾃自⼰己的特点 • 怎样才能做好⼆二次开发平台？ 移动端需要完全从头开始开发吗？ – 代价太⼤大了 • 它能利⽤用已有的什么？ – 服务、前端业务逻辑 • Angular有哪些特性适合移动端开发？ – ngTouch • 还有更完善的选择吗？ – Ionic 前端的⼯工程化 • ⼀一个软件系统，并不只是简单功能的堆砌 • 当规模扩⼤大的时候，有⼀一些边际效应 – 某个JS模块被修改，如何得知会影响谁？ – 某

JavaScript 語言特性 ( let, const, for-of, … ) – 可透過 Babel 轉譯器將瀏覽器不支援的語法轉為 ES5 版本 • TypeScript – 此版本為 ES 2015 的「超集合」 – 具有強型別特性、內建 ES5 轉譯器 (Transpiler)、更好的工具支援 • Dart – 非 JavaScript 家族的程式語言 – 具有強型別特性 13 Angular 每個元件都可能有自己的「樣板」 • Metadata 每個元件都可以標示「中繼資料」 • Data Binding 樣板與元件屬性、方法可以進行綁定 • Directive 將 DOM 轉換為多功能的「宣告命令」 • Service 由「服務」集中管理資料與運算邏輯 • Dependency Injection 由「相依注入」機制管理物件生命週期 20 快快樂樂建立 ANGULAR 2