Angular 权威教程

本文目录结构

本书特色

• 强力的 IDE 支持 + 完善的生态圈 + 一套代码、多种平台 +……=Angular
• 资深全栈开发工程师经验总结
• 雪狼组织的 Nice Angular 社区主力倾情翻译
• Google 推荐阅读

本书内容循序渐进，帮你在短时间内毫不费力地掌握整个 Angular 框架并打好坚实的基础，工作效率获得极大的提升。 书中包含丰富的示例应用，展示如何编写组件、如何使用表单和 API，还会带你学习如何使用 Angular 创建：

• 基于组件的仿制版 Reddit
• 使用 RxJS 可观察对象的实时聊天应用
• “随敲随搜”的 YouTube 搜索应用
• 带有可播放乐曲预览的 Spotify 曲目搜索应用

购买链接

• 京东：https://item.jd.com/12176534.html

内容简介

本书堪称 Angular 领域的里程碑式著作，涵盖了关于 Angular 的几乎所有内容。对于没有经验的人，本书平实、通俗的讲解，递进、严密的组织，可以让人毫无压力地登堂入室，迅速领悟新一代 Web 应用开发的精髓。如果你有相关经验，那本书对 Angular 概念和技术细节的全面剖析，以及引人入胜、切中肯綮的讲解，将帮助你彻底掌握这个框架，在自己职业技术修炼之路上更进一步。

作者介绍

Ari Lerner

全栈工程师，拥有多年 Angular 经验，自办并运营 Angular 电子报 ng-newsletter.com，在著名硅谷工程师培训学校 Hack Reactor 担任 AngularJS 讲师。Fullstack.io 创始人。

Felipe Coury

Gistia Labs 联合创始人兼 CTO。

Nate Murray

全栈工程师，曾任职于 IFTTT，拥有数据挖掘和增量 Web 服务等方面的背景。

Carlos Taborda

Gistia Labs 联合创始人兼主管。

认识 Angular

相比 Angular1（也叫 Angular.js）而言 Angular 的设计应该说是有了一次跨越性的改变。ng2 的核心概念更清晰，本着少即是多的原则，你能很快记住 ng2 的核心是什么。作为一个 Angular 的使用者，个人还是便爱 ng2 多一些，因为 1.0 版本的学习曲线比较陡峭，而且其中的坑比较多一些。虽然一开始我也是从 1.0 的版本开始学习的。

Angular 框架主要通过 HTML 和 JavaScript 来构建应用，当然也可以使用 HTML 和 TypeScript 来进行开发。建议使用 TypeScript 进行开发，因为使用 TypeScript 比较简洁一些，也能提高开发效率。

Angular 中的 8 个核心概念：

• 模块
• 组件
• 模板
• 元数据
• 数据绑定
• 指令
• 服务
• 依赖注入

学前准备

《Angular 权威教程》整本书中的教程比较详细，除了部分及其细微的地方有所遗漏，需要自己思考一下，其它没有什么问题。

即使没有太多的前端知识储备，也不用担心，你也可以轻松的读完这本书。

在开始 Angular 编程之旅之前，我们需要按照如下步骤：

• 安装 Node.js, 官网地址：https://nodejs.org/

• 安装 TypeScript，在控制台输入命令 npm install -g typescript 进行全局安装；

• 安装 angular/cli 工具，在控制台输入命令 npm install -g @angular/cli ;

目录

第 1 章　编写你的第一个 Angular Web 应用

• 1．1　仿制 Reddit 网站　1
• 1．2　起步　3
  • 1．2．1　TypeScript　3
  • 1．2．2　angular-cli　3
  • 1．2．3　示例项目　4
• 1．3　运行应用　7
  • 1．3．1　制作 Component　8
  • 1．3．2　导入依赖　9
  • 1．3．3　Component 注解　10
  • 1．3．4　用 templateUrl 添加模板　11
  • 1．3．5　添加 template　11
  • 1．3．6　用 styleUrls 添加 CSS 样式　12
  • 1．3．7　加载组件　12
• 1．4　把数据添加到组件中　13
• 1．5　使用数组　15
• 1．6　使用 UserItemComponent 组件　18
  • 1．6．1　渲染 UserItemComponent　18
  • 1．6．2　接收输入　19
  • 1．6．3　传入 Input 值　20
• 1．7　“启动”速成班　21
• 1．8　扩展你的应用　22
  • 1．8．1　添加 CSS　24
  • 1．8．2　应用程序组件　24
  • 1．8．3　添加互动　26
  • 1．8．4　添加文章组件　29
• 1．9　渲染多行　36
  • 1．9．1　创建 Article 类　36
  • 1．9．2　存储多篇文章　40
  • 1．9．3　使用 inputs 配置 ArticleComponent　41
  • 1．9．4　渲染文章列表　42
• 1．10　添加新文章　44
• 1．11　最后的修整　44
  • 1．11．1　显示文章所属的域名　44
  • 1．11．2　基于分数重新排序　45
• 1．12　全部代码　45
• 1．13　总结　45
• 1．14　获得帮助　46

第 2 章　TypeScript

• 2．1　Angular 是用 TypeScript 构建的　47
• 2．2　TypeScript 提供了哪些特性　48
• 2．3　类型　49
• 2．4　内置类型　50
  • 2．4．1　字符串　50
  • 2．4．2　数字　50
  • 2．4．3　布尔类型　51
  • 2．4．4　数组　51
  • 2．4．5　枚举　51
  • 2．4．6　任意类型　52
  • 2．4．7　“无”类型　52
• 2．5　类　52
  • 2．5．1　属性　52
  • 2．5．2　方法　53
  • 2．5．3　构造函数　54
  • 2．5．4　继承　55
• 2．6　工具　57
  • 2．6．1　胖箭头函数　57
  • 2．6．2　模板字符串　58
• 2．7　总结　59

第 3 章　Angular 的工作原理

• 3．1　应用　60
  • 3．1．1　主导航组件　61
  • 3．1．2　面包屑导航组件　61
  • 3．1．3　产品列表组件　62
• 3．2　产品数据模型　64
• 3．3　组件　64
• 3．4　组件注解　66
  • 3．4．1　组件 selector　66
  • 3．4．2　组件 template　67
  • 3．4．3　添加产品　67
  • 3．4．4　用模板绑定来查看产品　68
  • 3．4．5　添加更多产品　69
  • 3．4．6　选择一个产品　70
  • 3．4．7　用列出产品　73
• 3．5　设置 ProductsList 的 @Component 配置项　73
  • 3．5．1　设置 ProductsList 的 @Component 配置项　73
  • 3．5．2　组件的输入　74
  • 3．5．3　组件的输出　77
  • 3．5．4　触发自定义事件　78
  • 3．5．5　编写 ProductsList 的控制器类　79
  • 3．5．6　编写 ProdctsList 的视图模板　81
• 3．6　产品条目组件　83
  • 3．6．1　产品条目的组件配置　83
  • 3．6．2　产品条目组件的定义类　84
  • 3．6．3　产品条目组件的 template　84
  • 3．6．4　完整的 ProductRow 代码清单　85
• 3．8　价格展示组件　86
• 3．9　产品分类组件　87
• 3．10　创建 NgModule 并启动应用　88
• 3．11　完整的项目　89
• 3．12　关于数据架构的一点说明　90

第 4 章　内置指令

• 4．1　简介　91
• 4．2　ngIf　91
• 4．3　ngSwitch　92
• 4．4　ngStyle　93
• 4．5　ngClass　95
• 4．6　ngFor　98
• 4．7　ngNonBindable　102
• 4．8　总结　102

第 5 章　Angular 中的表单

• 5．1　表单——既重要，又复杂　103
• 5．2　FormControl 和 FormGroup　103
  • 5．2．1　FormControl　104
  • 5．2．2　FormGroup　104
• 5．3　我们的第一个表单　105
  • 5．3．1　加载 FormsModule　106
  • 5．3．2　简易 SKU 表单：@Component 注解　107
  • 5．3．3　简易 SKU 表单：template　107
  • 5．3．4　简易 SKU 表单：组件定义类　110
• 5．4　使用 FormBuilder　111
• 5．5　响应式表单 FormBuilder　112
  • 5．5．1　使用 FormBuilder　112
  • 5．5．2　在视图中使用 myForm　113
  • 5．5．3　试试看　114
• 5．6　添加验证　115
  • 5．6．1　显式地把 sku 设置为实例变量　116
  • 5．6．2　自定义验证器　120
• 5．7　监听变化　121
• 5．8　ngModel　122
• 5．9　总结　124

第 6 章　HTTP

• 6．1　简介　125
• 6．2　使用 @angular/http　126
• 6．3　基本请求　127
  • 6．3．1　构建 SimpleHTTPComponent 的 @Component　127
  • 6．3．2　构建 SimpleHTTPComponent 的 template　128
  • 6．3．3　构建 SimpleHTTPComponent 控制器　128
  • 6．3．4　完整的 SimpleHTTPComponent　130
• 6．4　编写 YouTubeSearchComponent　130
  • 6．4．1　编写 SearchResult　132
  • 6．4．2　编写 YouTubeService　132
  • 6．4．3　编写 SearchBox　140
  • 6．4．4　编写 SearchResultComponent　145
  • 6．4．5　编写 YouTubeSearchComponent　147
• 6．5　@angular/http API　150
  • 6．5．1　发起一个 POST 请求　150
  • 6．5．2　PUT/PATCH/DELETE/HEAD　150
  • 6．5．3　RequestOptions　151
• 6．6　总结　151

第 7 章　路由

• 7．1　为什么需要路由　152
• 7．2　客户端路由的工作原理　153
  • 7．2．1　初级阶段：使用锚标记　153
  • 7．2．2　进化：HTML5 客户端路由　154
• 7．3　编写第一个路由配置　155
• 7．4　Angular 路由的组成部件　155
  • 7．4．1　导入　155
  • 7．4．2　路由配置　155
  • 7．4．3　安装路由配置　156
  • 7．4．4　使用调用 RouterOutlet 指令　157
  • 7．4．5　使用 [routerLink] 调用 routerLink 指令　158
• 7．5　整合　159
  • 7．5．1　创建组件　160
  • 7．5．2　应用程序组件　161
  • 7．5．3　配置路由　163
• 7．6　路由策略　164
• 7．7　路径定位策略　165
• 7．8　运行应用程序　165
• 7．9　路由参数　167
• 7．10　音乐搜索应用　168
  • 7．10．1　首要步骤　169
  • 7．10．2　SpotifyService　170
  • 7．10．3　SearchComponent　171
  • 7．10．4　尝试搜索　179
  • 7．10．5　TrackComponent　180
  • 7．10．6　音乐搜索应用小结　182
• 7．11　路由器钩子　182
  • 7．11．1　AuthService　183
  • 7．11．2　LoginComponent　184
  • 7．11．3　ProtectedComponent 组件和路由守卫　186
• 7．12　嵌套路由　190
  • 7．12．1　配置路由　191
  • 7．12．2　ProductsComponent 组件　191
• 7．13　总结　194

第 8 章　依赖注入

• 8．1　注入示例：PriceService　196
• 8．2　“别打给我们……”　197
• 8．3　依赖注入的部件　199
• 8．4　尝试注入器　200
• 8．5　用 NgModule 提供依赖　201
• 8．6　提供者　202
  • 8．6．1　使用类　202
  • 8．6．2　使用工厂　203
  • 8．6．3　使用值　205
  • 8．6．4　使用别名　205
• 8．7　应用中的依赖注入　205
• 8．8　使用注入器　207
• 8．9　替换值　211
• 8．10　NgModule　215
  • 8．10．1　NgModule 与 JavaScript 模块　215
  • 8．10．2　编译器与组件　215
  • 8．10．3　依赖注入与提供者　216
  • 8．10．4　组件可见性　217
  • 8．10．5　指定提供者　218
• 8．11　总结　219

第 9 章　Angular 数据架构

第 10 章　使用可观察对象的数据架构，服务

• 10．1　可观察对象和 RxJS　222
  • 10．1．1　注意：一些必备的 RxJS 相关知识　222
  • 10．1．2　学习响应式编程和 RxJS　223
• 10．2　聊天应用概览　224
  • 10．2．1　组件　225
  • 10．2．2　数据模型　226
  • 10．2．3　服务　226
  • 10．2．4　总结　226
• 10．3　实现数据模型　227
  • 10．3．1　User　227
  • 10．3．2　Thread　227
  • 10．3．3　Message　228
• 10．4　实现 UserService　228
  • 10．4．1　currentUser 流　229
  • 10．4．2　设置新用户　230
  • 10．4．3　UserService．ts　231
• 10．5　MessagesService　231
  • 10．5．1　newMessages 流　231
  • 10．5．2　messages 流　233
  • 10．5．3　操作流模式　233
  • 10．5．4　共享流　234
  • 10．5．5　把 Message 对象添加到 messages 流中　235
  • 10．5．6　完整的 MessagesService　238
  • 10．5．7　试用 MessagesService　241
• 10．6　ThreadsService　242
  • 10．6．1　当前一组 Thread 的映射（threads 流）　242
  • 10．6．2　按时间逆序排列的 Thread 列表（orderedthreads 流）　246
  • 10．6．3　当前已选的 Thread（currentThread 流）　246
  • 10．6．4　当前已选 Thread 的 Message 列表（currentThreadMessages 流）　248
  • 10．6．5　完整的 ThreadsService　250
• 10．7　总结　251

第 11 章　使用可观察对象的数据架构，视图组件

• 11．1　构建视图：顶层组件 ChatApp　252
• 11．2　ChatThreads 组件　254
  • 11．2．1　ChatThreads 控制器　255
  • 11．2．2　ChatThreads 的 template　256
• 11．3．1　ChatThread 控制器和 ngOnInit　257
• 11．3．2　ChatThread 的 template　258
• 11．3．3　ChatThread 的完整代码　258
• 11．4　ChatWindow 组件　259
  • 11．4．1　ChatWindow 组件类属性　260
  • 11．4．2　ChatWindow 的 ngOnInit　261
  • 11．4．3　ChatWindow 的 sendMessage　261
  • 11．4．4　ChatWindow 的 onEnter　262
  • 11．4．5　ChatWindow 的 scrollToBottom　262
  • 11．4．6　ChatWindow 的 template　263
  • 11．4．7　处理键盘动作　264
  • 11．4．8　使用 ngModel　264
  • 11．4．9　点击 Send 按钮　265
  • 11．4．10　完整的 ChatWindow 组件　267
• 11．5．1　设置 incoming 属性　268
• 11．5．2　ChatMessage 的 template　270
• 11．6　ChatNavBar 组件　273
  • 11．6．1　ChatNavBar 的 @Component　273
  • 11．6．3　ChatNavBar 的 template　274
  • 11．6．4　完整的 ChatNavBar 组件　275
• 11．7　总结　276
• 11．8　更进一步　277

第 12 章　基于 TypeScript 的 Redux 简介

• 12．1　Redux　279
• 12．2　Redux 核心概念　280
  • 12．2．1　reducer 是什么　280
  • 12．2．2　定义 Action 和 Reducer 的接口　281
  • 12．2．3　创建第一个 Reducer　281
  • 12．2．4　运行第一个 Reducer　282
  • 12．2．5　使用 action 调整计数器　283
  • 12．2．6　reducer 的 switch　284
  • 12．2．7　action 的“参数”　285
• 12．3　保存 state　286
  • 12．3．1　使用 store　287
  • 12．3．2　使用 subscribe 进行通知　287
  • 12．3．3　Redux 核心　290
• 12．4　消息应用　291
  • 12．4．1　消息应用的 state　291
  • 12．4．2　消息应用的 action　292
  • 12．4．3　消息应用的 reducer　292
  • 12．4．4　试用 action　295
  • 12．4．5　action creator　296
  • 12．4．6　使用真正的 Redux　297
• 12．5　在 Angular 中使用 Redux　299
• 12．6　规划应用　299
• 12．7　组建 Redux　300
  • 12．7．1　定义应用的 state　300
  • 12．7．2　定义 reducer　301
  • 12．7．3　定义 action creator　301
  • 12．7．4　创建 store　302
• 12．8　CounterApp 组件　303
• 12．9　提供 store　304
• 12．10　启动应用　305
• 12．11　CounterComponent　306
  • 12．11．1　import　306
  • 12．11．2　模板　306
  • 12．11．3　constructor　307
  • 12．11．4　整合　308
• 12．12　更进一步　310
• 12．13　参考资源　310

第 13 章　在 Angular 中引入 Redux

• 13．1　阅读背景　312
• 13．2　聊天应用概览　313
  • 13．2．1　组件　313
  • 13．2．2　数据模型　314
  • 13．2．3　reducer　315
  • 13．2．4　总结　315
• 13．3　实现数据模型　315
  • 13．3．1　User　315
  • 13．3．2　Thread　316
  • 13．3．3　Message　316
• 13．4　应用的 state　316
• 13．4．1　关于代码布局　317
  • 13．4．2　根 reducer　317
  • 13．4．3　UserState　318
  • 13．4．4　ThreadsState　318
  • 13．4．5　可视化 AppState　319
• 13．5　构建 reducer（和 action creator）　321
  • 13．5．1　设置当前用户的 action creator　321
  • 13．5．2　UsersReducer：设置当前用户　321
  • 13．5．3　会话和消息概览　322
  • 13．5．4　添加新会话的 action creator　322
  • 13．5．5　添加新会话的 reducer　323
  • 13．5．6　添加新消息的 action creator　324
  • 13．5．7　添加新消息的 reducer　325
  • 13．5．8　选择会话的 action creator　326
  • 13．5．9　选择会话的 reducer　327
  • 13．5．10　reducer 总结　328
• 13．6　构建 Angular 聊天应用　328
  • 13．6．1　顶层组件 ChatApp　330
  • 13．6．2　ChatPage　330
  • 13．6．3　容器型组件与展示型组件　332
• 13．7．1　Redux 选择器　334
• 13．7．2　会话选择器　334
• 13．7．3　未读消息总数选择器　336
• 13．8　构建 ChatThreads 组件　336
• 13．8．1　ChatThreads 控制器　337
• 13．8．2　ChatThreads 的 template　338
• 13．10　构建 ChatWindow 组件　340
  • 13．10．1　ChatWindow 的 updateState()　341
  • 13．10．2　ChatWindow 的 scrollToBottom()　342
  • 13．10．3　ChatWindow 的 sendMessage　342
  • 13．10．4　ChatWindow 的 onEnter　343
  • 13．10．6　处理键盘动作　345
  • 13．10．7　使用 ngModel　345
  • 13．10．8　点击 Send 按钮　345
• 13．11　ChatMessage 组件　345
  • 13．11．1　设置 incoming 属性　346
  • 13．11．2　ChatMessage 的 template　346
• 13．12　总结　347

第 14 章　高级组件

• 14．1　样式　349
  • 14．1．1　视图（样式）封装　351
  • 14．1．2　Shadow DOM 封装　354
  • 14．1．3　不使用封装　355
• 14．2　创建 popup 指令：引用并修改宿主元素　357
  • 14．2．1　popup 指令的结构　357
  • 14．2．2　使用 ElementRef　359
  • 14．2．3　绑定到 host 属性　360
  • 14．2．4　添加按钮并使用 exportAs　363
• 14．3．1　改变 host 属性的 CSS 类　364
• 14．3．2　使用 ng-content　364
• 14．4　查询相邻的指令：编写标签页　366
  • 14．4．1　Tab 组件　367
  • 14．4．2　Tabset 组件　367
  • 14．4．3　使用 Tabset　369
• 14．5　生命周期钩子　370
  • 14．5．1　OnInit 和 OnDestroy　371
  • 14．5．2　OnChanges　374
  • 14．5．3　DoCheck　378
  • 14．5．4　AfterContentInit、AfterViewInit、AfterContentChecked 和 AfterViewChecked　386
• 14．6　高级模板　391
  • 14．6．1　重写 ngIf：ngBookIf　392
  • 14．6．2　重写 ngFor：ngBookRepeat　394
• 14．7　变更检测　398
  • 14．7．1　自定义变更检测　401
  • 14．7．2　Zones　405
  • 14．7．3　可观察对象和 OnPush　406
• 14．8　总结　409

第 15 章　测试

• 15．1　测试驱动？　410
• 15．2　端对端测试与单元测试　411
• 15．3　测试工具　411
  • 15．3．1　Jasmine　411
  • 15．3．2　Karma　412
• 15．4　编写单元测试　412
• 15．5　Angular 单元测试框架　412
• 15．6　测试前准备　413
• 15．7　测试服务类和 HTTP　415
  • 15．7．1　HTTP 要点　416
  • 15．7．2　伪装　417
  • 15．7．3　模拟　417
  • 15．7．4　Http MockBackend　418
  • 15．7．5　TestBed．configureTestingModule 和提供者　418
  • 15．7．6　测试 getTrack 方法　419
• 15．8　测试组件间的路由　424
  • 15．8．1　为测试创建路由器　424
  • 15．8．2　模拟依赖　427
  • 15．8．3　探子　427
• 15．9　回到测试代码　429
  • 15．9．1　fakeAsync 和 advance　431
  • 15．9．2　inject　432
  • 15．9．3　测试 ArtistComponent 组件初始化　432
  • 15．9．4　测试 ArtistComponent 方法　433
  • 15．9．5　测试 ArtistComponent DOM 模板值　434
• 15．10　测试表单　436
  • 15．10．1　创建一个 ConsoleSpy　438
  • 15．10．2　安装 ConsoleSpy　439
  • 15．10．3　配置测试模块　439
  • 15．10．4　测试表单　440
  • 15．10．5　重构表单测试　441
• 15．11　测试 HTTP 请求　444
  • 15．11．1　测试 POST 方法　445
  • 15．11．2　测试 DELETE 方法　446
  • 15．11．3　测试 HTTP 头　447
  • 15．11．4　测试 YouTubeService　448
• 15．12　总结　452

第 16 章　把 AngularJS 应用升级到 Angular

• 16．1　周边概念　453
• 16．2　我们要构建什么　454
• 16．3　把 AngularJS 映射到 Angular　455
• 16．4　关于互操作性的需求　456
• 16．5　AngularJS 应用　456
  • 16．5．1　AngularJS 应用的 HTML　458
  • 16．5．2　代码概览　458
  • 16．5．3　AngularJS：PinsService　459
  • 16．5．4　AngularJS：配置路由　460
  • 16．5．5　AngularJS：HomeController　461
  • 16．5．6　AngularJS：HomeController 模板　461
  • 16．5．7　AngularJS：pin 指令　462
  • 16．5．8　AngularJS：pin 指令模板　463
  • 16．5．10　AngularJS：AddController 模板　465
  • 16．5．11　AngularJS：总结　467
• 16．6　构建混合式应用　468
  • 16．6．1　混合式应用的结构　468
  • 16．6．2　引导混合式应用　471
  • 16．6．3　我们要升级什么　473
  • 16．6．4　插一小段内容：类型文件　479
  • 16．6．6　使用 Angular 的 PinControlsComponent　481
  • 16．6．7　把 Angular 的 PinControlsComponent 降级到 AngularJS　482
  • 16．6．8　用 Angular 添加图钉　483
  • 16．6．9　把 AngularJS 的 PinsService 和 $state 升级到 Angular　484
  • 16．6．10　写 Angular 版的 AddPinComponent　485
  • 16．6．11　使用 AddPinComponent　490
  • 16．6．12　把 Angular 的服务暴露给 AngularJS　490
  • 16．6．13　实现 AnalyticsService　491
  • 16．6．14　把 Angular 的 AnalyticsService 降级到 AngularJS　492
• 16．7　总结　493
• 16．8　参考资源　493