前言
导语摘要
AngularJS诞生于Google,已用于开发多款Google产品。它是一套JavaScript前端框架,用于开发当下流行的数据驱动的单页面Web应用。其核心特性是:MVC、模块化、自动双向数据绑定、语义化标签、依赖注入等。《揭秘 Angular 2》讲解了Angular 2的开发概念和原理,并通过丰富的开发实例向读者展示了构建复杂应用的完整过程,包括学习使用Angular 2特有的基于DOM的模板系统,实现复杂的后端通信,创建漂亮的表单,制作导航,使用依赖注入系统,提高Web应用的安全性,等等。
作者简介
广发证券互联网金融技术团队,是Angular早和坚定的践行者。作为全新一代的证券业 IT 研发组织,团队致力于用*好的技术打造行业方案、支持业务创新。我们热爱开源技术、信奉敏捷方法、编写优雅代码、关注用户体验,我们喜欢互联网工程师文化,我们在技术创新中寻找到无穷乐趣。
目录
部分入门篇
1 前端风云2
1.1 故事的起点2
1.2 AJAX 王者归来3
1.3 工具库的流行3
1.4 百家争鸣3
1.5 走进前端新时代4
1.6 小结6
2 Angular 简介7
2.1 历史回顾7
2.1.1 AngularJS 1.x 起源7
2.1.2 AngularJS 1.x 迭代之路8
2.1.3 初生的Angular 2 9
2.1.4 快速发展的Angular 2 10
2.1.5 开发语言之选11
2.2 Angular 2 简述12
2.2.1 核心概念12
2.2.2 平台简介14
2.2.3 平台亮点16
2.3 小结17
3 TypeScript 入门18
3.1 TypeScript 概述18
3.1.1 概述18
3.1.2 安装19
3.2 基本类型20
3.2.1 布尔类型20
3.2.2 数字类型20
3.2.3 字符串类型21
3.2.4 数组类型21
3.2.5 元组类型21
3.2.6 枚举类型21
3.2.7 任意值类型22
3.2.8 null 和undefined 22
3.2.9 void 类型23
3.2.10 never 类型24
3.3 声明和解构24
3.3.1 let 声明25
3.3.2 const 声明26
3.3.3 解构26
3.4 函数28
3.4.1 函数定义28
3.4.2 可选参数28
3.4.3 默认参数29
3.4.4 剩余参数30
3.4.5 函数重载30
3.4.6 箭头函数31
3.5 类32
3.5.1 类的例子32
3.5.2 继承与多态32
3.5.3 修饰符33
3.5.4 参数属性35
3.5.5 静态属性35
3.5.6 抽象类36
3.6 模块37
3.6.1 概述37
3.6.2 模块导出方式37
3.6.3 模块导入方式38
3.6.4 模块的默认导出39
3.6.5 模块设计原则40
3.7 接口42
3.7.1 概述42
3.7.2 属性类型接口42
3.7.3 函数类型接口43
3.7.4 可索引类型接口44
3.7.5 类类型接口44
3.7.6 接口扩展45
3.8 装饰器46
3.8.1 概述46
3.8.2 方法装饰器47
3.8.3 类装饰器48
3.8.4 参数装饰器50
3.8.5 属性装饰器51
3.8.6 装饰器组合51
3.9 泛型53
3.10 TypeScript 周边54
3.10.1 编译配置文件54
3.10.2 声明文件55
3.10.3 编码工具56
3.10.4 展望未来57
3.11 小结57
4 快速入门58
4.1 Hello World 例子58
4.1.1 准备工作58
4.1.2 搭建步骤59
4.2 通讯录例子66
4.2.1 背景介绍66
4.2.2 架构设计68
4.3 小结74
第二部分深入篇
5 Angular 架构总览76
5.1 核心模块介绍76
5.1.1 组件77
5.1.2 模板81
5.1.3 指令82
5.1.4 服务83
5.1.5 依赖注入84
5.1.6 路由86
5.2 应用模块88
5.3 源码结构介绍91
5.4 小结93
6 组件94
6.1 概述94
6.1.1 模块化介绍94
6.1.2 组件化标准96
6.1.3 Angular 的组件100
6.2 组件基础100
6.2.1 创建组件的步骤100
6.2.2 组件基础构成102
6.2.3 组件与模块108
6.3 组件交互113
6.3.1 组件的输入输出属性114
6.3.2 父组件向子组件传递数据115
6.3.3 子组件向父组件传递数据120
6.3.4 其他组件交互方式122
6.4 组件内容嵌入124
6.5 组件生命周期128
6.5.1 概述128
6.5.2 生命周期钩子128
6.6 变化监测131
6.6.1 数据变化的源头131
6.6.2 变动通知机制132
6.6.3 变化监测的响应处理133
6.7 扩展阅读139
6.7.1 元数据一览表139
6.7.2 元数据说明139
6.7.3 深入理解Zones 149
6.8 小结155
7 模板156
7.1 模板语法概览156
7.2 数据绑定158
7.2.1 概述158
7.2.2 插值160
7.2.3 模板表达式160
7.2.4 属性绑定162
7.2.5 事件绑定165
7.2.6 双向数据绑定168
7.2.7 输入和输出属性169
7.3 内置指令170
7.3.1 NgClass 170
7.3.2 NgStyle 170
7.3.3 NgIf 171
7.3.4 NgSwitch 172
7.3.5 NgFor 172
7.4 表单173
7.4.1 模板表单例子174
7.4.2 表单指令175
7.4.3 自定义表单样式184
7.4.4 表单校验185
7.5 管道188
7.5.1 管道介绍189
7.5.2 内置管道189
7.5.3 自定义管道195
7.5.4 管道的变化监测197
7.6 扩展阅读201
7.6.1 安全导航操作符201
7.6.2 双向绑定的原理201
7.7 小结204
8 指令205
8.1 概述205
8.1.1 指令分类207
8.1.2 内置指令209
8.2 自定义属性指令218
8.2.1 实现属性指令218
8.2.2 为指令绑定输入220
8.2.3 响应用户操作222
8.3 自定义结构指令223
8.3.1 实现结构指令223
8.3.2 模板标签与星号前缀226
8.3.3 NgIf 指令原理227
8.4 扩展阅读230
8.5 小结234
9 服务与RxJS236
9.1 Angular 服务236
9.1.1 概述236
9.1.2 使用场景237
9.2 HTTP 服务241
9.2.1 AJAX 介绍242
9.2.2 JSONP 介绍248
9.2.3 HttpModule 249
9.3 响应式编程253
9.3.1 概述253
9.3.2 ReactiveX 255
9.4 RxJS 257
9.4.1 创建Observable 对象257
9.4.2 使用RxJS 处理复杂场景257
9.4.3 RxJS 和Promise 的对比258
9.4.4 “冷”模式下的Observable 259
9.4.5 RxJS 中的Operator 260
9.4.6 Angular 中的RxJS 264
9.5 小结268
10 依赖注入269
10.1 依赖注入介绍270
10.2 Angular 依赖注入273
10.2.1 概述273
10.2.2 在组件中注入服务275
10.2.3 在服务中注入服务277
10.2.4 在模块中注入服务279
10.2.5 层级注入281
10.2.6 注入到派生组件285
10.2.7 限定方式的依赖注入287
10.3 Provider 291
10.3.1 概述291
10.3.2 Provider 注册方式292
10.4 扩展阅读296
10.5 小结298
11 路由 299
11.1 概述299
11.2 基本用法301
11.2.1 路由配置301
11.2.2 创建根路由模块302
11.2.3 添加RouterOutlet 指令302
11.3 路由策略303
11.3.1 HashLocationStrategy 介绍304
11.3.2 PathLocationStrategy 介绍305
11.4 路由跳转306
11.4.1 使用指令跳转307
11.4.2 使用代码跳转309
11.5 路由参数311
11.5.1 Path 参数311
11.5.2 Query 参数314
11.5.3 Matrix 参数316
11.6 子路由和附属Outlet 316
11.6.1 子路由316
11.6.2 附属Outlet 318
11.7 路由拦截319
11.7.1 激活拦截与反激活拦截320
11.7.2 数据预加载拦截324
11.8 模块的延迟加载326
11.8.1 延迟加载实现327
11.8.2 模块加载拦截328
11.9 小结330
12 测试 331
12.1 概述331
12.2 单元测试332
12.2.1 概述332
12.2.2 常用测试框架333
12.2.3 Jasmine 介绍333
12.2.4 Karma 介绍337
12.2.5 Karma 结合Jasmine 测试338
12.3 Angular 单元测试342
12.3.1 概述342
12.3.2 独立单元测试347
12.3.3 测试工具集351
12.4 端到端测试359
12.4.1 概述359
12.4.2 Protractor 介绍360
12.5 小结363
第三部分实战篇
13 问卷调查系统简介 366
13.1 项目背景366
13.2 主要特性367
13.2.1 首页和帮助页369
13.2.2 问卷编辑页369
13.2.3 我的问卷页369
13.2.4 用户管理页369
13.3 产品设计369
13.4 小结371
14 项目起步 372
14.1 技术选型372
14.1.1 前端脚手架372
14.1.2 UI 样式库373
14.1.3 后端服务器374
14.2 环境搭建374
14.2.1 搭建脚手架374
14.2.2 引入样式库377
14.2.3 搭建后台环境378
14.3 目录结构介绍380
14.4 首页开发384
14.5 小结388
15 问卷编辑模块 389
15.1 概述389
15.1.1 功能设计389
15.1.2 数据模型391
15.2 问卷编辑模块开发393
15.2.1 问题选择组件394
15.2.2 问题组件398
15.2.3 问卷组件408
15.2.4 问卷服务415
15.2.5 问卷大纲422
15.3 小结425
16 我的问卷模块
内容摘要
AngularJS诞生于Google,已用于开发多款Google产品。它是一套JavaScript前端框架,用于开发当下流行的数据驱动的单页面Web应用。其核心特性是:MVC、模块化、自动双向数据绑定、语义化标签、依赖注入等。《揭秘 Angular 2》讲解了Angular 2的开发概念和原理,并通过丰富的开发实例向读者展示了构建复杂应用的完整过程,包括学习使用Angular 2特有的基于DOM的模板系统,实现复杂的后端通信,创建漂亮的表单,制作导航,使用依赖注入系统,提高Web应用的安全性,等等。
主编推荐
广发证券互联网金融技术团队,是Angular早和坚定的践行者。作为全新一代的证券业 IT 研发组织,团队致力于用*好的技术打造行业方案、支持业务创新。我们热爱开源技术、信奉敏捷方法、编写优雅代码、关注用户体验,我们喜欢互联网工程师文化,我们在技术创新中寻找到无穷乐趣。
精彩内容
。。。
媒体评论
当Angular还在alpha版本的时候,本书作者所在团队就已在产品里使用。几年时间一路跟下来,踩过很多坑,收获更多。这保证了本书满满地全是干货,值得仔细阅读。
——大漠穷秋 Google Angular 中国开发者PM
在前端规模化时代做开发是件幸福的事。几年前似乎没有太多选择,大多用 jQuery 搞定各种浏览器上的坑,以简陋的“粉笔”在网页上“涂鸦”。如今又一下子拥有太多选择,React、Vue、Angular...我不是其中任何一个流行的(和不那么流行的)框架的死忠粉,在工作中会根据适合的情况选用它们。很高兴本书不是死板地介绍特性和罗列 API,而是通过实际例子帮助读者理解 Angular 的架构和设计思想。跟着作者的思路走一遍,前端技能会有实质提升,而不仅是“学会使用” Angular。我们需要掌握框架的灵魂,而不是成为它的奴隶。
——月影 360奇舞团负责人
广发证券互联网技术团队是一个活跃的技术团队,近几年译过大量Angular的文章,并在实际业务中将Angular付诸实践,积累了很多经验,同时也促进了团队成员对Angular的深入理解。Angular是较早出现的具有颠覆性的Web前端框架,在推出之初就受到广泛关注,并快速发展起来,给我们带来一些新的理念。相信会有更多人因为这本书而更加全面深入的了解Angular!
——于涛Kinvix 腾讯Alloyteam负责人
本应快速发展的Angular 2 ,因遭遇 React 当红和 Vue 崛起而没能像1.x一样快速流行。但还是有一些团队,在自己的业务里找到实践空间,用它来解决实际问题。从技术角度来看,它丝毫不逊色于竞争对手:与 TypeScript 的结合、对大型架构的支持让它在企业级开发中拥有非常好的空间。
希望大家不要囿于门户之见,用这本书来开始了解这门有价值的技术。
——程劭非 @winter
Angular 2 与 1.x 版本有很大不同,以组件化为核心理念,整合可选的开发语言、可配置的变更检测策略、样式封装机制,形成一套适应于企业应用开发的框架。现在,这个领域的开发者,终于迎来一本适合自己的书。
——徐飞 知名前端架构师
本书把广发证券前端团队对 Angular 2 框架基础的理解和*实践,用不拖沓的方式传递给读者,值得一读。
——sofish 饿了么大前端负责人
开发者真正了解所选框架并能结合工作场景,才能享受其带来的效率、性能提升。本书覆盖基础、架构与应用,从能做什么讲到为什么这么做,对将或已选择Angular的开发者极有裨益。
——吴天豪 天猫前端技术专家
本书从概念到实际项目,从 API 到架构,详细介绍了 TypeScript 和 Angular 的开发经验,是学习Angular的上佳选择。
——曾探 腾讯高级工程师
以下为对购买帮助不大的评价