1
00:00:00,000 --> 00:00:04,586
[MUSIC]

2
00:00:04,586 --> 00:00:08,713
Bây giờ hãy để tôi cung cấp cho bạn một cái nhìn tổng quan nhanh chóng về Angular và

3
00:00:08,713 --> 00:00:12,340
mối quan hệ của nó với chương trình phản ứng,

4
00:00:12,340 --> 00:00:16,780
làm thế nào để Angular sử dụng các lập trình phản ứng.

5
00:00:16,780 --> 00:00:21,988
Đặc biệt, thư viện RxJS và cách nó được tận dụng bởi

6
00:00:21,988 --> 00:00:28,174
Angular để cung cấp một cách phản ứng của việc viết các ứng dụng Angular.

7
00:00:28,174 --> 00:00:33,199
Bây giờ những gì chúng ta trình bày trong bài giảng này là một cái nhìn tổng quan rất nhanh về

8
00:00:33,199 --> 00:00:38,426
khái niệm tổng quát về lập trình phản ứng, quan sát được,

9
00:00:38,426 --> 00:00:43,930
mô hình quan sát và cách nó được áp dụng trong Angular.

10
00:00:43,930 --> 00:00:47,280
Lập trình phản ứng tự nó là một

11
00:00:48,460 --> 00:00:52,100
chủ đề rất rộng lớn mà không thể được đề cập trong mười phút.

12
00:00:53,240 --> 00:00:54,410
Lập trình phản ứng,

13
00:00:54,410 --> 00:00:59,800
nếu tôi cần phải trang trải nó một cách chi tiết sẽ trở thành toàn bộ khóa học theo quyền riêng của mình.

14
00:00:59,800 --> 00:01:01,421
Và thật không may,

15
00:01:01,421 --> 00:01:07,372
chúng tôi không có thời gian để nhúng toàn bộ khóa học vào khóa học cụ thể này.

16
00:01:07,372 --> 00:01:12,718
Vì vậy, với thực tế là chúng tôi quan tâm chủ yếu đến cách Angular tận dụng

17
00:01:12,718 --> 00:01:18,066
lập trình phản ứng để cho phép chúng tôi tăng gấp đôi lên các ứng dụng Angular,

18
00:01:18,066 --> 00:01:21,590
vì vậy chúng tôi sẽ tập trung vào khía cạnh đó.

19
00:01:21,590 --> 00:01:22,455
Nhưng trên đường đi,

20
00:01:22,455 --> 00:01:28,340
tôi sẽ cung cấp cho bạn một giới thiệu nhanh về các khái niệm khác nhau trong lĩnh vực chung này.

21
00:01:28,340 --> 00:01:30,720
Nếu bạn quan tâm đến lập trình phản ứng,

22
00:01:30,720 --> 00:01:36,100
tôi sẽ khuyên bạn nên theo đuổi một số liên kết mà tôi đã cung cấp và các

23
00:01:36,100 --> 00:01:40,240
nguồn lực bổ sung cho bài học cụ thể này.

24
00:01:40,240 --> 00:01:44,090
Bạn có thể truy cập vào rất nhiều tài liệu ngoài kia, nhưng

25
00:01:44,090 --> 00:01:48,220
chúng tôi sẽ cung cấp cho bạn một nền tảng vững chắc trong lập trình phản ứng.

26
00:01:48,220 --> 00:01:51,713
Nhưng trong khóa học này, từ thời điểm này trở đi,

27
00:01:51,713 --> 00:01:57,448
chúng ta sẽ xem xét cách Angular tận dụng mô hình lập trình phản ứng để

28
00:01:57,448 --> 00:02:00,150
thiết kế các ứng dụng Angular.

29
00:02:00,150 --> 00:02:04,818
Chúng tôi không chỉ giới hạn cho bài học này, nhưng

30
00:02:04,818 --> 00:02:10,266
tất cả các bài học tiếp theo cũng sẽ thấy Sử dụng các

31
00:02:10,266 --> 00:02:16,220
mô hình quan sát và quan sát và cách chúng tôi viết các ứng dụng phản ứng trong góc cạnh.

32
00:02:18,080 --> 00:02:22,800
Toàn bộ cuộc thảo luận về lập trình phản ứng xoay quanh

33
00:02:22,800 --> 00:02:27,770
mô hình kỹ thuật phần mềm đặc biệt này được gọi là mô hình quan sát được.

34
00:02:27,770 --> 00:02:31,970
Bạn nhớ lại băng nhóm bốn mà tôi đã đề cập đến bạn trong một trong những

35
00:02:31,970 --> 00:02:35,690
bài giảng trước đó, nơi chúng tôi đã thảo luận về khung điều khiển xem mô

36
00:02:35,690 --> 00:02:38,140
hình và khung mô hình xem mô hình.

37
00:02:38,140 --> 00:02:43,246
Cùng một băng nhóm bốn cuốn sách chứa một số mô hình

38
00:02:43,246 --> 00:02:49,616
đã được sử dụng khá thành công trong mô hình lập trình phản ứng.

39
00:02:49,616 --> 00:02:53,570
Mô hình quan sát viên xoay quanh những người quan sát được.

40
00:02:53,570 --> 00:02:58,948
Vì vậy, bạn có thể quan sát, hành vi của họ có thể được quan sát bởi các nhà quan sát.

41
00:02:58,948 --> 00:03:02,200
Vì vậy, đó là lý do tại sao điều này được gọi là mô hình quan sát viên.

42
00:03:02,200 --> 00:03:07,180
Bạn khai báo một số đối tượng là có thể quan sát được hoặc các đối tượng và

43
00:03:07,180 --> 00:03:12,060
những quan sát này sẽ được quan sát bởi các quan sát viên.

44
00:03:12,060 --> 00:03:15,190
Bây giờ, chính các quan sát viên sẽ đăng ký để

45
00:03:16,280 --> 00:03:19,400
xem các thay đổi trong quan sát được và quan sát được

46
00:03:19,400 --> 00:03:24,010
sẽ thông báo cho các quan sát viên bất cứ khi nào thay đổi xảy ra.

47
00:03:24,010 --> 00:03:29,781
Vì vậy, trong mô hình quan sát viên này, cách các nhà quan sát này sẽ đăng ký

48
00:03:29,781 --> 00:03:35,165
với người quan sát được hoặc tự đăng ký với người quan sát được.

49
00:03:35,165 --> 00:03:40,013
Vì vậy, đó là cách người quan sát biết những nhà quan sát nào quan tâm đến

50
00:03:40,013 --> 00:03:42,430
bất kỳ thay đổi nào trong trạng thái của nó.

51
00:03:42,430 --> 00:03:46,250
Vì vậy, do đó, bất cứ khi nào quan sát được nói,

52
00:03:46,250 --> 00:03:51,830
thay đổi trạng thái của nó, nó sẽ ngay lập tức thông báo cho tất cả

53
00:03:51,830 --> 00:03:56,660
các quan sát viên về sự thay đổi của nhà nước và các quan sát viên sau đó có thể

54
00:03:56,660 --> 00:04:02,170
hành động dựa trên thông báo này về sự thay đổi trong quan sát.

55
00:04:02,170 --> 00:04:06,185
Mô hình quan sát viên đã được sử dụng rất hiệu quả trong nhiều

56
00:04:06,185 --> 00:04:07,212
hoàn cảnh khác nhau.

57
00:04:07,212 --> 00:04:12,600
Và thực sự, mô hình lập trình phản ứng dựa trên nó.

58
00:04:12,600 --> 00:04:15,990
Vì vậy, câu hỏi xuất hiện trong tâm trí của bạn ngay lập tức là

59
00:04:15,990 --> 00:04:18,280
tại sao chúng ta nói về những người quan sát được?

60
00:04:18,280 --> 00:04:21,730
Sự quan tâm đặc biệt về vật thể quan sát là gì?

61
00:04:21,730 --> 00:04:26,161
Mô hình quan sát viên là một cách viết các ứng dụng phần mềm.

62
00:04:26,161 --> 00:04:29,760
Vì vậy, điều này được dựa trên Streams.

63
00:04:29,760 --> 00:04:33,290
Vì vậy, bạn có dữ liệu chảy ứng dụng của bạn.

64
00:04:33,290 --> 00:04:37,826
Dữ liệu này có thể được xem như là một dòng giá trị chảy qua

65
00:04:37,826 --> 00:04:38,879
ứng dụng của bạn.

66
00:04:38,879 --> 00:04:44,158
Vì vậy, dòng suối là kênh chính xung quanh đó

67
00:04:44,158 --> 00:04:47,380
có thể quan sát và mô hình quan sát được thiết kế.

68
00:04:47,380 --> 00:04:51,007
Vì vậy, những luồng bạn có thể đăng ký vào các luồng này.

69
00:04:51,007 --> 00:04:55,762
Và bất cứ khi nào một giá trị xuất hiện trên dòng suối, bạn sẽ nhận được giá trị đó và

70
00:04:55,762 --> 00:04:58,400
sau đó bạn có thể phản ứng với giá trị đó.

71
00:04:58,400 --> 00:05:02,430
Vì vậy, để có thể phản ứng với giá trị đó, bạn cần đăng ký luồng đó hoặc

72
00:05:02,430 --> 00:05:04,710
bạn cần đăng ký để quan sát được.

73
00:05:04,710 --> 00:05:08,860
Các quan sát sẽ thường xuyên tiếp tục phát ra các giá trị.

74
00:05:08,860 --> 00:05:13,059
Và khi bạn nhìn thấy những giá trị đó, người quan sát có thể phản ứng với những giá trị đó.

75
00:05:13,059 --> 00:05:16,413
Bây giờ điều này cũng có nghĩa là khi bạn không còn quan tâm,

76
00:05:16,413 --> 00:05:19,660
bạn có thể hủy đăng ký mình từ một quan sát được.

77
00:05:19,660 --> 00:05:23,653
Bạn có thể nói, tôi không hứng thú với việc nhìn bạn nữa và sau đó biến mất.

78
00:05:23,653 --> 00:05:28,794
Vì vậy, mô hình quan sát cho phép bạn theo dõi định kỳ thay đổi,

79
00:05:28,794 --> 00:05:34,170
nếu bạn muốn và sau đó ngừng quan sát khi bạn không còn quan tâm.

80
00:05:34,170 --> 00:05:38,855
Vì vậy, kiểu mô hình đó cho phép bạn thiết kế các

81
00:05:38,855 --> 00:05:43,135
ứng dụng phần mềm của mình theo một cách rất thú vị, một cách rất trực quan.

82
00:05:43,135 --> 00:05:45,435
Nhưng để có thể sử dụng cách tiếp cận này,

83
00:05:45,435 --> 00:05:48,513
bạn cần phải có được đầu của bạn xung quanh cách tiếp cận này.

84
00:05:48,513 --> 00:05:55,455
Giống như chúng ta đã thấy với mô hình gọi lại hoặc chúng ta đã thấy với việc sử dụng các lời hứa.

85
00:05:55,455 --> 00:06:01,740
Observables là một cách khác để thiết kế các ứng dụng.

86
00:06:01,740 --> 00:06:06,605
Vì vậy, một quan sát của chính nó sẽ rất lười biếng và nó sẽ chỉ treo xung quanh đó.

87
00:06:06,605 --> 00:06:10,360
Vì vậy, bạn có thể tạo ra một quan sát và sau đó chỉ cần để nó ở đó.

88
00:06:10,360 --> 00:06:12,496
Người quan sát trở nên hoạt động hoặc

89
00:06:12,496 --> 00:06:16,777
nó trở nên nóng khi ai đó bắt đầu đăng ký với người quan sát.

90
00:06:16,777 --> 00:06:21,380
Vì vậy, tại thời điểm đó, người quan sát bắt đầu hành động và bắt đầu chỉnh sửa các giá trị.

91
00:06:21,380 --> 00:06:25,515
Vì vậy, nếu ít nhất một quan sát viên được giao phó trong quan sát,

92
00:06:25,515 --> 00:06:29,000
thì quan sát sẽ bắt đầu phát ra các giá trị.

93
00:06:29,000 --> 00:06:36,010
Nếu không ai được ủy thác, quan sát được sẽ quay trở lại vỏ của nó và vẫn ở đó.

94
00:06:36,010 --> 00:06:38,058
Vì vậy, bạn có thể nghĩ về nó theo cách đó.

95
00:06:38,058 --> 00:06:42,231
Vì vậy, nếu hình ảnh tinh thần đó giúp bạn

96
00:06:42,231 --> 00:06:46,760
hiểu được bằng sáng chế của người quan sát hoạt động như thế nào, thì cũng vậy.

97
00:06:46,760 --> 00:06:51,939
Vì vậy, điều đó sẽ giúp bạn nhìn vào cách chúng tôi thiết kế các ứng dụng của chúng tôi

98
00:06:51,939 --> 00:06:56,657
trong các bài tập tiếp theo và sau đó các bài học tiếp theo

99
00:06:56,657 --> 00:07:01,116
mà chúng tôi kiểm tra HTTP hỗ trợ Angular chi tiết hơn.

100
00:07:04,490 --> 00:07:11,222
Một khía cạnh khác của quan sát được là thực tế là hủy bỏ một yêu cầu trước

101
00:07:11,222 --> 00:07:16,172
đó và sau đó thử lại là rất đơn giản với quan sát được.

102
00:07:16,172 --> 00:07:20,660
Lời hứa mà bạn đã thấy trước đó, một khi bạn bắt đầu chờ đợi một lời hứa,

103
00:07:20,660 --> 00:07:23,690
bạn không thể hủy bỏ, bạn đang chờ đợi.

104
00:07:23,690 --> 00:07:26,878
Lời hứa cuối cùng sẽ giải quyết hoặc thất bại và

105
00:07:26,878 --> 00:07:31,907
sau đó bạn phải phản ứng bất kể điều gì ngay cả khi bạn không còn quan tâm.

106
00:07:31,907 --> 00:07:36,075
Nhưng với một quan sát được, nếu bạn có thể bán đăng ký của bạn,

107
00:07:36,075 --> 00:07:41,540
thì những gì xảy ra với quan sát không phải là bất kỳ mối quan tâm nào đối với bạn cả.

108
00:07:41,540 --> 00:07:45,019
Và vì vậy bạn không cần phải làm bất cứ điều gì, nếu bạn hủy đăng ký của mình.

109
00:07:45,019 --> 00:07:50,732
Vì vậy, hủy bỏ và thử lại trong trường hợp thử nghiệm trước đó không

110
00:07:50,732 --> 00:07:55,599
thành công là rất đơn giản với những người quan sát.

111
00:07:55,599 --> 00:08:01,710
Chúng ta sẽ thấy một số hành vi này chi tiết hơn trong các bài tập tiếp theo.

112
00:08:03,050 --> 00:08:06,771
Điều này đưa chúng ta đến khái niệm về lập trình phản ứng.

113
00:08:06,771 --> 00:08:11,071
Lập trình phản ứng dựa trên mô hình quan sát viên và

114
00:08:11,071 --> 00:08:13,550
cũng là một mô hình lặp lại.

115
00:08:13,550 --> 00:08:14,243
Nhưng dù sao,

116
00:08:14,243 --> 00:08:18,610
mô hình quan sát viên là đặc điểm chủ đạo của một lập trình phản ứng.

117
00:08:18,610 --> 00:08:22,670
Vì vậy, trong lập trình phản ứng, chúng tôi quan tâm đến các luồng dữ liệu.

118
00:08:22,670 --> 00:08:25,780
Cách dữ liệu chảy qua ứng dụng của bạn.

119
00:08:25,780 --> 00:08:29,450
Bất kỳ luồng dữ liệu nào cũng có thể được coi là luồng.

120
00:08:29,450 --> 00:08:34,510
Vì vậy, dòng dữ liệu này có thể truyền bá các thay đổi trong suốt ứng dụng của bạn.

121
00:08:34,510 --> 00:08:37,940
Và trong khi những thay đổi đang được truyền bá thông qua các ứng dụng,

122
00:08:39,140 --> 00:08:43,440
ở giai đoạn trung gian bạn thậm chí có thể lấy một luồng cụ thể,

123
00:08:43,440 --> 00:08:46,860
sửa đổi nó và tạo ra một luồng khác đi ra từ đó.

124
00:08:46,860 --> 00:08:51,980
Vì vậy, đó là những gì một mô hình quan sát cho phép chúng ta vẽ.

125
00:08:51,980 --> 00:08:58,000
Vì vậy mà toàn bộ mô hình lập trình được xây dựng xung quanh các luồng hoặc các luồng dữ liệu.

126
00:08:58,000 --> 00:09:04,540
Vì vậy, đây là một cách khác để xem xét giải quyết vấn đề của bạn.

127
00:09:04,540 --> 00:09:10,180
Và đó là lý do tại sao tôi nhấn mạnh một thực tế là bạn cần phải có được đầu của bạn xung quanh để

128
00:09:10,180 --> 00:09:17,120
hiểu làm thế nào các mô hình phản ứng hoặc cách lập trình phản ứng được thực hiện trong thực tế.

129
00:09:17,120 --> 00:09:20,810
Bây giờ, bạn thường nghe người ta nói về một thứ gọi là

130
00:09:20,810 --> 00:09:22,290
lập trình phản ứng chức năng.

131
00:09:22,290 --> 00:09:25,640
Nếu bạn đã quen thuộc với mô hình lập trình chức năng.

132
00:09:25,640 --> 00:09:28,430
Nhưng cộng với lập trình phản ứng

133
00:09:28,430 --> 00:09:32,400
là những gì người ta thường tham khảo như là lập trình phản ứng chức năng.

134
00:09:32,400 --> 00:09:35,670
Vì vậy, sự kết hôn giữa hai cách tiếp cận này.

135
00:09:35,670 --> 00:09:40,340
Bây giờ, bạn sẽ thấy việc sử dụng một số trong số này với Angular

136
00:09:40,340 --> 00:09:43,720
khi bạn đi qua khóa học đặc biệt này.

137
00:09:43,720 --> 00:09:46,010
Cuối cùng, những gì về RxJS?

138
00:09:46,010 --> 00:09:49,890
Nó đóng vai trò gì trong toàn bộ hệ sinh thái này?

139
00:09:49,890 --> 00:09:55,280
RxJS là một thực hiện JavaScript của mô hình quan sát được và

140
00:09:55,280 --> 00:09:58,750
cũng hỗ trợ cho lập trình phản ứng.

141
00:09:58,750 --> 00:10:03,820
Vì vậy, nếu bạn đã làm lập trình phản ứng trong JavaScript,

142
00:10:03,820 --> 00:10:07,820
sau đó bạn tận dụng thư viện RxJS để làm như vậy.

143
00:10:07,820 --> 00:10:10,790
RxJS chỉ là một thực hiện như vậy.

144
00:10:10,790 --> 00:10:15,990
Có một vài người khác nhưng lý do tại sao chúng tôi quan tâm đến RxJS đặc biệt

145
00:10:15,990 --> 00:10:20,860
trong khóa học này là bởi vì Angular tận dụng RxJS cho

146
00:10:20,860 --> 00:10:23,880
sự hỗ trợ của nó cho lập trình phản ứng.

147
00:10:23,880 --> 00:10:26,190
Vì vậy, RxJS là một thư viện.

148
00:10:26,190 --> 00:10:28,480
Nó là một thư viện riêng biệt mà là ngoài kia.

149
00:10:28,480 --> 00:10:35,010
Bạn có thể sử dụng RXJS cho các mục đích khác cũng, không nhất thiết phải liên quan đến Angular.

150
00:10:35,010 --> 00:10:39,960
Đã có những ứng dụng đã được phát triển bằng cách sử dụng RxJS per se

151
00:10:39,960 --> 00:10:42,400
không liên quan đến Angular.

152
00:10:42,400 --> 00:10:46,955
Nhưng trong khóa học này, chúng tôi quan tâm đến cách RxJS đi kèm với

153
00:10:46,955 --> 00:10:52,480
Angular để hỗ trợ lập trình phản ứng trong Angular.

154
00:10:52,480 --> 00:10:57,790
Vì vậy, có RxJS là một thư viện cho phép bạn làm lập trình không đồng bộ.

155
00:10:57,790 --> 00:11:01,800
Chúng tôi đã nói về lập trình không đồng bộ hứa hẹn trước đó.

156
00:11:01,800 --> 00:11:06,300
Chúng ta sẽ thấy lập trình không đồng bộ với callbacks trong khóa học nút.

157
00:11:06,300 --> 00:11:11,380
Và quan sát được là một cách khác để xem xét lập trình

158
00:11:11,380 --> 00:11:16,530
không đồng bộ, cùng với lập trình viên điều khiển sự kiện.

159
00:11:16,530 --> 00:11:20,320
Vì vậy, nếu bạn đã quen thuộc với mô hình lập trình hướng sự kiện,

160
00:11:20,320 --> 00:11:24,230
RxJS phù hợp ngay trong môi trường đó.

161
00:11:25,970 --> 00:11:30,290
Toàn bộ điều được xây dựng xung quanh các trình tự quan sát được.

162
00:11:30,290 --> 00:11:37,160
Và thư viện RxJS cung cấp cho bạn một loại lõi được gọi là Observable.

163
00:11:37,160 --> 00:11:39,810
Và xung quanh loại lõi này, bạn có một số

164
00:11:39,810 --> 00:11:44,390
loại vệ tinh được xây dựng gọi là quan sát viên, lập lịch trình, và các đối tượng.

165
00:11:44,390 --> 00:11:47,520
Tất cả những điều này cho phép bạn lập trình phản ứng.

166
00:11:48,620 --> 00:11:54,445
Hơn nữa, RxJS cũng hỗ trợ một loạt các toán tử.

167
00:11:55,745 --> 00:11:59,345
Hỗ trợ các nhà khai thác, dấu tách, xin lỗi.

168
00:11:59,345 --> 00:12:02,545
Đó là một cái lưỡi của tôi.

169
00:12:03,872 --> 00:12:06,642
RxJS hỗ trợ các toán

170
00:12:06,642 --> 00:12:11,292
tử, toán tử được lấy cảm hứng từ các toán tử mảng JavaScript.

171
00:12:11,292 --> 00:12:15,892
Nếu bạn đã quen thuộc với các toán tử mảng JavaScript như bản đồ thì

172
00:12:18,202 --> 00:12:22,232
các toán tử RxJS sẽ trông rất quen thuộc với bạn.

173
00:12:22,232 --> 00:12:25,372
Bạn có thể đối xử với một quan sát và

174
00:12:25,372 --> 00:12:30,340
các giá trị mà một hình ảnh quan sát giống như một mảng, vì vậy đó là lý do tại sao nhiều

175
00:12:30,340 --> 00:12:36,170
nhà khai thác mảng tìm cách của họ vào RxJS và lập trình phản ứng cũng.

176
00:12:36,170 --> 00:12:40,250
Vì vậy, người dùng lập bản đồ, lọc, giảm và

177
00:12:40,250 --> 00:12:46,440
các toán tử mảng khác cũng sẽ tìm thấy một vị trí trong RxJS và lập trình phản ứng.

178
00:12:46,440 --> 00:12:51,890
Và đây là những gì cho phép bạn xử lý các sự kiện không đồng bộ như các bộ sưu tập.

179
00:12:51,890 --> 00:12:55,092
Vì vậy, khi bạn muốn chờ đợi

180
00:12:55,092 --> 00:12:59,770
một sự kiện không đồng bộ, nó sẽ tương tự như đăng ký vào một quan sát được.

181
00:12:59,770 --> 00:13:03,684
Vì vậy, khi quan sát được phát ra giá trị, bạn đã sẵn sàng để bắt được giá trị và

182
00:13:03,684 --> 00:13:05,550
sau đó hành động phù hợp.

183
00:13:05,550 --> 00:13:07,960
Bạn biết khi nào sự phát xạ đó sẽ diễn ra.

184
00:13:07,960 --> 00:13:13,220
Vì vậy, đó là phần không đồng bộ đi vào chơi với việc sử dụng RxJS.

185
00:13:14,550 --> 00:13:19,480
Và như tôi đã đề cập, lý do tại sao chúng tôi quan tâm đến RxJS là bởi vì

186
00:13:19,480 --> 00:13:22,750
Angular tận dụng thư viện RxJS để

187
00:13:23,900 --> 00:13:27,840
hỗ trợ cho lập trình phản ứng.

188
00:13:27,840 --> 00:13:31,080
Angular chính nó có một số được xây dựng trong quan sát,

189
00:13:31,080 --> 00:13:32,369
như chúng ta sẽ thấy trong một thời gian ngắn.

190
00:13:33,430 --> 00:13:38,430
Khi bạn bước vào thế giới lập trình phản ứng, bạn sẽ thường nghe mọi người nói

191
00:13:38,430 --> 00:13:42,230
về vật thể quan sát sau đó bạn sẽ nghe mọi người nói về các toán tử và

192
00:13:42,230 --> 00:13:45,830
sau đó bạn cũng sẽ nghe mọi người nói về sơ đồ bằng đá cẩm thạch.

193
00:13:45,830 --> 00:13:49,290
Bây giờ, sơ đồ bằng đá cẩm thạch là một cách để biểu diễn các

194
00:13:50,390 --> 00:13:53,730
lập trình phản ứng bằng cách sử dụng các vật thể quan sát.

195
00:13:53,730 --> 00:13:55,710
Vì vậy, nếu bạn tình cờ có một quan sát được,

196
00:13:56,830 --> 00:14:02,070
sau đó nếu bạn xem điều này quan sát được như là một hàm của thời gian,

197
00:14:02,070 --> 00:14:06,710
vì vậy nếu trục này đại diện cho một chức năng của thời gian, quan sát

198
00:14:06,710 --> 00:14:12,090
sẽ được định kỳ phát ra các giá trị như thế này, cái khác.

199
00:14:12,090 --> 00:14:16,896
Vì vậy, nếu bạn tổ chức các giá trị này dọc theo một chuỗi,

200
00:14:16,896 --> 00:14:21,540
như là một hàm của thời gian, vì vậy bạn sẽ thấy các giá trị được phát ra như thế này.

201
00:14:22,680 --> 00:14:26,350
Ngoài ra còn có khả năng bạn có thể gặp phải lỗi.

202
00:14:27,750 --> 00:14:30,990
Trong trường hợp đó, bạn cần phải xử lý lỗi một cách thích hợp.

203
00:14:30,990 --> 00:14:32,510
Nếu bạn xử lý lỗi một cách thích hợp,

204
00:14:32,510 --> 00:14:37,830
bạn có thể tiếp tục hoặc bạn có thể dừng lại tại thời điểm đó.

205
00:14:37,830 --> 00:14:41,520
Tương tự như vậy, khi một quan sát hoàn thành tất cả các lặp lại của

206
00:14:41,520 --> 00:14:44,730
nó, sau đó nó sẽ được đánh dấu là hoàn thành của quan sát.

207
00:14:44,730 --> 00:14:49,570
Vì vậy, bạn cần phải có thể thậm chí xử lý sự kiện hoàn thành trong một quan sát được.

208
00:14:49,570 --> 00:14:54,500
Với thời gian này chú thích hành vi của quan sát được, sau đó bạn có thể lấy

209
00:14:54,500 --> 00:15:00,240
các giá trị mà hình ảnh quan sát được và áp dụng các toán tử trên những quan sát được.

210
00:15:00,240 --> 00:15:04,680
Bây giờ các giá trị này có thể được xem như là một mảng.

211
00:15:04,680 --> 00:15:10,120
Nếu điều đó giúp bạn hiểu rõ hơn, bạn có thể xem nó như là một mảng các giá trị.

212
00:15:10,120 --> 00:15:15,140
Bây giờ, các giá trị này sau đó có thể được vận hành bằng cách sử dụng các toán tử khác nhau.

213
00:15:15,140 --> 00:15:21,630
Vì vậy, đó là nơi bản đồ của bạn, bộ lọc của bạn, giảm của bạn và một số toán tử mà

214
00:15:21,630 --> 00:15:26,560
bất kỳ thư viện chương trình phản ứng điển hình như RxJS hỗ trợ.

215
00:15:26,560 --> 00:15:29,010
Cho phép bạn chuyển đổi

216
00:15:29,010 --> 00:15:33,590
một tập hợp các giá trị mà bạn nhận được từ một quan sát được thành một tập hợp các giá trị khác.

217
00:15:33,590 --> 00:15:36,640
Qua đó, bạn kết thúc tạo ra một quan sát mới.

218
00:15:36,640 --> 00:15:39,170
Và quan sát mới này sẽ bao gồm các

219
00:15:39,170 --> 00:15:42,830
giá trị biến đổi từ quan sát ban đầu.

220
00:15:42,830 --> 00:15:48,294
Vì vậy, đó là lý do tại sao tôi hiển thị các giá trị chuyển đổi như hình chữ nhật ở đây.

221
00:15:48,294 --> 00:15:52,861
Chỉ để cung cấp cho bạn một ấn tượng trực quan về những gì nó là chúng tôi đang cố gắng để làm với

222
00:15:52,861 --> 00:15:54,170
một nhà điều hành.

223
00:15:54,170 --> 00:15:58,620
Vì vậy, bạn đang lấy một giá trị và sau đó biến nó thành một giá trị khác nhau.

224
00:15:58,620 --> 00:16:01,640
Và chuỗi các giá trị khác nhau mà

225
00:16:01,640 --> 00:16:06,400
Bạn có được bằng cách chuyển đổi các giá trị phát ra bởi một quan sát được.

226
00:16:06,400 --> 00:16:11,390
Bản thân nó sẽ trở thành một chuỗi các giá trị, và do đó,

227
00:16:11,390 --> 00:16:12,880
sẽ trở thành một quan sát khác.

228
00:16:12,880 --> 00:16:16,820
Vì vậy, bạn có thể lấy được một quan sát từ một quan sát khác.

229
00:16:16,820 --> 00:16:19,335
Nhưng quan sát thứ hai này phụ thuộc vào cái đầu tiên vì vậy nó phụ thuộc.

230
00:16:19,335 --> 00:16:26,600
Hành vi của nó được gõ, cái đầu tiên thông qua việc sử dụng toán tử này.

231
00:16:26,600 --> 00:16:31,730
Chúng ta sẽ thấy các ví dụ về những điều này khi chúng ta đi qua một số bài tập

232
00:16:31,730 --> 00:16:37,210
trong bài học này và các bài học tiếp theo.

233
00:16:37,210 --> 00:16:41,450
Còn Angular và RXJS, làm thế nào để họ đến với nhau?

234
00:16:41,450 --> 00:16:48,540
Angular, như chúng tôi đã đề cập trước đó, hỗ trợ một số quan sát được một mình.

235
00:16:48,540 --> 00:16:53,375
Và sự hỗ trợ này của các vật thể quan sát trong Angular cho phép bạn thực hiện một số

236
00:16:53,375 --> 00:16:59,070
lập trình phản ứng trong ứng dụng Angular của bạn.

237
00:16:59,070 --> 00:17:02,210
Vì vậy, ví dụ, các hình thức trong Angular,

238
00:17:02,210 --> 00:17:06,340
chúng tôi đã thấy các hình thức phản ứng đã có trong một trong những bài học trước đó.

239
00:17:06,340 --> 00:17:11,040
Tại thời điểm đó, tôi chưa bao giờ đề cập đến từ có thể quan sát một cách rõ ràng ở đó.

240
00:17:11,040 --> 00:17:15,725
Nhưng bây giờ chúng ta biết có thể quan sát được, chúng ta sẽ quay trở lại dạng phản ứng, và

241
00:17:15,725 --> 00:17:18,440
sau đó thực hiện một số biến đổi thành dạng phản ứng.

242
00:17:18,440 --> 00:17:21,460
Các hình thức tự trở thành quan sát được trong Angular.

243
00:17:21,460 --> 00:17:26,337
Và bất kỳ thay đổi nào trong các giá trị của bất kỳ yếu tố hình thức,

244
00:17:26,337 --> 00:17:30,605
có thể được đầu ra, và quan sát bằng cách đăng ký để quan

245
00:17:30,605 --> 00:17:36,280
sát được rằng khung Angular cung cấp cho chúng tôi.

246
00:17:36,280 --> 00:17:41,934
Tương tự như vậy, HTTP, mà chúng ta sẽ gặp phải trong mô-đun tiếp theo của khóa học này,

247
00:17:41,934 --> 00:17:46,500
cũng sẽ dựa trên quan sát được.

248
00:17:46,500 --> 00:17:52,720
Vì vậy, khi dịch vụ của bạn đi và lấy dữ liệu từ một máy chủ, thư viện HTTP,

249
00:17:52,720 --> 00:17:56,750
hoặc mô-đun HTTP trong Angular, hỗ trợ quan sát được.

250
00:17:56,750 --> 00:17:59,780
Vì vậy, bất cứ khi nào bạn thực hiện bất kỳ phương pháp, nhận được, đặt, đăng, hoặc

251
00:17:59,780 --> 00:18:04,160
xóa, sử dụng HTTP, họ sẽ mang lại cho bạn một quan sát

252
00:18:04,160 --> 00:18:07,730
mà sau đó bạn có thể đăng ký trong dịch vụ của bạn.

253
00:18:07,730 --> 00:18:11,495
Và sau đó biến đổi nó, và sau đó đưa nó cho các thành phần của bạn, và

254
00:18:11,495 --> 00:18:13,958
các thành phần có thể đăng ký với các quan sát được.

255
00:18:13,958 --> 00:18:18,410
Dịch vụ được cung cấp bằng cách chuyển đổi các luồng HTTP.

256
00:18:18,410 --> 00:18:21,780
Và đó là nơi mà lập trình phản ứng và

257
00:18:21,780 --> 00:18:27,800
dòng dữ liệu thông qua ứng dụng Angular của bạn trở nên rất đơn giản.

258
00:18:27,800 --> 00:18:32,840
Tương tự, có một AsyncPipe, mà bạn sẽ gặp phải sau này trong khóa học này.

259
00:18:32,840 --> 00:18:38,631
Và cũng có thể thay đổi phát hiện được xây dựng xung quanh quan sát được trong Angular.

260
00:18:38,631 --> 00:18:44,310
Bạn sẽ thấy một số ví dụ về điều này trong phần còn lại của khóa học này.

261
00:18:44,310 --> 00:18:49,110
Bây giờ, quay lại câu hỏi mà chúng ta đã thấy trong slide trước đó.

262
00:18:49,110 --> 00:18:53,615
Làm thế nào để bạn có thể quan sát được và biến đổi nó thành một quan sát khác?

263
00:18:53,615 --> 00:19:01,465
Dưới đây là một ví dụ mà bạn sẽ gặp phải trong bài tập sau bài giảng này.

264
00:19:01,465 --> 00:19:07,415
Vì vậy, ở đây, chúng tôi có tham số tuyến đường

265
00:19:07,415 --> 00:19:12,410
trong thành phần menu của chúng tôi, sử dụng tham số tuyến đường để

266
00:19:12,410 --> 00:19:17,710
cung cấp giá trị của món ăn đã chọn cho thành phần chi tiết món ăn.

267
00:19:17,710 --> 00:19:20,250
Vì vậy, tham số tuyến đường trở thành một quan sát được.

268
00:19:20,250 --> 00:19:24,905
Mô-đun bộ định tuyến của Angular có một hoạt động ActivateDroute dịch vụ

269
00:19:24,905 --> 00:19:30,435
hỗ trợ một loạt các quan sát được và một trong số đó là các tham số quan sát được.

270
00:19:30,435 --> 00:19:33,996
Các tham số quan sát được gắn với các tham số tuyến đường.

271
00:19:33,996 --> 00:19:37,615
Và do đó, bất kỳ thay đổi đối với

272
00:19:37,615 --> 00:19:43,620
các tham số, trong URL mà bạn gặp phải sẽ được phát ra như là một quan sát được.

273
00:19:43,620 --> 00:19:47,521
Bây giờ, vì vậy khi bạn nhận được các quan sát, vì vậy như bạn có thể thấy,

274
00:19:47,521 --> 00:19:53,010
bạn có thể nhận được quyền truy cập vào điều này quan sát bằng cách nói các tham số tuyến đường này trong mã của bạn.

275
00:19:53,010 --> 00:19:55,415
Vì vậy, các params chính nó là một quan sát được ở đây.

276
00:19:55,415 --> 00:19:57,666
Bây giờ, để tham số này quan sát được,

277
00:19:57,666 --> 00:20:02,970
bạn có thể áp dụng một toán tử như một toán tử ở đây gọi là switchmap.

278
00:20:02,970 --> 00:20:05,830
Chúng ta sẽ thấy việc sử dụng điều này trong đoạn trích.

279
00:20:05,830 --> 00:20:09,840
Toán tử switchmap lấy các tham số quan sát được.

280
00:20:09,840 --> 00:20:17,190
Và sau đó biến đổi các tham số quan sát được thành một quan sát khác mà là một món ăn.

281
00:20:17,190 --> 00:20:21,861
Nó lấy giá trị params, và sau đó trích xuất giá trị ID từ params,

282
00:20:21,861 --> 00:20:25,493
cho phép bạn truy cập vào tham số route, id, hoặc

283
00:20:25,493 --> 00:20:30,708
tham số mà bạn đã chỉ định, và sau đó sử dụng nó để đi và lấy các món ăn.

284
00:20:30,708 --> 00:20:38,265
Vì vậy, mỗi khi tham số thay đổi, nó sẽ dẫn đến một lấy của một món ăn mới.

285
00:20:38,265 --> 00:20:42,045
Và vì vậy mỗi khi tham số thay đổi,

286
00:20:42,045 --> 00:20:47,290
đó là tương đương với phát ra một giá trị mới bởi các tham số của họ quan sát được.

287
00:20:47,290 --> 00:20:50,850
Điều đó được chuyển thành lấy món ăn mới

288
00:20:50,850 --> 00:20:53,190
mà đó là ID tương ứng.

289
00:20:53,190 --> 00:20:56,240
Vì vậy, món ăn sau đó sẽ trở thành một quan sát khác.

290
00:20:56,240 --> 00:21:01,100
Bây giờ, khi món ăn này có thể quan sát được, bạn có thể đăng ký

291
00:21:01,100 --> 00:21:05,850
món ăn này quan sát được ở đây, và có được giá trị món ăn.

292
00:21:05,850 --> 00:21:10,490
Và khi bạn có được giá trị món ăn, sau đó bạn có thể lấy giá trị món ăn, và sau đó nó

293
00:21:10,490 --> 00:21:17,742
tạo ra biến món ăn của bạn trong thành phần chi tiết món ăn của bạn với giá trị món ăn đó.

294
00:21:17,742 --> 00:21:22,468
Vì vậy, do đó, bất kỳ thay đổi nào đối với tham số tuyến đường truyền thông qua điều

295
00:21:22,468 --> 00:21:25,224
hành switchmap này thành một

296
00:21:25,224 --> 00:21:28,296
quan sát được, mà khi quan sát thông qua đăng ký,

297
00:21:28,296 --> 00:21:32,569
sẽ cho phép bạn chuyển đổi nó và gán cho món ăn khác.

298
00:21:32,569 --> 00:21:37,236
Và khi điều này xảy ra, quan điểm của bạn có thể được cập nhật với

299
00:21:37,236 --> 00:21:41,915
món ăn mới đã được lấy từ dịch vụ.

300
00:21:41,915 --> 00:21:47,106
Vì vậy, bây giờ, bạn thấy cách dữ liệu chảy qua tham số tuyến đường,

301
00:21:47,106 --> 00:21:50,184
thông qua toán tử bản đồ chuyển mạch, và

302
00:21:50,184 --> 00:21:55,985
dẫn đến sự thay đổi quan điểm của thành phần chi tiết món ăn của bạn.

303
00:21:55,985 --> 00:22:01,000
Đó là lý do tại sao lập trình dựa trên quan sát hoặc lập

304
00:22:01,000 --> 00:22:05,060
trình phản ứng trong Angular trở nên rất hữu ích cho

305
00:22:05,060 --> 00:22:09,070
việc thực hiện các tính năng nhất định trong ứng dụng Angular của bạn.

306
00:22:09,070 --> 00:22:11,034
Đây là một ví dụ như vậy.

307
00:22:11,034 --> 00:22:15,984
Chúng ta sẽ thấy việc sử dụng ví dụ cụ thể này

308
00:22:15,984 --> 00:22:20,332
trong bài tập sau bài giảng này.

309
00:22:20,332 --> 00:22:22,658
Tôi nghĩ tôi sẽ làm cho

310
00:22:22,658 --> 00:22:27,970
bạn dễ dàng nhớ tất cả những điều này bằng cách hát bài Ode to Observables.

311
00:22:34,948 --> 00:22:37,469
Bạn nên hát bài này theo giai điệu của,

312
00:22:37,469 --> 00:22:42,310
You Can Call Me Al bởi Paul Simon của Simon và Garfunkel nổi tiếng.

313
00:22:42,310 --> 00:22:46,000
Nếu anh quay lại và nói, Paul Simon là ai?

314
00:22:46,000 --> 00:22:47,385
Xin lỗi, thế hệ khác.

315
00:22:47,385 --> 00:22:53,670
[ NHẠC]