Angular权威教程 内容简介

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

Angular权威教程 本书特色

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

Angular权威教程 目录

第1章编写你的**个Angular Web应用1
1.1仿制Reddit网站1
1.2起步3
1.2.1TypeScript3
1.2.2angular-cli3
1.2.3示例项目4
1.3运行应用7
1.3.1制作Component8
1.3.2导入依赖9
1.3.3Component注解10
1.3.4用templateUrl添加模板11
1.3.5添加template11
1.3.6用styleUrls添加CSS样式12
1.3.7加载组件12
1.4把数据添加到组件中13
1.5使用数组15
1.6使用UserItemComponent组件18
1.6.1渲染UserItemComponent18
1.6.2接收输入19
1.6.3传入Input值20
1.7“启动”速成班21
1.8扩展你的应用22
1.8.1添加CSS24
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配置ArticleComponent41
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章TypeScript47
2.1Angular是用TypeScript构建的47
2.2TypeScript提供了哪些特性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的工作原理60
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组件selector66
3.4.2组件template67
3.4.3添加产品67
3.4.4用模板绑定来查看产品68
3.4.5添加更多产品69
3.4.6选择一个产品70
3.4.7用列出产品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产品条目组件的template84
3.6.4完整的ProductRow代码清单85
3.8价格展示组件86
3.9产品分类组件87
3.10创建NgModule并启动应用88
3.11完整的项目89
3.12关于数据架构的一点说明90
第4章内置指令91
4.1简介91
4.2ngIf91
4.3ngSwitch92
4.4ngStyle93
4.5ngClass95
4.6ngFor98
4.7ngNonBindable102
4.8总结102
第5章Angular中的表单103
5.1表单——既重要，又复杂103
5.2FormControl和FormGroup103
5.2.1FormControl104
5.2.2FormGroup104
5.3我们的**个表单105
5.3.1加载FormsModule106
5.3.2简易SKU表单：@Component注解107
5.3.3简易SKU表单：template107
5.3.4简易SKU表单：组件定义类110
5.4使用FormBuilder111
5.5响应式表单 FormBuilder112
5.5.1使用FormBuilder112
5.5.2在视图中使用myForm113
5.5.3试试看114
5.6添加验证115
5.6.1显式地把sku设置为实例变量116
5.6.2自定义验证器120
5.7监听变化121
5.8ngModel122
5.9总结124
第6章HTTP125
6.1简介125
6.2使用@angular http126
6.3基本请求127
6.3.1构建SimpleHTTPComponent的@Component127
6.3.2构建SimpleHTTPComponent的template128
6.3.3构建SimpleHTTPComponent控制器128
6.3.4完整的SimpleHTTPComponent130
6.4编写YouTubeSearchComponent130
6.4.1编写SearchResult132
6.4.2编写YouTubeService132
6.4.3编写SearchBox140
6.4.4编写SearchResultComponent145
6.4.5编写YouTubeSearchComponent147
6.5@angular http API150
6.5.1发起一个POST请求150
6.5.2PUT PATCH DELETE HEAD150
6.5.3RequestOptions151
6.6总结151
第7章路由152
7.1为什么需要路由152
7.2客户端路由的工作原理153
7.2.1初级阶段：使用锚标记153
7.2.2进化：HTML5客户端路由154
7.3编写**个路由配置155
7.4Angular路由的组成部件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.2SpotifyService170
7.10.3SearchComponent171
7.10.4尝试搜索179
7.10.5TrackComponent180
7.10.6音乐搜索应用小结182
7.11路由器钩子182
7.11.1AuthService183
7.11.2LoginComponent184
7.11.3ProtectedComponent组件和路由守卫186
7.12嵌套路由190
7.12.1配置路由191
7.12.2ProductsComponent组件191
7.13总结194
第8章依赖注入195
8.1注入示例：PriceService196
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.10NgModule215
8.10.1NgModule与JavaScript模块215
8.10.2编译器与组件215
8.10.3依赖注入与提供者216
8.10.4组件可见性217
8.10.5指定提供者218
8.11总结219
第9章Angular数据架构220
第10章使用可观察对象的数据架构，第1 部分：服务222
10.1可观察对象和RxJS222
10.1.1注意：一些**的RxJS相关知识222
10.1.2学习响应式编程和RxJS223
10.2聊天应用概览224
10.2.1组件225
10.2.2数据模型226
10.2.3服务226
10.2.4总结226
10.3实现数据模型227
10.3.1User227
10.3.2Thread227
10.3.3Message228
10.4实现UserService228
10.4.1currentUser流229
10.4.2设置新用户230
10.4.3UserService.ts231
10.5MessagesService231
10.5.1newMessages流231
10.5.2messages流233
10.5.3操作流模式233
10.5.4共享流234
10.5.5把Message对象添加到messages流中235
10.5.6完整的MessagesService238
10.5.7试用MessagesService241
10.6ThreadsService242
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完整的ThreadsService250
10.7总结251
第11章使用可观察对象的数据架构，第2部分：视图组件252
11.1构建视图：顶层组件ChatApp252
11.2ChatThreads组件254
11.2.1ChatThreads控制器255
11.2.2ChatThreads的template256
11.3.1ChatThread控制器和ngOnInit257
11.3.2ChatThread的template258
11.3.3ChatThread的完整代码258
11.4ChatWindow组件259
11.4.1ChatWindow组件类属性260
11.4.2ChatWindow的ngOnInit261
11.4.3ChatWindow的sendMessage261
11.4.4ChatWindow的onEnter262
11.4.5ChatWindow的scrollToBottom262
11.4.6ChatWindow 的template263
11.4.7处理键盘动作264
11.4.8使用ngModel264
11.4.9点击Send按钮265
11.4.10完整的ChatWindow组件267
11.5.1设置incoming属性268
11.5.2ChatMessage的template270
11.6ChatNavBar组件273
11.6.1ChatNavBar的@Component273
11.6.3ChatNavBar的template274
11.6.4完整的ChatNavBar组件275
11.7总结276
11.8更进一步277
第12章基于TypeScript的Redux简介278
12.1Redux279
12.2Redux核心概念280
12.2.1reducer是什么280
12.2.2定义Action和Reducer的接口281
12.2.3创建**个Reducer281
12.2.4运行**个Reducer282
12.2.5使用action调整计数器283
12.2.6reducer的switch284
12.2.7action的“参数”285
12.3保存state286
12.3.1使用store287
12.3.2使用subscribe进行通知287
12.3.3Redux核心290
12.4消息应用291
12.4.1消息应用的state291
12.4.2消息应用的action292
12.4.3消息应用的reducer292
12.4.4试用action295
12.4.5action creator296
12.4.6使用真正的Redux297
12.5在Angular中使用Redux299
12.6规划应用299
12.7组建Redux300
12.7.1定义应用的state300
12.7.2定义reducer301
12.7.3定义action creator301
12.7.4创建store302
12.8CounterApp组件303
12.9提供store304
12.10启动应用305
12.11CounterComponent306
12.11.1import306
12.11.2模板306
12.11.3constructor307
12.11.4整合308
12.12更进一步310
12.13参考资源310
第13章在Angular中引入Redux312
13.1阅读背景312
13.2聊天应用概览313
13.2.1组件313
13.2.2数据模型314
13.2.3reducer315
13.2.4总结315
13.3实现数据模型315
13.3.1User315
13.3.2Thread316
13.3.3Message316
13.4应用的state316
13.4.1关于代码布局317
13.4.2根reducer317
13.4.3UserState318
13.4.4ThreadsState318
13.4.5可视化AppState319
13.5构建reducer（和action creator）321
13.5.1设置当前用户的action creator321
13.5.2UsersReducer：设置当前用户321
13.5.3会话和消息概览322
13.5.4添加新会话的action creator322
13.5.5添加新会话的reducer323
13.5.6添加新消息的action creator324
13.5.7添加新消息的reducer325
13.5.8选择会话的action creator326
13.5.9选择会话的reducer327
13.5.10reducer总结328
13.6构建Angular聊天应用328
13.6.1顶层组件ChatApp330
13.6.2ChatPage330
13.6.3容器型组件与展示型组件332
13.7.1Redux选择器334
13.7.2会话选择器334
13.7.3未读消息总数选择器336
13.8构建ChatThreads组件336
13.8.1ChatThreads控制器337
13.8.2ChatThreads的template338
13.10构建ChatWindow组件340
13.10.1ChatWindow的updateState()341
13.10.2ChatWindow的scrollToBottom()342
13.10.3ChatWindow的sendMessage342
13.10.4ChatWindow的onEnter343
13.10.6处理键盘动作345
13.10.7使用ngModel345
13.10.8点击Send按钮345
13.11ChatMessage组件345
13.11.1设置incoming属性346
13.11.2ChatMessage的template346
13.12总结347
第14章高级组件349
14.1样式349
14.1.1视图（样式）封装351
14.1.2Shadow DOM 封装354
14.1.3不使用封装355
14.2创建popup指令：引用并修改宿主元素357
14.2.1popup指令的结构357
14.2.2使用ElementRef359
14.2.3绑定到host属性360
14.2.4添加按钮并使用exportAs363
14.3.1改变host属性的CSS类364
14.3.2使用ng-content364
14.4查询相邻的指令：编写标签页366
14.4.1Tab组件367
14.4.2Tabset组件367
14.4.3使用Tabset369
14.5生命周期钩子370
14.5.1OnInit和OnDestroy371
14.5.2OnChanges374
14.5.3DoCheck378
14.5.4AfterContentInit、AfterViewInit、AfterContentChecked和AfterViewChecked386
14.6高级模板391
14.6.1重写ngIf：ngBookIf392
14.6.2重写ngFor：ngBookRepeat394
14.7变更检测398
14.7.1自定义变更检测401
14.7.2Zones405
14.7.3可观察对象和OnPush406
14.8总结409
第15章测试410
15.1测试驱动？410
15.2端对端测试与单元测试411
15.3测试工具411
15.3.1Jasmine411
15.3.2Karma412
15.4编写单元测试412
15.5Angular单元测试框架412
15.6测试前准备413
15.7测试服务类和HTTP415
15.7.1HTTP要点416
15.7.2伪装417
15.7.3模拟417
15.7.4Http MockBackend418
15.7.5TestBed.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.1fakeAsync和advance431
15.9.2inject432
15.9.3测试ArtistComponent组件初始化432
15.9.4测试ArtistComponent方法433
15.9.5测试ArtistComponent DOM模板值434
15.10测试表单436
15.10.1创建一个ConsoleSpy438
15.10.2安装ConsoleSpy439
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测试YouTubeService448
15.12总结452
第16章把AngularJS应用升级到Angular453
16.1周边概念453
16.2我们要构建什么454
16.3把AngularJS映射到Angular455
16.4关于互操作性的需求456
16.5AngularJS应用456
16.5.1AngularJS应用的HTML458
16.5.2代码概览458
16.5.3AngularJS：PinsService459
16.5.4AngularJS：配置路由460
16.5.5AngularJS：HomeController461
16.5.6AngularJS：HomeController模板461
16.5.7AngularJS：pin指令462
16.5.8AngularJS：pin指令模板463
16.5.10AngularJS：AddController模板465
16.5.11AngularJS：总结467
16.6构建混合式应用468
16.6.1混合式应用的结构468
16.6.2引导混合式应用471
16.6.3我们要升级什么473
16.6.4插一小段内容：类型文件479
16.6.6使用Angular的PinControlsComponent481
16.6.7把Angular的PinControlsComponent 降级到AngularJS482
16.6.8用Angular添加图钉483
16.6.9把AngularJS的PinsService和$state升级到Angular484
16.6.10写Angular版的AddPinComponent485
16.6.11使用AddPinComponent490
16.6.12把Angular的服务暴露给AngularJS490
16.6.13实现AnalyticsService491
16.6.14把Angular的AnalyticsService降级到AngularJS492
16.7总结493
16.8参考资源493

Angular权威教程 相关资料

“很高兴这本《Angular权威教程》成为Angular中文资源的一部分，希望它能广受欢迎，给中国的Angular社区提供一份令人愉悦的学习资源，也希望它帮助更多工程师开始使用下一代Angular框架来开发应用。”——Naomi Black，GoogleAngular项目经理兼主管 “作为一项开源技术和前沿Web开发框架，Angular持续吸引着中国区开发人员的关注。作为雪狼及其所属Nice Angular社区的集体工作成果，这本书是开源力量的又一次证明，证明这种热情、这种志愿精神确实可以帮助业界享受到*的开发技术。”——栾跃，Google开发技术推广部大中华区主管 “作者们太棒了！如果没有这本书，真不知道我该怎么学习Angular。你们让学习并跟进Angular变得更简单了。再次感谢！”——Jacob Cheriathundam，AccountsPRO公司CTO、高级开发工程师兼开发架构师 “如果你和我一样是一名经验丰富的开发者，并且在积极寻找关于Angular*信息的高效来源，那就别再找了！这本书就是很棒的参考资料，简洁易懂、结构合理。”——Frederic Filiatrault，TEKsystem公司高级软件工程师 “我在书中获取了大量有价值的信息，而这是在其他网络资源中无法做到的。在我深入这些前沿工具和主题的时候，这本书给了我极大帮助。”——Sean McGill，Anexinet公司高级顾问

Angular权威教程 作者简介

AriLerner 全栈工程师，拥有多年Angular经验，自办并运营Angular电子报ng-newsletter.com，在著名硅谷工程师培训学校Hack Reactor担任AngularJS讲师。Fullstack.io创始人。FelipeCoury GistiaLabs联合创始人兼CTO。NateMurray 全栈工程师，曾任职于IFTTT，拥有数据挖掘和增量Web服务等方面的背景。CarlosTaborda GistiaLabs联合创始人兼主管。