与你共享街

标题: Angular权威教程 轻松领悟新一代Web开发精髓 Ari Lerner [打印本页]
作者: 1136111231    时间: 2019-5-26 10:03
标题: Angular权威教程 轻松领悟新一代Web开发精髓 Ari Lerner
　　编辑推荐' Y( f  E& }0 B; b" E
　　* 强力的IDE支持+完善的生态圈+一套代码、多种平台+……=Angular* 知名全栈开发工程师经验总结! s/ a7 t' I& o) G* Z+ n# i" W
　　* 雪狼组织的Nice Angular社区主力倾情翻译" |" F. X: p; s' A) H
　　* Google推荐阅读; w7 u# |0 H* q5 |) V; H
　　本书内容循序渐进，帮你在短时间内毫不费力地掌握整个Angular框架并打好坚实的基础，工作效率获得极大的提升。
% ~- ]6 D2 a# C2 P6 Z　　书中包含丰富的示例应用，展示如何编写组件、如何使用表单和API，还会带你学习如何使用Angular创建：
' i" c" ^0 m: Q; f9 c( g　　- 基于组件的仿制版Reddit
& n* z4 f2 Q% n/ _( m% D9 J　　- 使用RxJS可观察对象的实时聊天应用
1 K0 s9 |; d* ^& }# D/ H. i; G) L  G　　- “随敲随搜”的YouTube搜索应用
% `) o7 F* G# Q　　- 带有可播放乐曲预览的Spotify曲目搜索应用内容简介
' a4 P" ]- a6 j# [7 N7 i　　本书堪称Angular领域的里程碑式著作，涵盖了关于Angular的几乎所有内容。对于没有经验的人，本书平实、通俗的讲解，递进、严密的组织，可以让人毫无压力地登堂入室，迅速领悟新一代Web应用开发的精髓。如果你有相关经验，那本书对Angular概念和技术细节的全面剖析，以及引人入胜、切中肯綮的讲解，将帮助你彻底掌握这个框架，在自己职业技术修炼之路上更进一步。4 Y/ _- Z( [$ K! w' F; v
　　作者简介
! d! T+ _* F; [  k4 a　　Ari Lerner2 @* @: t9 z( x4 }9 w! z& U
　　全栈工程师，拥有多年Angular经验，自办并运营Angular电子报ng-newsletter.com，在知名硅谷工程师培训学校Hack Reactor担任AngularJS讲师。Fullstack.io创始人。' K+ ?( T/ [8 Q+ x' s+ O
　　Felipe Coury
9 u# {) O2 M1 K　　Gistia Labs联合创始人兼CTO。
3 y0 c* d1 H4 C& C- n　　Nate Murray
5 V# X8 ^! h; {2 d; Y: N" B　　全栈工程师，曾任职于IFTTT，拥有数据挖掘和增量Web服务等方面的背景。7 m% w: u) _- n7 E( w$ g3 C
　　Carlos Taborda0 X0 F: {* B2 R$ ~5 ?3 z
　　Gistia Labs联合创始人兼主管。
$ e7 J' u/ K! @" {# |　　目录6 s9 p, [$ E% _( S& ?$ b% o
　　第1章　编写你的第一个Angular Web应用　　11．1　仿制Reddit网站　1
  \1 `% N/ s; I. z4 r6 x　　1．2　起步　3( T. P% R( w$ w: f1 T1 P
　　1．2．1　TypeScript　3; w' `1 u9 I0 t
　　1．2．2　angular-cli　3% ^' h3 N2 Q" w5 l" L3 Z$ }: _
　　1．2．3　示例项目　4
3 b! [7 A7 i8 B0 S& Q9 ~8 {  j2 A' B　　1．3　运行应用　7
9 w1 a- [4 ~1 u% ], E1 s- Z( M　　1．3．1　制作Component　8: ~4 I) K; |2 ~5 e
　　1．3．2　导入依赖　9: d2 @0 Q4 n1 V+ V( j- A
　　1．3．3　Component注解　108 f. Z$ |7 L3 ~. K7 b
　　1．3．4　用templateUrl添加模板　11) F$ i6 K1 t- i* M
　　1．3．5　添加template　11
9 T" ^* I8 W8 F  S　　1．3．6　用styleUrls添加CSS样式　12
# e: \% w6 w9 u; [, X& _+ c　　1．3．7　加载组件　12
/ A$ ]6 A' z1 H1 P5 C) ?　　1．4　把数据添加到组件中　13
9 p( S/ |$ C$ G1 T+ f0 a5 z3 Z　　1．5　使用数组　15
- B2 B3 a; I6 L4 M4 @$ Q) ]　　1．6　使用UserItemComponent组件　18. L9 [( O5 {  h8 G
　　1．6．1　渲染UserItemComponent　18# _( H9 y5 H( t. I
　　1．6．2　接收输入　194 N' Z4 b! s  O. ~" K
　　1．6．3　传入Input值　20
# T  U' s% p% P* q, J+ D　　1．7　“启动”速成班　21( {  y% e+ u9 X+ U- Z
　　1．8　扩展你的应用　22
3 T  ^! w$ g) T' ^! v　　1．8．1　添加CSS　24
2 D) w) j( [# m! Q　　1．8．2　应用程序组件　24
6 A% O' j- M, n: O. `% ?7 Q　　1．8．3　添加互动　26
: m# l' h; Q5 m! F0 Q　　1．8．4　添加文章组件　295 A1 W0 ?6 l: d3 ]5 {& I0 t
　　1．9　渲染多行　36
4 p  D! ]  }& o8 q/ c3 g　　1．9．1　创建Article类　36, n% ?/ S. C5 H  G. Y
　　1．9．2　存储多篇文章　40) p1 }' A# a+ `+ d# ]: _: i
　　1．9．3　使用inputs配置ArticleComponent　411．9．4　渲染文章列表　42. l3 X4 [! K+ g5 Z- e' O
　　1．10　添加新文章　44
) @7 a: d, l8 J5 d　　1．11　最后的修整　44
9 P. k4 R; j$ F9 P/ o- k　　1．11．1　显示文章所属的域名　44/ o8 X# g( @! {/ g
　　1．11．2　基于分数重新排序　45
* [: m7 C/ E* ^6 S2 Q6 R　　1．12　全部代码　45
1 N' C( {  y. D1 C) x' W$ V　　1．13　总结　45, q- Q7 ^7 ^3 D& h8 i% u, M  `. B
　　1．14　获得帮助　46: E4 f' X7 z! z) `( d
　　第2章　TypeScript　47
7 J# n: q4 v) E* G( z　　2．1　Angular是用TypeScript构建的　47
# ]! w) s& M/ M: W6 P- Y# k　　2．2　TypeScript提供了哪些特性　48- U* c6 ]$ j+ O' W
　　2．3　类型　498 Q% C; n) L/ f: E
　　2．4　内置类型　50! N8 I6 u& Q7 `! ]3 ^9 d" q$ A
　　2．4．1　字符串　50
1 p( y  |  G9 I: G& u" ]) K- D　　2．4．2　数字　50% d8 D! O& G- J* ~* T
　　2．4．3　布尔类型　51" q# i! [( S/ K
　　2．4．4　数组　51
9 c( @) e# F% ?" `* I0 l　　2．4．5　枚举　51
3 J/ ^9 m1 Z$ j0 r　　2．4．6　任意类型　52, r: h5 z" q5 ]" u- l" r+ e- z
　　2．4．7　“无”类型　522 V8 [5 \0 m0 K
　　2．5　类　525 m, {9 C& }3 O
　　2．5．1　属性　52# i( U2 S1 u9 F) d0 \
　　2．5．2　方法　53
8 t$ Q4 o: e! X) x1 Z2 f  L3 r. S　　2．5．3　构造函数　54  U, z6 F, d$ a; r
　　2．5．4　继承　55
, M9 v8 T% h. W6 e6 |1 i$ \　　2．6　工具　57
  n* ~& @; V  O　　2．6．1　胖箭头函数　57
( J$ c& Z2 a; V2 c　　2．6．2　模板字符串　58
9 V. B& Y) ]3 I/ x1 |　　2．7　总结　59
% @% k3 b1 _2 B% c% b5 h+ A　　第3章　Angular的工作原理　60
" x9 b4 @( x) R% s' `2 E! M　　3．1　应用　60
4 O$ i& e/ W( b: T　　3．1．1　主导航组件　61$ y4 G9 n0 s2 w5 }
　　3．1．2　面包屑导航组件　61% l! i. O0 v! t6 W7 A
　　3．1．3　产品列表组件　62
" X7 o& F5 ~" j4 R2 o& K. K, m　　3．2　产品数据模型　64
! t- D' _1 d. Y9 ?% a; d7 _　　3．3　组件　64
' A* ^! I( o! D8 B) a　　3．4　组件注解　669 Z  k$ W, R" z  o6 r
　　3．4．1　组件selector　66) J0 T/ O1 C6 H! C
　　3．4．2　组件template　67/ U- r* w% [3 G
　　3．4．3　添加产品　67- _: G7 k! g7 J5 C5 t  ^6 A& {
　　3．4．4　用模板绑定来查看产品　686 m2 y3 l# g/ N+ M
　　3．4．5　添加更多产品　697 d0 C. u, \. k3 Z6 A9 k- o
　　3．4．6　选择一个产品　70' |2 F% }' g" V! y7 j
　　3．4．7　用列出产品　736 n: t' x# W1 p, a* n' Z9 S9 H+ t+ y9 b
　　3．5．1　设置ProductsList的@Component配置项　733．5．2　组件的输入　74- E# D' a5 i; l
　　3．5．3　组件的输出　77
% f! o% m$ x8 `4 c6 M- s+ W　　3．5．4　触发自定义事件　78, T" [  ]6 T: A
　　3．5．5　编写ProductsList的控制器类　79
! K% B  t2 P& l1 @/ U. {, Q1 I　　3．5．6　编写ProdctsList的视图模板　81
- t4 V% i3 h- a5 D; T2 p　　3．6　产品条目组件　83
! q  }; r# C- Y" i　　3．6．1　产品条目的组件配置　83% v8 g  O9 v" ?% l
　　3．6．2　产品条目组件的定义类　84
- p9 x. a$ `! K9 \! H　　3．6．3　产品条目组件的template　84' o- z$ F( e" V. p/ T4 f* Q
　　3．6．4　完整的ProductRow代码清单　850 A7 |$ D1 I4 @1 J  c' l+ I# |
　　3．8　价格展示组件　866 Y& f. C2 H: {, a
　　3．9　产品分类组件　87
6 \: j( W5 t6 L1 n　　3．10　创建NgModule并启动应用　88
: W! ]3 z$ L$ Y' ~7 p& o; ]　　3．11　完整的项目　89% T+ E+ j3 |+ q* I
　　3．12　关于数据架构的一点说明　90
2 W$ K( ~$ n, y1 k  {1 H5 @  v　　第4章　内置指令　91
* A/ `/ W& q4 E/ N2 u　　4．1　简介　918 \/ p/ b, t1 I4 I  w% a* d
　　4．2　ngIf　91
; E: @, t4 c8 K( q5 q  G　　4．3　ngSwitch　92, w- F' i* x2 a. f2 ?" n% t, j
　　4．4　ngStyle　93
. U2 Q$ L; t/ |& @. H' d5 Y　　4．5　ngClass　95
! B/ H% |4 T3 g　　4．6　ngFor　98& K) [2 o  q8 O! E: |4 G& D* [8 F
　　4．7　ngNonBindable　1028 ^# p  n5 p3 E$ R$ u5 p, U
　　4．8　总结　102- W/ T0 }4 D  v7 {) d
　　第5章　Angular中的表单　103# h9 M' L& @! W
　　5．1　表单——既重要，又复杂　103
  q& Q! E7 y; E  G　　5．2　FormControl和FormGroup　103. ^! I( p2 W& O) s/ P! w$ `3 b
　　5．2．1　FormControl　104
5 H. n# B, J% Z/ p　　5．2．2　FormGroup　104
  S* X8 q; o) g8 q6 x' y* Y& P: W. N　　5．3　我们的第一个表单　105' x3 E3 g& m5 W% x5 k" @
　　5．3．1　加载FormsModule　1069 Q0 }# N% s2 b0 i6 X0 i
　　5．3．2　简易SKU表单：@Component注解　1075．3．3　简易SKU表单：template　107  \; y( P0 z: f& f
　　5．3．4　简易SKU表单：组件定义类　110
2 f4 C8 u( \- p3 x& Y　　5．4　使用FormBuilder　111
# D* u9 A' ?) R- ^) I% i: S+ {, d　　5．5　响应式表单 FormBuilder　112) ?! v. j8 M" C' r# _& w3 h
　　5．5．1　使用FormBuilder　112
' t% q6 E8 B+ Y　　5．5．2　在视图中使用myForm　113" Q) I1 t7 O. O6 P/ S
　　5．5．3　试试看　1143 F7 w5 V  J1 [! O! B) o
　　5．6　添加验证　115
7 \' d* m+ a8 h7 |. \5 @　　5．6．1　显式地把sku设置为实例变量　116  t) R# @' U* f& V
　　5．6．2　自定义验证器　120) \7 s! t: k$ e% X/ T% ^( x: E8 D2 h
　　5．7　监听变化　1213 [" T) {# z& Q8 x5 ?- Z5 c
　　5．8　ngModel　122
! F; h1 z8 m' h　　5．9　总结　1244 c6 L: M- n4 \0 P# R0 [
　　第6章　HTTP　125
1 X  w: M" v" b　　6．1　简介　125
1 Y0 Z1 W8 U% l3 n" n　　6．2　使用@angular/http　126
0 X0 c7 L' Y! }0 J& b　　6．3　基本请求　127! i2 K' j; H6 H) W4 b& G* B) l
　　6．3．1　构建SimpleHTTPComponent的@Component　1276．3．2　构建SimpleHTTPComponent的template　1286．3．3　构建SimpleHTTPComponent控制器　1286．3．4　完整的SimpleHTTPComponent　130
  k" o3 [" Q& v9 P) w　　6．4　编写YouTubeSearchComponent　1302 d3 v2 i' N- |; }  Z! C& E
　　6．4．1　编写SearchResult　132- I  H/ {& n) n4 F: @. s
　　6．4．2　编写YouTubeService　132, f9 M- h7 k# C& ~$ q" E- Q( m4 v
　　6．4．3　编写SearchBox　140
" t9 ^# N0 M; _: P0 P2 M　　6．4．4　编写SearchResultComponent　1451 _9 q( h$ n6 f* B5 }
　　6．4．5　编写YouTubeSearchComponent　147! M. p4 P1 i  V1 v$ q+ ^. H9 ^
　　6．5　@angular/http API　150
6 r6 i* K! }7 ]3 ]3 p6 f# t5 [　　6．5．1　发起一个POST请求　150
+ c0 B5 V+ n) e: Q0 u　　6．5．2　PUT/PATCH/DELETE/HEAD　150
3 W2 y) j% g% t9 b& I0 o3 v　　6．5．3　RequestOptions　151
% E$ T' w. p) l+ W! Y9 n　　6．6　总结　151! t7 `' W' P$ X$ Q5 t7 ^2 p
　　第7章　路由　152
4 O2 x; |# \4 L　　7．1　为什么需要路由　152
9 m0 u+ @- ^: e, S* \0 s: y　　7．2　客户端路由的工作原理　153
/ G+ C5 Y# _0 v- }2 G0 D& g. N　　7．2．1　初级阶段：使用锚标记　153
+ V# @& Q, P$ W! ?% w- A( ]$ W　　7．2．2　进化：HTML5客户端路由　154+ b, f! _) t7 a' h* b
　　7．3　编写第一个路由配置　155
  F$ f% G% {+ ?3 U　　7．4　Angular路由的组成部件　155
1 B: B; P/ d8 O$ Y　　7．4．1　导入　155
) E. P' o6 f! ^4 a" a# u- d　　7．4．2　路由配置　155
) i" P# {6 O, ]/ b; c　　7．4．3　安装路由配置　156
0 x+ k! o4 n" K- v　　7．4．4　使用调用RouterOutlet指令　157( [9 A9 j7 r; C& U1 V  Z9 m
　　7．4．5　使用[routerLink]调用routerLink指令　1587．5　整合　159/ a2 _5 n2 ~. T. A- O2 b- D$ n$ E4 i
　　7．5．1　创建组件　160
  q/ t: U* V& {! L, ]　　7．5．2　应用程序组件　161) k% P' N+ {" z' H1 u  |! W) \
　　7．5．3　配置路由　163& C7 U! _9 @; _, r  }
　　7．6　路由策略　164  H, H# c; n, o* x
　　7．7　路径定位策略　165( n- H& O* L( s+ @
　　7．8　运行应用程序　165! \! q* L1 ?% w6 M1 c
　　7．9　路由参数　167
2 I! E( Q0 Z3 e. S' }& h6 z　　7．10　音乐搜索应用　168
/ E5 O2 K& a' p( f　　7．10．1　首要步骤　169: d% @$ z% s8 B& ?! K  r
　　7．10．2　SpotifyService　170
3 J, J* r: i6 k( S) \　　7．10．3　SearchComponent　171# _5 U  h7 h$ @5 b5 k3 `
　　7．10．4　尝试搜索　179
! ^* t4 w  }# G  d5 F8 S　　7．10．5　TrackComponent　1809 r% q$ w/ S" s5 x( V$ \
　　7．10．6　音乐搜索应用小结　1824 I3 I! [: w/ A4 H
　　7．11　路由器钩子　182
% y; F7 F, z: }　　7．11．1　AuthService　1831 W" Z# i5 ^4 E; z
　　7．11．2　LoginComponent　1845 R! B! ?- g, E! d. ^# {. Q6 k
　　7．11．3　ProtectedComponent组件和路由守卫　1867．12　嵌套路由　190
9 m* }3 p* i  X7 |  U( C　　7．12．1　配置路由　191! b4 J( M0 ]/ ?
　　7．12．2　ProductsComponent组件　191
& _+ Y$ X3 ]9 r9 {　　7．13　总结　194
, P/ G  j& _/ k7 F$ @$ p, p3 n　　第8章　依赖注入　195
9 t+ h6 U, j% r- J( I5 i　　8．1　注入示例：PriceService　196
, @* q7 T# J5 m0 h  ]) o　　8．2　“别打给我们……”　197
7 c' [7 Q; \' Z+ x　　8．3　依赖注入的部件　199
& x' y1 L3 v+ C( y) C$ h7 |　　8．4　尝试注入器　200
  [7 U8 I1 b! I1 x4 Q+ h　　8．5　用NgModule提供依赖　201
" h1 C6 s' X: s1 U; j! F( @; t( K0 ^　　8．6　提供者　202
2 U& p/ q2 j& A" `! r0 k4 y# G　　8．6．1　使用类　202/ s* X" m. F6 v
　　8．6．2　使用工厂　203% X6 u9 d7 N; T  `
　　8．6．3　使用值　205  Y5 z) C  {: c5 t
　　8．6．4　使用别名　205
8 I0 `  W/ E. d" I" V　　8．7　应用中的依赖注入　205) d" w. ]0 w5 }
　　8．8　使用注入器　2074 A; a# j, P8 g4 T$ y$ |1 N5 _
　　8．9　替换值　211
* Q0 C" L' w6 L( r! s$ p　　8．10　NgModule　215
) M' H; e2 ]$ U+ w/ I) q　　8．10．1　NgModule与JavaScript模块　2154 M2 Q( g6 z8 J; g1 ~
　　8．10．2　编译器与组件　215' X" @: `1 {, }3 t
　　8．10．3　依赖注入与提供者　216
8 J; ~# k4 z% j+ k" X( ]　　8．10．4　组件可见性　217
# d2 O  j4 F  X" Y　　8．10．5　指定提供者　218
& W" O1 a7 O* ^2 J" l　　8．11　总结　2193 [2 T4 K) e$ E- I+ X4 o9 c
　　第9章　Angular数据架构　220! Z7 r+ ~$ t. e; S7 w, k) i/ q
　　第10章　使用可观察对象的数据架构，第1 部分：服务　22210．1　可观察对象和RxJS　222
, [- S% G' A' `% G# r8 v　　10．1．1　注意：一些必备的RxJS相关知识　22210．1．2　学习响应式编程和RxJS　2238 W# D: o7 d" i
　　10．2　聊天应用概览　2241 c" m/ C- ~' p; N4 @+ o
　　10．2．1　组件　225$ r- R" M, q' {( ~
　　10．2．2　数据模型　226
$ j8 l" y* C' M' {6 i! G, E9 e　　10．2．3　服务　226
. F- \; M" A5 k% o　　10．2．4　总结　226* d: [- r7 Q5 R+ s
　　10．3　实现数据模型　227
7 F" h  ?* P  C" D% X- Y/ K% C/ N& a, |　　10．3．1　User　227  I" f. p! K( x
　　10．3．2　Thread　2278 a0 U" F2 G) {, f+ _: |
　　10．3．3　Message　228
3 X( }( Z1 x: v) q5 M8 b　　10．4　实现UserService　228* m, O- |/ |" w7 y+ o7 K. i
　　10．4．1　currentUser流　229) F9 x! l0 j) h: `" P" ^# J
　　10．4．2　设置新用户　230
5 N! C* w. \! L% A2 Z　　10．4．3　UserService．ts　231
0 c( l' @! O9 m& k& W7 @! @) H　　10．5　MessagesService　231
* V. c8 {% n1 K. N　　10．5．1　newMessages流　231
, M6 t$ ^& b7 T) |7 M1 w　　10．5．2　messages流　233% b& U$ Y8 k( @: d' G0 E; V
　　10．5．3　操作流模式　233! r/ E" w6 I8 C! D8 r( n
　　10．5．4　共享流　234* m) }0 g" K8 ^" K3 b/ A
　　10．5．5　把Message对象添加到messages流中　23510．5．6　完整的MessagesService　238
7 U5 N+ G0 s$ f2 R( N6 V+ z　　10．5．7　试用MessagesService　241
( Z8 J, }9 X7 S" K" d　　10．6　ThreadsService　242
3 D% T6 q3 p1 f' r+ g0 Z* t5 D　　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
  C7 i3 @' g; r- _6 O3 H5 n　　10．7　总结　251, N1 Z' u6 q% S' z* V1 {% A
　　第11章　使用可观察对象的数据架构，第2部分：视图组件　25211．1　构建视图：顶层组件ChatApp　2527 m9 _6 {4 W0 P- a- R
　　11．2　ChatThreads组件　254( c5 P6 k2 P3 J7 ~6 a
　　11．2．1　ChatThreads控制器　255+ @0 ~, l* c. t. K" t
　　11．2．2　ChatThreads的template　256
/ a9 w7 |; U- ]; p. o5 K　　11．3．1　ChatThread控制器和ngOnInit　25711．3．2　ChatThread的template　258
$ K& R5 [/ e# Z, N# X3 t: h' ~2 n, [　　11．3．3　ChatThread的完整代码　258
. s- H3 s1 V2 r% K! v% d% x　　11．4　ChatWindow组件　259- _5 b7 `( m% A% j4 w" m* S& f
　　11．4．1　ChatWindow组件类属性　2603 P" L7 b6 X% f
　　11．4．2　ChatWindow的ngOnInit　261
! ?+ x' W" k; z4 E" l+ Q9 ]5 g. q5 Z" C! `　　11．4．3　ChatWindow的sendMessage　261
7 {0 Z! Y* w  v: c6 Z) L　　11．4．4　ChatWindow的onEnter　262
/ z9 T1 f* W! t0 e5 V8 K0 r& V4 v　　11．4．5　ChatWindow的scrollToBottom　26211．4．6　ChatWindow 的template　263  _) b7 f6 z8 a& K3 b
　　11．4．7　处理键盘动作　264. a! A% k: [. L: n- X/ S
　　11．4．8　使用ngModel　264
" x3 a: m* }$ y' \) p　　11．4．9　点击Send按钮　265
. B- N1 _' C. ^! b, V) H　　11．4．10　完整的ChatWindow组件　2677 b4 T+ H$ |. m% `9 C! k  C" c
　　11．5．1　设置incoming属性　268# q. X$ o$ b+ L5 o
　　11．5．2　ChatMessage的template　270. @! M5 F' b3 z7 p
　　11．6　ChatNavBar组件　273
' g) J0 F9 N; @  d. j2 u3 B$ [& |6 I　　11．6．1　ChatNavBar的@Component　2735 Q: D' w( X' x) `2 J
　　11．6．3　ChatNavBar的template　274
3 J! B/ R" k7 G　　11．6．4　完整的ChatNavBar组件　275  I5 Y5 ~9 A3 z7 g. c. Q4 \6 y6 v1 y$ {
　　11．7　总结　276
# Y" V3 x/ _4 H7 P% v& `　　11．8　更进一步　2779 ]6 z$ S4 p2 ^) K% S" H! g
　　第12章　基于TypeScript的Redux简介　2785 c/ {5 S( L% g
　　12．1　Redux　279. O4 c6 ]0 U/ X, m
　　12．2　Redux核心概念　280* {1 @/ y  W6 o# M
　　12．2．1　reducer是什么　280
, p- p! Y: u# @　　12．2．2　定义Action和Reducer的接口　2811 Y% F" |( X% A* q! Y. G
　　12．2．3　创建第一个Reducer　281* B+ U) I8 Z/ K
　　12．2．4　运行第一个Reducer　282
$ C! e, B8 D# ^6 I! s　　12．2．5　使用action调整计数器　283
* q- ?, S. H' a! f) K& N　　12．2．6　reducer的switch　284+ y% ?; F6 g" j7 h/ Y
　　12．2．7　action的“参数”　285
& V9 }( r5 R4 @, H# N- \　　12．3　保存state　2864 c  l0 }/ `6 }# k  ]
　　12．3．1　使用store　287
. D7 P9 r! R! h  U$ b9 s& U　　12．3．2　使用subscribe进行通知　287( {, W$ E; Z; h9 G6 Q. |8 Z
　　12．3．3　Redux核心　290
  }" \& N3 v+ I3 X　　12．4　消息应用　291: R9 z$ I. n4 D1 Z
　　12．4．1　消息应用的state　291$ S* p5 y/ e' Y$ `0 ?+ M
　　12．4．2　消息应用的action　292+ P* o  `8 M  d/ X8 C0 i" G
　　12．4．3　消息应用的reducer　292) W1 F6 g, v( Y, [, |# v8 c  J
　　12．4．4　试用action　2950 S; x( x( ?- _+ x7 ~
　　12．4．5　action creator　296+ X6 }% [- Z4 S6 B7 s  y
　　12．4．6　使用真正的Redux　297
& D0 X2 f; Y. ~3 `; K+ d　　12．5　在Angular中使用Redux　299/ }, t4 @' T8 i% l
　　12．6　规划应用　299
2 ~& l% F. T" f6 E7 d) o; ]4 @# @. z) V　　12．7　组建Redux　300
+ D: b- V; |# Z2 ~' V! d　　12．7．1　定义应用的state　300/ `* u4 A( L1 C8 n' X
　　12．7．2　定义reducer　301- V( ~0 _1 q( }" n: h
　　12．7．3　定义action creator　301
! q" V( K% L( L/ W　　12．7．4　创建store　302- b, }" {( Y' a6 Y3 A2 O
　　12．8　CounterApp组件　303
, g- W8 s3 n- |6 n/ b& j% p　　12．9　提供store　304
5 v6 u0 H$ i& W8 L6 B　　12．10　启动应用　305: n, o7 K: C6 t1 Q$ S& [/ \3 s; ]% r
　　12．11　CounterComponent　3068 @4 u- t. [$ |0 \8 q( x
　　12．11．1　import　306
/ b# _" [7 h5 X) z* G* m　　12．11．2　模板　306+ ^, e# d0 r  g: W9 l/ v
　　12．11．3　constructor　307( E/ [; \6 n( i1 J. m' d# i' r
　　12．11．4　整合　308) q! ?. \& u- u$ B
　　12．12　更进一步　310
' f. {* [$ {3 V; b　　12．13　参考资源　3100 S0 l5 L3 O2 m& l* ?
　　第13章　在Angular中引入Redux　312+ x& m4 R( Q0 o! w' H
　　13．1　阅读背景　312/ |; e! h5 `2 q5 V- d5 p
　　13．2　聊天应用概览　313
5 F1 Q, P4 _' v+ c& W) i　　13．2．1　组件　313
, N# ~7 p' k, T* m' d　　13．2．2　数据模型　314
  P7 p+ W6 Z7 ~/ U! a　　13．2．3　reducer　315+ n& v. d3 Y6 a1 M& t# y
　　13．2．4　总结　3154 O' r9 _& T3 }+ y0 b
　　13．3　实现数据模型　315& [. J* @6 }# G" \! q, V3 Y8 J
　　13．3．1　User　315
5 r& i. z3 Y2 g" }1 d4 T$ z6 h　　13．3．2　Thread　316! W& u. k" c+ {
　　13．3．3　Message　316$ J" \* l* K, D& p! r1 Z- q4 l* l
　　13．4　应用的state　316
$ H* @6 m( ~3 c. O( j5 w- k: @　　13．4．1　关于代码布局　317
4 Q9 ^3 x' B1 W! x9 z　　13．4．2　根reducer　317: [8 `0 }& U1 k
　　13．4．3　UserState　318/ J( P5 _5 g# D4 }3 |1 z/ D# ?
　　13．4．4　ThreadsState　318, E8 C0 v' s; z8 U
　　13．4．5　可视化AppState　319  s. M2 p  V% l: G
　　13．5　构建reducer（和action creator）　32113．5．1　设置当前用户的action creator　32113．5．2　UsersReducer：设置当前用户　32113．5．3　会话和消息概览　322
2 d* l8 ~, `0 L6 U. g　　13．5．4　添加新会话的action creator　32213．5．5　添加新会话的reducer　323
  ^* A+ C/ e' N6 b( T　　13．5．6　添加新消息的action creator　32413．5．7　添加新消息的reducer　325% o! W8 ~. N( i
　　13．5．8　选择会话的action creator　326
$ g5 O: A5 Y# \8 x  e9 x　　13．5．9　选择会话的reducer　327
! e: a' f) S. k( f　　13．5．10　reducer总结　3288 {3 _( e# e8 I) j
　　13．6　构建Angular聊天应用　328% X1 _( R* y- |# f2 N' |
　　13．6．1　顶层组件ChatApp　330
- G0 O& s$ M- A- c! \( f7 n　　13．6．2　ChatPage　330% y& U0 u6 L# O: |
　　13．6．3　容器型组件与展示型组件　332
, g* Q" b; b. F7 y  e. E　　13．7．1　Redux选择器　3347 k& _- V0 J  Y" C
　　13．7．2　会话选择器　334; m2 B- Y# J' ~
　　13．7．3　未读消息总数选择器　336
' [* u& _* [5 Z  Q5 L* L　　13．8　构建ChatThreads组件　336/ v3 M8 I: E+ Z# q! X+ V9 T* ^; {
　　13．8．1　ChatThreads控制器　337/ f0 P5 f! g9 E0 u7 j0 e: j
　　13．8．2　ChatThreads的template　338! V& R; o+ B; I9 h4 c  D
　　13．10　构建ChatWindow组件　340/ K. b8 ~' }7 }; W% s
　　13．10．1　ChatWindow的updateState()　34113．10．2　ChatWindow的scrollToBottom()　34213．10．3　ChatWindow的sendMessage　342
0 u8 t& @9 g" O1 m  c- H( \　　13．10．4　ChatWindow的onEnter　3434 s0 I+ G- T* S1 b6 H$ a
　　13．10．6　处理键盘动作　345# S* z" A( X$ F: J  z$ M
　　13．10．7　使用ngModel　3450 M6 a$ o0 @  W9 M$ y( v1 H
　　13．10．8　点击Send按钮　345" P1 Z6 V: `- l
　　13．11　ChatMessage组件　3455 h% k" l) ~+ C  A( Q1 I  ^
　　13．11．1　设置incoming属性　346
- e0 _3 Z7 ?0 I( b# O　　13．11．2　ChatMessage的template　3460 Y, I; v3 V. y' _: ^
　　13．12　总结　3470 d0 `! D( |- `6 ?; w. N4 W* f  U
　　第14章　高级组件　349% H, r0 W. t5 q( d% S4 R) X
　　14．1　样式　3497 G1 A; \3 P6 n- s
　　14．1．1　视图（样式）封装　3515 }' ]7 z6 n, c( P; r
　　14．1．2　Shadow DOM 封装　354
" j! r: _3 V: P　　14．1．3　不使用封装　3550 X. T% E; e( U( L2 A
　　14．2　创建popup指令：引用并修改宿主元素　35714．2．1　popup指令的结构　357
" C2 {4 `  ^0 V& e/ L2 Y　　14．2．2　使用ElementRef　3591 I" x" m) Y* u  G6 c5 }
　　14．2．3　绑定到host属性　360
" J+ c+ O! Y3 q+ Y- }　　14．2．4　添加按钮并使用exportAs　3630 {, F0 a% j1 E* r$ ?  o3 S
　　14．3．1　改变host属性的CSS类　364
& n4 A) `' n8 ]! c' ?8 x& o: x　　14．3．2　使用ng-content　364
) l; _, s1 L; c: e* H　　14．4　查询相邻的指令：编写标签页　366; M: ]0 j& P5 g0 Z
　　14．4．1　Tab组件　367% s+ r7 m- z* p% v9 k" n
　　14．4．2　Tabset组件　3676 A5 o6 U# D( R5 D3 Y& J4 }
　　14．4．3　使用Tabset　369
( [/ z+ z- q. A  M　　14．5　生命周期钩子　370
4 H. `& J3 ^' X0 N% z+ d; ?　　14．5．1　OnInit和OnDestroy　371' d3 X4 p$ A4 p) I1 A  g$ \- {
　　14．5．2　OnChanges　374
3 |. O8 b% z! q  c+ A+ Q　　14．5．3　DoCheck　378- V2 |, n9 e+ D. b& T0 c6 T
　　14．5．4　AfterContentInit、AfterViewInit、AfterContentChecked和AfterViewChecked　38614．6　高级模板　391( j" l5 W: f" ~- h+ {* E
　　14．6．1　重写ngIf：ngBookIf　392( U  L& W- \. T& D7 O  G- V
　　14．6．2　重写ngFor：ngBookRepeat　394/ {  e; [, v2 s' _5 h7 \- q
　　14．7　变更检测　398
( n9 \7 d8 ?: }. N0 F9 m/ _# @　　14．7．1　自定义变更检测　4016 ]) n0 Y8 O0 B* I; j
　　14．7．2　Zones　405/ }+ O4 b/ K# @7 g; c* h
　　14．7．3　可观察对象和OnPush　406, I! k1 x" u+ Z: g6 I
　　14．8　总结　409& Z3 x; P6 M! W0 j) c+ [
　　第15章　测试　410
: t5 p' S/ W" }# f) r- E4 [　　15．1　测试驱动？　4105 S( y! H' v2 s- L9 D
　　15．2　端对端测试与单元测试　411; h$ p, L+ o5 I4 J+ s0 g: t
　　15．3　测试工具　411
; U& b0 N7 b2 B" t" b, [( K" [* h　　15．3．1　Jasmine　411$ x: w' \# o9 c( s# N
　　15．3．2　Karma　412
$ S4 F1 h( I) ], l　　15．4　编写单元测试　412/ f/ d. h0 p1 E& R. v6 i
　　15．5　Angular单元测试框架　412# O5 |2 K6 l7 j5 \, t( o
　　15．6　测试前准备　413- f9 {* l# z/ E( N
　　15．7　测试服务类和HTTP　4151 I" a) F: l9 [! V) g8 M) s: l# r
　　15．7．1　HTTP要点　4162 W4 y* `& r% N  q
　　15．7．2　伪装　417. R& y- _' S; M
　　15．7．3　模拟　417
  ~6 u8 l+ t  }8 D8 z　　15．7．4　Http MockBackend　4181 r1 l$ \+ p: S5 k2 N4 {; B
　　15．7．5　TestBed．configureTestingModule和提供者　41815．7．6　测试getTrack方法　4194 f/ ^9 }( t  F) h( j  i9 T
　　15．8　测试组件间的路由　424
% J' Y5 H0 A/ \2 C( J　　15．8．1　为测试创建路由器　424$ z& V7 P* |5 E& F; y
　　15．8．2　模拟依赖　427, ]( r1 v8 z3 k4 T- j
　　15．8．3　探子　427
4 n/ J1 d8 U1 e  \* h9 h" w" N: I/ s　　15．9　回到测试代码　429
, a# [( d# X+ m# o# u　　15．9．1　fakeAsync和advance　431  x+ y, k, }  o: P" n1 M
　　15．9．2　inject　432
( N" a" O$ X3 j$ V6 x% \' A　　15．9．3　测试ArtistComponent组件初始化　43215．9．4　测试ArtistComponent方法　433. r( e- a7 u4 J# f
　　15．9．5　测试ArtistComponent DOM模板值　43415．10　测试表单　436
* C. h7 u( }7 F8 j* ]　　15．10．1　创建一个ConsoleSpy　4381 G1 \1 I) C% B" A) ~8 ]6 J
　　15．10．2　安装ConsoleSpy　439
+ h% a" F# y6 j- {* P: m5 J3 |　　15．10．3　配置测试模块　439  h, y$ K$ ^' J  N
　　15．10．4　测试表单　4409 S1 T8 }; i/ `1 f( ~4 y( T" F
　　15．10．5　重构表单测试　441/ n* b3 e* g, e3 P4 Q0 f3 j
　　15．11　测试HTTP请求　444
4 W. S, V  J, n  n) O　　15．11．1　测试POST方法　445
" b& [' Q5 T! b9 a　　15．11．2　测试DELETE方法　446# m/ e' f' e3 h! A4 f3 N+ E
　　15．11．3　测试HTTP头　447
& ~" L# b" E1 R- R* d# p3 |7 P. L　　15．11．4　测试YouTubeService　448
  b4 I+ i$ `$ F　　15．12　总结　452
, t7 y- A; u5 ^! y' s' v! P! M) v7 v3 g　　第16章　把AngularJS应用升级到Angular　45316．1　周边概念　453  V4 h% w0 m% A9 I; ?# v
　　16．2　我们要构建什么　454
3 M; v& y- ^4 l0 M* ?( a6 l　　16．3　把AngularJS映射到Angular　455( {3 ]! S5 E+ B  m8 _
　　16．4　关于互操作性的需求　456
& S# `# i8 |: P: G0 T　　16．5　AngularJS应用　456
5 ]$ N; B, C% f　　16．5．1　AngularJS应用的HTML　4589 @* X  t/ u. c( K4 n5 V
　　16．5．2　代码概览　458; I# Y# ^7 m3 K4 s2 O; C5 ^# B$ \
　　16．5．3　AngularJS：PinsService　459$ T9 Q8 y$ d5 d1 P1 P7 k
　　16．5．4　AngularJS：配置路由　460
& n2 m4 Y1 C* e: W* b　　16．5．5　AngularJS：HomeController　4618 w/ v  x" O2 h+ ]6 ]5 M
　　16．5．6　AngularJS：HomeController模板　46116．5．7　AngularJS：pin指令　462; _( x- a7 ]; Q2 k  X1 Q" z
　　16．5．8　AngularJS：pin指令模板　463
" o& X( D/ Y- J　　16．5．10　AngularJS：AddController模板　46516．5．11　AngularJS：总结　4670 J, U+ L. ]) @; u
　　16．6　构建混合式应用　468
. {8 L8 m1 v9 w  ^7 s* r3 e- a　　16．6．1　混合式应用的结构　4681 a0 T% v( q8 x* Q3 L0 O
　　16．6．2　引导混合式应用　471' j1 a: I( Y8 a( v! N( Z2 i
　　16．6．3　我们要升级什么　473
  r- E$ i5 b% R; [  [　　16．6．4　插一小段内容：类型文件　479& ^* Z- S6 a- {
　　16．6．6　使用Angular的PinControlsComponent　48116．6．7　把Angular的PinControlsComponent 降级到AngularJS　48216．6．8　用Angular添加图钉　483
: w" j; N0 Z3 d: o3 _/ D　　16．6．9　把AngularJS的PinsService和$state升级到Angular　48416．6．10　写Angular版的AddPinComponent　48516．6．11　使用AddPinComponent　490
$ ~7 E) g4 W& z/ H　　16．6．12　把Angular的服务暴露给AngularJS　49016．6．13　实现AnalyticsService　491
. U1 Q* P( w0 W0 l4 [0 l　　16．6．14　把Angular的AnalyticsService降级到AngularJS　49216．7　总结　493
. I/ M) C; `& Y2 ~3 v! E　　16．8　参考资源　493
% V- m% J! X0 {/ U3 t* ]3 M2 C2 ~4 |2 v5 K- E  P6 n8 {
- F9 E+ X5 D# y) M0 a2 B0 O
作者: dcf730318    时间: 2020-2-2 11:31
Angular权威教程 轻松领悟新一代Web开发精髓 Ari Lerner8 a/ Q2 A( S5 W" d' r. V
http://www.ynjie.com/forum.php?mod=viewthread&tid=8511
; _8 h$ Y8 B) b4 A" |! i(出处: 与你共享街)
2 B0 X  _# `, l" w& A( @( j  ?
作者: wint    时间: 2020-3-7 08:44
thanks for your sharing



欢迎光临 与你共享街 (http://www.ynjie.com/) Powered by Discuz! X3.4