Angular权威教程 轻松领悟新一代Web开发精髓 Ari Lerner

　　编辑推荐
8 g; W  e% t9 p; U　　* 强力的IDE支持+完善的生态圈+一套代码、多种平台+……=Angular* 知名全栈开发工程师经验总结
　　* 雪狼组织的Nice Angular社区主力倾情翻译
8 e& z. x2 Q! Y  t% Z: {# A# f　　* Google推荐阅读
+ K- T9 ]0 r" u- U; D5 U: m　　本书内容循序渐进，帮你在短时间内毫不费力地掌握整个Angular框架并打好坚实的基础，工作效率获得极大的提升。
　　书中包含丰富的示例应用，展示如何编写组件、如何使用表单和API，还会带你学习如何使用Angular创建：
　　- 基于组件的仿制版Reddit
" c6 }# m7 x2 s- r　　- 使用RxJS可观察对象的实时聊天应用
　　- “随敲随搜”的YouTube搜索应用
) I$ q) {4 r0 _8 g: Z6 s: t8 ]　　- 带有可播放乐曲预览的Spotify曲目搜索应用内容简介
　　本书堪称Angular领域的里程碑式著作，涵盖了关于Angular的几乎所有内容。对于没有经验的人，本书平实、通俗的讲解，递进、严密的组织，可以让人毫无压力地登堂入室，迅速领悟新一代Web应用开发的精髓。如果你有相关经验，那本书对Angular概念和技术细节的全面剖析，以及引人入胜、切中肯綮的讲解，将帮助你彻底掌握这个框架，在自己职业技术修炼之路上更进一步。
7 d$ I8 o8 y/ x" ?　　作者简介
6 |5 w6 M5 P$ h　　Ari Lerner
　　全栈工程师，拥有多年Angular经验，自办并运营Angular电子报ng-newsletter.com，在知名硅谷工程师培训学校Hack Reactor担任AngularJS讲师。Fullstack.io创始人。
　　Felipe Coury
: n) q* \5 W0 L' ?6 d& R2 T9 _- X9 X　　Gistia Labs联合创始人兼CTO。
　　Nate Murray
　　全栈工程师，曾任职于IFTTT，拥有数据挖掘和增量Web服务等方面的背景。
　　Carlos Taborda
6 l8 k$ t. q+ h, f　　Gistia Labs联合创始人兼主管。
　　目录
　　第1章　编写你的第一个Angular Web应用　　11．1　仿制Reddit网站　1
$ e3 z3 L" D- q9 B; ?+ [　　1．2　起步　3
: F7 R3 t% Z0 w# I5 R8 m　　1．2．1　TypeScript　3
　　1．2．2　angular-cli　3
　　1．2．3　示例项目　4
　　1．3　运行应用　7
+ y+ Q6 u% n. {9 V& J　　1．3．1　制作Component　8
　　1．3．2　导入依赖　9
　　1．3．3　Component注解　10
3 v& g/ V4 [' c; u+ `7 P+ T　　1．3．4　用templateUrl添加模板　11
' i. I7 @) Y5 x; a8 d- F　　1．3．5　添加template　11
　　1．3．6　用styleUrls添加CSS样式　12
　　1．3．7　加载组件　12
　　1．4　把数据添加到组件中　13
0 @. W; ^! Q% _　　1．5　使用数组　15
: I( t2 |9 V( c: b5 z; N　　1．6　使用UserItemComponent组件　18
　　1．6．1　渲染UserItemComponent　18
　　1．6．2　接收输入　19
　　1．6．3　传入Input值　20
　　1．7　“启动”速成班　21
! H2 w& \+ q5 K# P: o: R　　1．8　扩展你的应用　22
4 M7 m' A) E0 B/ s# R9 Y　　1．8．1　添加CSS　24
　　1．8．2　应用程序组件　24
　　1．8．3　添加互动　26
　　1．8．4　添加文章组件　29
: N( z2 c& O" A( i4 _　　1．9　渲染多行　36
5 H4 A: B2 \. d" G　　1．9．1　创建Article类　36
0 G0 M$ X2 v, c% ~7 B　　1．9．2　存储多篇文章　40
　　1．9．3　使用inputs配置ArticleComponent　411．9．4　渲染文章列表　42
: ^5 L8 F) x. ^& q' }' o　　1．10　添加新文章　44
　　1．11　最后的修整　44
, `' f8 m8 M, |3 }+ c" h6 G. i　　1．11．1　显示文章所属的域名　44
　　1．11．2　基于分数重新排序　45
　　1．12　全部代码　45
* c" m1 F; k4 a. F  }　　1．13　总结　45
　　1．14　获得帮助　46
　　第2章　TypeScript　47
: U! d# ^7 y/ ?7 j$ t/ g* h　　2．1　Angular是用TypeScript构建的　47
  {) D! ]/ J, o/ C　　2．2　TypeScript提供了哪些特性　48
( z/ h' [+ g8 H) @8 a　　2．3　类型　49
　　2．4　内置类型　50
　　2．4．1　字符串　50
　　2．4．2　数字　50
　　2．4．3　布尔类型　51
" T5 Y: m9 _) \& u　　2．4．4　数组　51
* }2 Q# _( Z; Q　　2．4．5　枚举　51
( U9 R, y) ^: C1 k4 s, t　　2．4．6　任意类型　52
　　2．4．7　“无”类型　52
# _4 J1 U8 d  A2 O4 I# j% I1 H　　2．5　类　52
　　2．5．1　属性　52
　　2．5．2　方法　53
　　2．5．3　构造函数　54
6 J: }% d9 k) I( {" u　　2．5．4　继承　55
. [  m0 c3 \5 n: }　　2．6　工具　57
, B0 N8 [' _' f) Y* d) N* y　　2．6．1　胖箭头函数　57
% X! O" V2 ~9 b6 @　　2．6．2　模板字符串　58
　　2．7　总结　59
% t$ h7 P' C2 ?4 M0 _; c　　第3章　Angular的工作原理　60
+ ]" V- m* D! L% P+ f) L　　3．1　应用　60
$ |3 e8 w8 @# y6 H: V, _, |- s　　3．1．1　主导航组件　61
　　3．1．2　面包屑导航组件　61
　　3．1．3　产品列表组件　62
　　3．2　产品数据模型　64
* p" ^0 W( w/ Z" N' Y" w, g　　3．3　组件　64
: Y9 Q5 x1 D( U2 o) f　　3．4　组件注解　66
1 ?3 ^$ m, q) m　　3．4．1　组件selector　66
　　3．4．2　组件template　67
6 O* G% c5 c  Y( P& g0 i8 F　　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配置项　733．5．2　组件的输入　74
　　3．5．3　组件的输出　77
　　3．5．4　触发自定义事件　78
* V) Y* |! L( Z  W% |) ?5 [/ s2 u　　3．5．5　编写ProductsList的控制器类　79
2 G8 K5 a* ~" v% {5 S3 }/ I　　3．5．6　编写ProdctsList的视图模板　81
　　3．6　产品条目组件　83
　　3．6．1　产品条目的组件配置　83
　　3．6．2　产品条目组件的定义类　84
& w" g& i& a( i! d6 \! T3 ]　　3．6．3　产品条目组件的template　84
! ?4 b& p5 M6 O+ Y+ T* X' ^　　3．6．4　完整的ProductRow代码清单　85
, p5 d( p7 K! |+ }7 a2 H- \9 _　　3．8　价格展示组件　86
% ~' ]. M8 E0 T$ E  c( x　　3．9　产品分类组件　87
( e% t, \* r$ T- t9 R+ f' X　　3．10　创建NgModule并启动应用　88
' ?9 K; h- G5 ^7 ?　　3．11　完整的项目　89
. n7 X  b7 ?! `7 h　　3．12　关于数据架构的一点说明　90
　　第4章　内置指令　91
　　4．1　简介　91
$ s7 F4 s: O0 F/ P　　4．2　ngIf　91
( D% t; a5 Q# M9 c& b　　4．3　ngSwitch　92
　　4．4　ngStyle　93
　　4．5　ngClass　95
. }2 H1 K  ^% s% Y3 T6 v5 Q! K/ q" ?/ E　　4．6　ngFor　98
　　4．7　ngNonBindable　102
0 q0 c% C& W  T+ r: w" a' ~3 _　　4．8　总结　102
　　第5章　Angular中的表单　103
　　5．1　表单——既重要，又复杂　103
　　5．2　FormControl和FormGroup　103
  x/ |  G( V* |, ^$ r　　5．2．1　FormControl　104
　　5．2．2　FormGroup　104
. o9 S, g8 W+ y+ [　　5．3　我们的第一个表单　105
3 y/ q- M  @" g* E　　5．3．1　加载FormsModule　106
　　5．3．2　简易SKU表单：@Component注解　1075．3．3　简易SKU表单：template　107
　　5．3．4　简易SKU表单：组件定义类　110
. V0 y3 B! M* q! L0 f　　5．4　使用FormBuilder　111
　　5．5　响应式表单 FormBuilder　112
$ [: o# Q) v' B) h( W9 R; ?　　5．5．1　使用FormBuilder　112
# }/ L2 ?. j3 }　　5．5．2　在视图中使用myForm　113
　　5．5．3　试试看　114
" M, b9 f' O# G　　5．6　添加验证　115
　　5．6．1　显式地把sku设置为实例变量　116
　　5．6．2　自定义验证器　120
3 {; Q: b6 O$ Q$ n8 P　　5．7　监听变化　121
　　5．8　ngModel　122
5 ^6 X/ g9 f9 c　　5．9　总结　124
　　第6章　HTTP　125
　　6．1　简介　125
/ n$ }  V& j7 L. U5 j4 @. F# w　　6．2　使用@angular/http　126
+ V- A! ~. D9 A% ?7 P6 i　　6．3　基本请求　127
　　6．3．1　构建SimpleHTTPComponent的@Component　1276．3．2　构建SimpleHTTPComponent的template　1286．3．3　构建SimpleHTTPComponent控制器　1286．3．4　完整的SimpleHTTPComponent　130
　　6．4　编写YouTubeSearchComponent　130
% H  n( a) [& g* U　　6．4．1　编写SearchResult　132
　　6．4．2　编写YouTubeService　132
+ d2 Z! v; ?9 |) @  M' J　　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
" u9 R7 Q/ F/ c　　6．5．2　PUT/PATCH/DELETE/HEAD　150
, L8 w/ \. M- \# ?! @4 R$ D8 ~) l$ D& n1 o% P　　6．5．3　RequestOptions　151
　　6．6　总结　151
: W6 P% A( J3 G- ?) v4 t　　第7章　路由　152
　　7．1　为什么需要路由　152
　　7．2　客户端路由的工作原理　153
　　7．2．1　初级阶段：使用锚标记　153
　　7．2．2　进化：HTML5客户端路由　154
1 q8 b; T9 k$ z& J$ E$ z　　7．3　编写第一个路由配置　155
+ l7 X; w* a, B0 y' Q+ a7 ]　　7．4　Angular路由的组成部件　155
　　7．4．1　导入　155
: r3 L- e/ c6 m0 D' ~　　7．4．2　路由配置　155
　　7．4．3　安装路由配置　156
　　7．4．4　使用调用RouterOutlet指令　157
　　7．4．5　使用[routerLink]调用routerLink指令　1587．5　整合　159
　　7．5．1　创建组件　160
9 r/ R- N0 x9 ~3 l　　7．5．2　应用程序组件　161
　　7．5．3　配置路由　163
　　7．6　路由策略　164
* G9 u! o" c$ I2 Y; X* B　　7．7　路径定位策略　165
　　7．8　运行应用程序　165
! a# F6 r/ I5 H, q, S　　7．9　路由参数　167
: M* e8 }! D2 Y6 h　　7．10　音乐搜索应用　168
# Q& X5 m+ H: c8 M' `　　7．10．1　首要步骤　169
　　7．10．2　SpotifyService　170
  T5 J2 `& k2 v5 H$ R0 Z  h$ s　　7．10．3　SearchComponent　171
  s6 a+ J+ N3 x3 g8 k* y$ ?9 n　　7．10．4　尝试搜索　179
　　7．10．5　TrackComponent　180
　　7．10．6　音乐搜索应用小结　182
' \5 `' W) F* b0 d8 L4 l　　7．11　路由器钩子　182
" F$ `  v& @+ C4 e8 w　　7．11．1　AuthService　183
　　7．11．2　LoginComponent　184
3 q% a( o8 @- s4 Q5 ?$ P/ {　　7．11．3　ProtectedComponent组件和路由守卫　1867．12　嵌套路由　190
　　7．12．1　配置路由　191
　　7．12．2　ProductsComponent组件　191
　　7．13　总结　194
　　第8章　依赖注入　195
$ N" d1 x6 f# k$ ^/ b! d( b, \　　8．1　注入示例：PriceService　196
* _9 E, h% s( J　　8．2　“别打给我们……”　197
　　8．3　依赖注入的部件　199
　　8．4　尝试注入器　200
　　8．5　用NgModule提供依赖　201
  N! M8 \; `. ~/ l/ d　　8．6　提供者　202
　　8．6．1　使用类　202
0 B& U% T- ]+ ~7 [- F4 n4 ]　　8．6．2　使用工厂　203
( L' H2 e8 L0 q" u7 V& N8 e　　8．6．3　使用值　205
, a$ [6 \: G9 x, t. S7 }6 x　　8．6．4　使用别名　205
　　8．7　应用中的依赖注入　205
　　8．8　使用注入器　207
) o! \! j4 g* m2 {# I2 s5 G　　8．9　替换值　211
3 l+ T# p( _* a! r6 s, p8 g　　8．10　NgModule　215
$ _3 Z* c" P0 ~+ b8 r8 b* l9 E* G0 `　　8．10．1　NgModule与JavaScript模块　215
6 f+ t. F( N8 W" e, s* ~　　8．10．2　编译器与组件　215
　　8．10．3　依赖注入与提供者　216
+ i& {7 f+ X5 R( s$ }3 s6 T! t1 Z1 D　　8．10．4　组件可见性　217
0 Q% u2 B# Z( M# p　　8．10．5　指定提供者　218
　　8．11　总结　219
0 t% u0 i" @+ J6 f% @6 p8 Z　　第9章　Angular数据架构　220
　　第10章　使用可观察对象的数据架构，第1 部分：服务　22210．1　可观察对象和RxJS　222
8 ^' |: G, j/ |. g8 }　　10．1．1　注意：一些必备的RxJS相关知识　22210．1．2　学习响应式编程和RxJS　223
　　10．2　聊天应用概览　224
2 I" D8 J7 [/ G9 t* K3 i  W　　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
* C& K/ o5 M- X$ l9 [2 b0 h　　10．3．3　Message　228
　　10．4　实现UserService　228
　　10．4．1　currentUser流　229
　　10．4．2　设置新用户　230
　　10．4．3　UserService．ts　231
1 ~1 u! M/ I( }5 K/ I- V. M9 U5 q　　10．5　MessagesService　231
　　10．5．1　newMessages流　231
　　10．5．2　messages流　233
　　10．5．3　操作流模式　233
0 u2 W. m4 X) h- e& C6 }　　10．5．4　共享流　234
　　10．5．5　把Message对象添加到messages流中　23510．5．6　完整的MessagesService　238
　　10．5．7　试用MessagesService　241
　　10．6　ThreadsService　242
　　10．6．1　当前一组Thread 的映射（threads流）　24210．6．2　按时间逆序排列的Thread列表（orderedthreads流）　24610．6．3　当前已选的Thread（currentThread流）　24610．6．4　当前已选Thread的Message列表（currentThreadMessages流）　24810．6．5　完整的ThreadsService　250
　　10．7　总结　251
3 U( h/ @" O) g, T8 k. M0 p　　第11章　使用可观察对象的数据架构，第2部分：视图组件　25211．1　构建视图：顶层组件ChatApp　252
　　11．2　ChatThreads组件　254
( L' b! y1 c( L) |$ h　　11．2．1　ChatThreads控制器　255
　　11．2．2　ChatThreads的template　256
　　11．3．1　ChatThread控制器和ngOnInit　25711．3．2　ChatThread的template　258
　　11．3．3　ChatThread的完整代码　258
/ h3 h; P5 u; q( s& O' U　　11．4　ChatWindow组件　259
　　11．4．1　ChatWindow组件类属性　260
　　11．4．2　ChatWindow的ngOnInit　261
　　11．4．3　ChatWindow的sendMessage　261
! I( {! n& u" w　　11．4．4　ChatWindow的onEnter　262
/ z( V  R4 ?; c. D& {　　11．4．5　ChatWindow的scrollToBottom　26211．4．6　ChatWindow 的template　263
  }% c! k/ I3 n' N& L　　11．4．7　处理键盘动作　264
% s0 U+ `1 d. g& N, u3 x　　11．4．8　使用ngModel　264
1 O0 b. ]! S1 _6 p+ E　　11．4．9　点击Send按钮　265
0 \) D. j. X, L7 A5 x　　11．4．10　完整的ChatWindow组件　267
4 e% j* o: K5 d# ?/ g, {% n　　11．5．1　设置incoming属性　268
　　11．5．2　ChatMessage的template　270
3 w1 ?  L/ ~) d5 ^5 U% f' a　　11．6　ChatNavBar组件　273
　　11．6．1　ChatNavBar的@Component　273
# p7 m5 v+ q' o# B　　11．6．3　ChatNavBar的template　274
2 `# ]% Q2 w9 g. Y8 f5 ?, ?$ X  U　　11．6．4　完整的ChatNavBar组件　275
　　11．7　总结　276
- Q( f/ M% o3 d% |6 f　　11．8　更进一步　277
. G4 s( ~! b7 C& e+ R　　第12章　基于TypeScript的Redux简介　278
3 U' M" Y8 t( T6 k0 e　　12．1　Redux　279
　　12．2　Redux核心概念　280
6 ^+ X- g5 [) @+ `% f) S　　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
! i. A& F) E: i# y4 L: L　　12．2．7　action的“参数”　285
　　12．3　保存state　286
2 I2 a9 q2 X$ N, Z# U2 F' |　　12．3．1　使用store　287
7 ?; A6 h( ]: K　　12．3．2　使用subscribe进行通知　287
　　12．3．3　Redux核心　290
　　12．4　消息应用　291
　　12．4．1　消息应用的state　291
, G  U6 _2 t% J5 \0 {5 T% Q& ]　　12．4．2　消息应用的action　292
　　12．4．3　消息应用的reducer　292
　　12．4．4　试用action　295
+ s  e# X3 f) j; t( V　　12．4．5　action creator　296
　　12．4．6　使用真正的Redux　297
6 n) `* l8 g2 ]7 R  a* Y　　12．5　在Angular中使用Redux　299
　　12．6　规划应用　299
　　12．7　组建Redux　300
　　12．7．1　定义应用的state　300
. N7 {/ e- q- `) K7 Q! H/ Z　　12．7．2　定义reducer　301
　　12．7．3　定义action creator　301
+ d# f6 _) m) |　　12．7．4　创建store　302
　　12．8　CounterApp组件　303
　　12．9　提供store　304
. a0 U/ r0 a/ D. _6 [  i+ k6 X　　12．10　启动应用　305
/ o. g3 _* C3 @! u$ ?9 m3 d  b　　12．11　CounterComponent　306
　　12．11．1　import　306
　　12．11．2　模板　306
　　12．11．3　constructor　307
　　12．11．4　整合　308
7 ^4 e6 W9 ?9 w# e　　12．12　更进一步　310
　　12．13　参考资源　310
　　第13章　在Angular中引入Redux　312
　　13．1　阅读背景　312
　　13．2　聊天应用概览　313
　　13．2．1　组件　313
　　13．2．2　数据模型　314
& j& k6 g0 O# `5 {: ^6 {　　13．2．3　reducer　315
9 b; {0 K, N3 V; a4 y　　13．2．4　总结　315
　　13．3　实现数据模型　315
　　13．3．1　User　315
1 l+ X$ C2 ?# b) S& b( ^　　13．3．2　Thread　316
$ O1 H$ B; @6 _2 z% D: X4 [8 w0 Y　　13．3．3　Message　316
　　13．4　应用的state　316
　　13．4．1　关于代码布局　317
　　13．4．2　根reducer　317
$ _, y" M5 |1 `9 n' {　　13．4．3　UserState　318
　　13．4．4　ThreadsState　318
; J2 M+ @* Y1 w/ _( Y- S* N; P　　13．4．5　可视化AppState　319
7 @5 s' t8 }0 J  w/ Q　　13．5　构建reducer（和action creator）　32113．5．1　设置当前用户的action creator　32113．5．2　UsersReducer：设置当前用户　32113．5．3　会话和消息概览　322
　　13．5．4　添加新会话的action creator　32213．5．5　添加新会话的reducer　323
! N) G: j) e( U　　13．5．6　添加新消息的action creator　32413．5．7　添加新消息的reducer　325
, U5 A7 E! S" }) N　　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
6 K& `. c" @. L# R　　13．6．3　容器型组件与展示型组件　332
　　13．7．1　Redux选择器　334
　　13．7．2　会话选择器　334
% t5 x8 I. j! w, B$ ]- O3 h+ u　　13．7．3　未读消息总数选择器　336
　　13．8　构建ChatThreads组件　336
, u- }( O' d3 o# l　　13．8．1　ChatThreads控制器　337
　　13．8．2　ChatThreads的template　338
4 o) _( [1 k- t) z　　13．10　构建ChatWindow组件　340
　　13．10．1　ChatWindow的updateState()　34113．10．2　ChatWindow的scrollToBottom()　34213．10．3　ChatWindow的sendMessage　342
　　13．10．4　ChatWindow的onEnter　343
　　13．10．6　处理键盘动作　345
6 q. ^! a# o; r/ X) J　　13．10．7　使用ngModel　345
8 n& @6 W* L% a' e/ M- S　　13．10．8　点击Send按钮　345
　　13．11　ChatMessage组件　345
/ i  u5 n( e4 y- w　　13．11．1　设置incoming属性　346
' M& ^; ?% w$ @; ]) Z　　13．11．2　ChatMessage的template　346
　　13．12　总结　347
　　第14章　高级组件　349
1 {: V* |2 s/ g　　14．1　样式　349
* [  |, ~0 @& u　　14．1．1　视图（样式）封装　351
　　14．1．2　Shadow DOM 封装　354
　　14．1．3　不使用封装　355
　　14．2　创建popup指令：引用并修改宿主元素　35714．2．1　popup指令的结构　357
　　14．2．2　使用ElementRef　359
. x. E+ T  s% Z* ^4 `　　14．2．3　绑定到host属性　360
/ L; r) ~2 B) P3 Z/ ~　　14．2．4　添加按钮并使用exportAs　363
　　14．3．1　改变host属性的CSS类　364
! j3 ~7 a6 |0 y5 Y/ @- q' T　　14．3．2　使用ng-content　364
　　14．4　查询相邻的指令：编写标签页　366
　　14．4．1　Tab组件　367
　　14．4．2　Tabset组件　367
9 K  D1 w( D3 }9 U9 q" C" A　　14．4．3　使用Tabset　369
. n% a  e% P; h6 K' N2 B* j　　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　38614．6　高级模板　391
6 u. c0 b6 Q, u8 A2 q2 c2 \3 ]; [　　14．6．1　重写ngIf：ngBookIf　392
　　14．6．2　重写ngFor：ngBookRepeat　394
. h3 F; z& n0 f　　14．7　变更检测　398
　　14．7．1　自定义变更检测　401
1 N7 |' [( z- W& E, v1 Y) R8 `; a　　14．7．2　Zones　405
0 C0 q+ A8 r" }& q　　14．7．3　可观察对象和OnPush　406
　　14．8　总结　409
　　第15章　测试　410
; X, H  U1 S& B9 k$ D6 H  r9 e/ k" B8 K　　15．1　测试驱动？　410
: y+ Z1 e+ P" h, J2 N9 k　　15．2　端对端测试与单元测试　411
　　15．3　测试工具　411
　　15．3．1　Jasmine　411
- o" M, j* k' ?　　15．3．2　Karma　412
　　15．4　编写单元测试　412
, o! b! x/ i( o5 ?　　15．5　Angular单元测试框架　412
. S$ ]# Q& B  F. _! v7 l　　15．6　测试前准备　413
! R9 S: r0 O9 U. Z* C- }　　15．7　测试服务类和HTTP　415
" `2 N3 l+ u; C! @8 D0 Q　　15．7．1　HTTP要点　416
0 w, i' p) G* {1 i2 w# j　　15．7．2　伪装　417
　　15．7．3　模拟　417
/ {. {3 [6 o0 ~6 Z9 g8 \$ Z5 W　　15．7．4　Http MockBackend　418
　　15．7．5　TestBed．configureTestingModule和提供者　41815．7．6　测试getTrack方法　419
2 M0 O' m! F. s  @8 H1 Y5 I　　15．8　测试组件间的路由　424
　　15．8．1　为测试创建路由器　424
　　15．8．2　模拟依赖　427
　　15．8．3　探子　427
　　15．9　回到测试代码　429
　　15．9．1　fakeAsync和advance　431
1 u( j! w% ^+ F6 `% A　　15．9．2　inject　432
　　15．9．3　测试ArtistComponent组件初始化　43215．9．4　测试ArtistComponent方法　433
/ @' f" q4 }! b* C) _8 ^　　15．9．5　测试ArtistComponent DOM模板值　43415．10　测试表单　436
! ]+ m' i2 \2 C& J& [# j, V$ f& T　　15．10．1　创建一个ConsoleSpy　438
2 q  L' N2 ]0 p, @- L7 x8 [  N　　15．10．2　安装ConsoleSpy　439
  @9 f/ X) ?' ~: D% M& N　　15．10．3　配置测试模块　439
　　15．10．4　测试表单　440
9 ]7 }5 c; H' x$ e- y. x8 l　　15．10．5　重构表单测试　441
9 y: L( P' h/ N% A! N7 a" j　　15．11　测试HTTP请求　444
7 v9 _( t; x4 n: ]5 v　　15．11．1　测试POST方法　445
　　15．11．2　测试DELETE方法　446
' V, @5 M* s* z0 p6 U7 K　　15．11．3　测试HTTP头　447
　　15．11．4　测试YouTubeService　448
　　15．12　总结　452
" ~! w" \: h. ^: C　　第16章　把AngularJS应用升级到Angular　45316．1　周边概念　453
3 D! L( W( ^7 F) A: x' @; j" j　　16．2　我们要构建什么　454
　　16．3　把AngularJS映射到Angular　455
( d) P- a- H) ^- a2 Z　　16．4　关于互操作性的需求　456
0 _3 h+ }1 _. }5 ~7 P  s+ q0 F　　16．5　AngularJS应用　456
6 x; {2 d+ T' M% w& {( K4 V% {, L　　16．5．1　AngularJS应用的HTML　458
9 N! `% F' Y0 N6 f$ M　　16．5．2　代码概览　458
　　16．5．3　AngularJS：PinsService　459
　　16．5．4　AngularJS：配置路由　460
- m* O9 J1 C* x; S　　16．5．5　AngularJS：HomeController　461
　　16．5．6　AngularJS：HomeController模板　46116．5．7　AngularJS：pin指令　462
! ^6 e: X/ P& x# |1 t# j! {) E4 S　　16．5．8　AngularJS：pin指令模板　463
　　16．5．10　AngularJS：AddController模板　46516．5．11　AngularJS：总结　467
. H$ b0 e4 l: L9 D6 f  ?7 y* p　　16．6　构建混合式应用　468
$ f3 R) |3 D6 y  D6 ~4 i　　16．6．1　混合式应用的结构　468
　　16．6．2　引导混合式应用　471
　　16．6．3　我们要升级什么　473
0 a# l$ x) t+ }) X& X3 r　　16．6．4　插一小段内容：类型文件　479
- g! D& r8 |1 E  H. G. O) Z　　16．6．6　使用Angular的PinControlsComponent　48116．6．7　把Angular的PinControlsComponent 降级到AngularJS　48216．6．8　用Angular添加图钉　483
4 R# g3 T, ]. i　　16．6．9　把AngularJS的PinsService和$state升级到Angular　48416．6．10　写Angular版的AddPinComponent　48516．6．11　使用AddPinComponent　490
, D- ?/ o; L% c　　16．6．12　把Angular的服务暴露给AngularJS　49016．6．13　实现AnalyticsService　491
　　16．6．14　把Angular的AnalyticsService降级到AngularJS　49216．7　总结　493
　　16．8　参考资源　493
  d& A# z& T4 E1 A" l

游客，如果您要查看本帖隐藏内容请回复

5 _1 N( r$ v* I; s( v  Z$ z* e

Angular权威教程 轻松领悟新一代Web开发精髓 Ari Lerner
https://www.ynjie.com/forum.php?mod=viewthread&tid=8511
5 J; `. r7 D9 l+ S/ }9 q(出处: 与你共享街)
. |& O6 p7 }" G3 c7 P

thanks for your sharing