1
00:00:03,680 --> 00:00:11,610
Bây giờ bạn đã có giới thiệu đầu tiên của bạn về Lập trình phản ứng, RxJS,

2
00:00:11,610 --> 00:00:14,880
và việc sử dụng mô hình quan sát và

3
00:00:14,880 --> 00:00:21,165
cách Angular tận dụng mô hình quan sát và hỗ trợ Lập trình phản ứng, chúng

4
00:00:21,165 --> 00:00:24,600
ta hãy chuyển sang bài tập đầu tiên của chúng tôi để làm

5
00:00:24,600 --> 00:00:29,315
ướt chân bằng cách sử dụng các vật thể quan sát trong Angular.

6
00:00:29,315 --> 00:00:35,950
Trong bài tập này, chúng ta sẽ cập nhật các dịch vụ của chúng tôi để sử dụng các khả năng quan sát,

7
00:00:35,950 --> 00:00:43,999
bởi vì khi chúng ta chuyển sang mô-đun tiếp theo, nơi chúng ta sẽ xem xét hỗ trợ HTTP trong Angular,

8
00:00:43,999 --> 00:00:49,915
chúng ta sẽ ngay lập tức hiểu rằng hỗ trợ HTTP trong Angular dựa trên quan sát được.

9
00:00:49,915 --> 00:00:54,485
Vì vậy, nó là một ý tưởng tốt cho chúng ta để

10
00:00:54,485 --> 00:00:59,870
làm quen với việc sử dụng các vật thể quan sát trong bài học này chính nó.

11
00:00:59,870 --> 00:01:04,770
Vì vậy, chúng tôi sẽ cập nhật các dịch vụ để xuất khẩu quan sát được.

12
00:01:04,770 --> 00:01:08,479
Sau đó, trong các thành phần của chúng

13
00:01:08,479 --> 00:01:11,270
tôi, chúng tôi sẽ đăng ký các quan sát này và

14
00:01:11,270 --> 00:01:15,190
có được dữ liệu cần thiết để hiển thị các quan điểm.

15
00:01:15,190 --> 00:01:19,340
Chúng ta hãy tiếp tục tập thể dục tiếp theo.

16
00:01:19,340 --> 00:01:21,680
Bạn phải tự hỏi,

17
00:01:21,680 --> 00:01:25,390
làm thế nào để chúng tôi sử dụng RXJS trong Angular,

18
00:01:25,390 --> 00:01:28,510
và nó đã có sẵn cho chúng tôi?

19
00:01:28,510 --> 00:01:31,730
Vì vậy, những gì bạn sẽ nhận thấy là với CLI Angular,

20
00:01:31,730 --> 00:01:34,480
khi bạn giàn giáo ra ứng dụng Angular của bạn,

21
00:01:34,480 --> 00:01:37,040
RXJS được tự động bao gồm trong đó.

22
00:01:37,040 --> 00:01:39,560
Vì vậy, nếu bạn đi đến tập tin package.json,

23
00:01:39,560 --> 00:01:42,795
bạn sẽ nhận thấy rằng trong các phụ thuộc,

24
00:01:42,795 --> 00:01:48,900
thư viện RxJS đã được bao gồm trong ứng dụng của bạn.

25
00:01:48,900 --> 00:01:53,155
Vì vậy, bất cứ điều gì bạn cần sử dụng từ RxJS đã có sẵn cho bạn.

26
00:01:53,155 --> 00:02:00,215
Vì vậy, chúng tôi có thể đi trước và sử dụng thư viện RxJS ngay trong ứng dụng Angular của chúng tôi.

27
00:02:00,215 --> 00:02:03,735
Nếu bạn đang xây dựng ứng dụng Angular của bạn từ đầu,

28
00:02:03,735 --> 00:02:08,450
sau đó bạn cần phải thực hiện một cài đặt npm của RxJS.

29
00:02:08,450 --> 00:02:11,135
Đi đến tập tin dish.service.js,

30
00:02:11,135 --> 00:02:21,080
trước tiên tôi nhập khẩu của

31
00:02:21,080 --> 00:02:27,750
từ 'rxjs' observables của chúng tôi.

32
00:02:28,960 --> 00:02:32,045
Chúng tôi cũng sẽ nhập- Bây giờ,

33
00:02:32,045 --> 00:02:35,235
khi bạn sử dụng RxJS trong ứng dụng Angular của bạn,

34
00:02:35,235 --> 00:02:37,330
toàn bộ thư viện không được bao gồm.

35
00:02:37,330 --> 00:02:41,445
Bạn chỉ có thể nhập bất kỳ phần nào mà bạn cần từ thư viện RxJS,

36
00:02:41,445 --> 00:02:43,400
và sau đó sử dụng nó trong ứng dụng Angular của bạn.

37
00:02:43,400 --> 00:02:48,680
Vì vậy, khi ứng dụng Angular của bạn cuối cùng được chuẩn bị để triển khai,

38
00:02:48,680 --> 00:02:52,070
chỉ những phần từ RXJS được yêu cầu sẽ

39
00:02:52,070 --> 00:02:56,030
được bao gồm trong ứng dụng Angular của bạn.

40
00:02:56,030 --> 00:02:58,055
Toán tử trễ.

41
00:02:58,055 --> 00:03:07,815
Các nhà điều hành chậm trễ cho phép chúng tôi để trì hoãn việc phát ra các mục từ của chúng tôi quan sát được.

42
00:03:07,815 --> 00:03:09,780
Đi vào các phương pháp,

43
00:03:09,780 --> 00:03:15,295
bây giờ chúng tôi sẽ cập nhật các phương pháp này để sử dụng các khả năng quan sát,

44
00:03:15,295 --> 00:03:18,230
và chúng tôi sẽ trả lại một lời hứa bằng cách chuyển đổi

45
00:03:18,230 --> 00:03:21,755
quan sát thành lời hứa của bạn bằng cách sử dụng toán tử ToPromise.

46
00:03:21,755 --> 00:03:27,700
Vì vậy, nếu bạn đã có các thành phần đang sử dụng promise,

47
00:03:27,700 --> 00:03:30,520
và bạn muốn không sửa đổi các thành phần,

48
00:03:30,520 --> 00:03:33,470
bạn chỉ có thể chuyển đổi một quan sát được để hứa hẹn của bạn và sau đó

49
00:03:33,470 --> 00:03:37,890
gửi lời hứa đến các thành phần của bạn.

50
00:03:37,890 --> 00:03:42,265
Như chúng tôi nhận ra, hứa hẹn sẽ chỉ phát ra một mục,

51
00:03:42,265 --> 00:03:48,000
trong khi bạn có thể thấy rằng quan sát được dựa trên luồng.

52
00:03:48,000 --> 00:03:51,350
Vì vậy, đó là giới hạn mà bạn sẽ nhận được nếu bạn

53
00:03:51,350 --> 00:03:54,560
chỉ cần sử dụng toán tử hai lời hứa trên các vật thể quan sát

54
00:03:54,560 --> 00:03:58,520
và sử dụng nó bởi vì các toán tử ToPromise

55
00:03:58,520 --> 00:04:03,525
sẽ cho phép quan sát của bạn chỉ phát ra một giá trị.

56
00:04:03,525 --> 00:04:09,350
Nhưng cho thời điểm này, chúng ta hãy làm điều đó như là bước đầu tiên trước khi chúng ta

57
00:04:09,350 --> 00:04:14,665
chuyển sang việc thực hiện đầy đủ các dịch vụ của chúng tôi.

58
00:04:14,665 --> 00:04:17,820
Vì vậy, đi đến phương pháp getDishes,

59
00:04:17,820 --> 00:04:22,370
tôi sẽ trả lại những món ăn này.

60
00:04:22,370 --> 00:04:27,950
Vì vậy, tôi sẽ loại bỏ phần đó và sau đó nói, trở lại của.

61
00:04:27,950 --> 00:04:31,625
Nếu bạn muốn phát ra chỉ có một giá trị từ quan sát của

62
00:04:31,625 --> 00:04:33,260
bạn, bạn sẽ sử dụng phương pháp của,

63
00:04:33,260 --> 00:04:38,010
và đó sẽ mất bất cứ giá trị nào mà bạn muốn phát ra trong đó.

64
00:04:38,010 --> 00:04:43,300
Điều đó đủ cho ứng dụng hiện tại của chúng tôi vào lúc này.

65
00:04:43,300 --> 00:04:46,160
Vì vậy, chúng tôi sẽ sử dụng điều đó,

66
00:04:46,160 --> 00:04:52,040
và chúng tôi cũng muốn trì hoãn việc phát ra giá trị bằng hai giây.

67
00:04:52,040 --> 00:04:55,565
Vì vậy, tôi sẽ thay đổi phần này của mã để sử dụng

68
00:04:55,565 --> 00:05:01,895
các nhà điều hành chậm trễ cho quan sát của tôi, sử dụng đường ống.

69
00:05:01,895 --> 00:05:09,360
Tôi cần chuyển đổi thành Promise này và phát ra lời hứa.

70
00:05:09,360 --> 00:05:14,775
Vì vậy, bây giờ, phương pháp getDishes của tôi được cập nhật để sử dụng một quan sát được,

71
00:05:14,775 --> 00:05:19,665
và sau đó chuyển đổi đó thành một lời hứa và sau đó gửi lời hứa cho thành phần của tôi.

72
00:05:19,665 --> 00:05:22,710
Vì vậy, tôi không cần phải làm bất kỳ cập nhật của các thành phần.

73
00:05:22,710 --> 00:05:31,200
Hãy sử dụng cùng một cách tiếp cận để cập nhật hai phương pháp còn lại của dịch vụ của tôi ở đây.

74
00:05:31,200 --> 00:05:34,455
Vì vậy, tôi sẽ chỉ sao chép phần này,

75
00:05:34,455 --> 00:05:42,225
và sau đó cập nhật phần đó,

76
00:05:42,225 --> 00:05:46,140
sau đó lấy phần chậm trễ của nó,

77
00:05:46,140 --> 00:05:54,080
và sau đó cập nhật phần này để sử dụng sự chậm trễ

78
00:05:54,080 --> 00:06:06,300
và chuyển đổi phương pháp toPromise này.

79
00:06:06,300 --> 00:06:10,980
Vì vậy, với điều đó, phương pháp GetDish của tôi cũng được cập nhật.

80
00:06:10,980 --> 00:06:17,370
Hãy để tôi làm điều tương tự với phương pháp GetFeaturedDish.

81
00:06:17,370 --> 00:06:21,000
Một lần nữa, nếu bạn muốn,

82
00:06:21,000 --> 00:06:23,040
bạn có thể gõ ra toàn bộ điều.

83
00:06:23,040 --> 00:06:32,270
Tôi chỉ là lười biếng để chỉ cắt và dán và thay đổi các phần mà

84
00:06:32,270 --> 00:06:42,395
tôi muốn thay đổi và chuyển đổi phương pháp toPromise này.

85
00:06:42,395 --> 00:06:52,800
Đó là nó. Dịch vụ của tôi bây giờ được cập nhật để trả lại lời hứa từ một quan sát được ở đây.

86
00:06:52,800 --> 00:06:54,405
Vì vậy, với bản cập nhật này,

87
00:06:54,405 --> 00:06:58,620
dịch vụ món ăn của tôi được cập nhật để sử dụng các vật thể quan sát

88
00:06:58,620 --> 00:07:04,215
chứ không phải trực tiếp sử dụng các giá trị.

89
00:07:04,215 --> 00:07:10,460
Tương tự như vậy, tiếp tục và cập nhật các dịch vụ dẫn đầu và các dịch vụ khuyến mãi.

90
00:07:10,460 --> 00:07:13,415
Bây giờ bạn sẽ nhận thấy rằng tôi đã cập nhật

91
00:07:13,415 --> 00:07:17,985
các dịch vụ lãnh đạo để sử dụng các quan sát được.

92
00:07:17,985 --> 00:07:24,380
Tương tự như vậy, tôi cũng đã cập nhật các dịch vụ khuyến mãi để sử dụng các vật thể quan sát.

93
00:07:24,380 --> 00:07:28,200
Lưu các thay đổi và chúng ta hãy đi và xem ứng dụng của chúng tôi.

94
00:07:28,200 --> 00:07:29,890
Khi bạn đi đến trình duyệt,

95
00:07:29,890 --> 00:07:34,745
bạn sẽ nhận thấy rằng ứng dụng của bạn thực hiện chính xác theo cách tương tự như trước

96
00:07:34,745 --> 00:07:41,010
và lấy dữ liệu từ các dịch vụ giống như trước đây.

97
00:07:41,010 --> 00:07:45,160
Vì vậy, không có nhiều sự thay đổi trong ứng dụng của bạn như vậy.

98
00:07:45,160 --> 00:07:46,850
Nó thực hiện chính xác như nhau.

99
00:07:46,850 --> 00:07:51,035
Vì vậy, lưu ý rằng bằng cách thay thế lời hứa của bạn bằng các vật thể quan sát,

100
00:07:51,035 --> 00:07:55,370
không có nhiều thay đổi trong ứng dụng của bạn như bạn mong đợi nó.

101
00:07:55,370 --> 00:07:58,460
Bây giờ, chúng ta hãy đi thêm một bước nữa.

102
00:07:58,460 --> 00:08:04,540
Bây giờ chúng tôi sẽ cho phép các dịch vụ của chúng tôi trở lại quan sát được,

103
00:08:04,540 --> 00:08:08,240
và chúng tôi sẽ cập nhật các thành phần để sử dụng các quan sát được.

104
00:08:08,240 --> 00:08:09,835
Lý do như tôi đã đề cập,

105
00:08:09,835 --> 00:08:13,790
là bởi vì khi chúng tôi cập nhật

106
00:08:13,790 --> 00:08:18,420
các dịch vụ của chúng tôi để sử dụng dịch vụ HTTP để đi đến một máy chủ để lấy dữ liệu,

107
00:08:18,420 --> 00:08:25,345
sau đó chúng tôi sẽ lưu ý rằng trong Angular các phương thức HTTP sẽ trả về quan sát được.

108
00:08:25,345 --> 00:08:30,260
Các dịch vụ có thể chỉ đơn giản là chuyển các quan sát đến các thành phần của chúng tôi và

109
00:08:30,260 --> 00:08:33,080
cho phép các thành phần đăng ký các quan sát này và sử

110
00:08:33,080 --> 00:08:36,215
dụng các dữ liệu mà họ có được từ đó.

111
00:08:36,215 --> 00:08:41,020
Vì vậy, đây sẽ là một bước trung gian để chúng ta bước vào giai đoạn đó.

112
00:08:41,020 --> 00:08:45,275
Chúng ta sẽ nhận được để xem xét HTTP trong mô-đun tiếp theo.

113
00:08:45,275 --> 00:08:48,234
Quay trở lại các dịch vụ của chúng tôi,

114
00:08:48,234 --> 00:08:52,460
bây giờ bạn có thể loại bỏ các ToPromise đầu tiên bằng cách loại bỏ

115
00:08:52,460 --> 00:08:55,400
các toán tử ToPromise bởi vì chúng tôi không cần nó

116
00:08:55,400 --> 00:08:59,660
nữa và sau đó chúng tôi sẽ đơn giản loại bỏ các ToPromise từ này,

117
00:08:59,660 --> 00:09:04,110
import observable và sau đó thay vào đó cho phép

118
00:09:04,110 --> 00:09:09,044
phương thức

119
00:09:09,044 --> 00:09:16,140
của chúng tôi trở về observables thay vì promise .

120
00:09:16,140 --> 00:09:17,615
Vì vậy, như tôi đã đề cập,

121
00:09:17,615 --> 00:09:21,420
bất cứ điều gì một lời hứa có thể làm một điều quan sát cũng có thể làm.

122
00:09:22,810 --> 00:09:28,400
Vì vậy, chúng ta hãy cập nhật tất cả những điều này để trả về quan sát được.

123
00:09:28,400 --> 00:09:32,695
Làm tương tự với hai dịch vụ còn lại.

124
00:09:32,695 --> 00:09:36,680
Bây giờ bạn sẽ nhận thấy rằng tôi cũng đã cập nhật các dịch vụ lãnh đạo

125
00:09:36,680 --> 00:09:40,725
để chỉ đơn giản là trả lại quan sát thay vì lời hứa,

126
00:09:40,725 --> 00:09:43,984
và cũng dịch vụ khuyến mãi đã được

127
00:09:43,984 --> 00:09:47,735
cập nhật tương ứng để trở lại quan sát thay vì lời hứa.

128
00:09:47,735 --> 00:09:52,460
Bây giờ điều này có nghĩa là chúng ta cần phải đi và cập nhật các thành phần của chúng ta

129
00:09:52,460 --> 00:09:57,590
để sử dụng các vật thể quan sát hơn là những lời hứa như chúng ta đã làm trước đó.

130
00:09:57,590 --> 00:10:01,885
Bây giờ cho lời hứa, chúng ta thấy rằng chúng ta cần phải sử dụng .then

131
00:10:01,885 --> 00:10:07,430
để có được giữ của kết quả khi quyết tâm của lời hứa được thực hiện.

132
00:10:07,430 --> 00:10:12,495
Với một quan sát được, .then được chuyển đổi thành .subscribe.

133
00:10:12,495 --> 00:10:16,715
Cách bạn tiêu thụ dữ liệu sẽ vẫn giữ nguyên.

134
00:10:16,715 --> 00:10:19,890
Vì vậy, với sự thay đổi nhỏ trong các thành phần của bạn,

135
00:10:19,890 --> 00:10:25,480
các thành phần bây giờ sẽ có thể xử lý các khả năng quan sát hơn là hứa hẹn.

136
00:10:25,480 --> 00:10:31,085
Vì vậy, đi đến tất cả bốn thành phần sử dụng các dịch vụ,

137
00:10:31,085 --> 00:10:37,185
trước tiên, chúng ta hãy đi đến tệp menu.component.t.

138
00:10:37,185 --> 00:10:39,280
Trong tập tin menu.component.t,

139
00:10:39,280 --> 00:10:42,080
bạn sẽ ngay lập tức nhận thấy dòng squiggly màu đỏ ở đó,

140
00:10:42,080 --> 00:10:48,100
dưới sau đó rõ ràng bởi vì chúng tôi không trả lại lời hứa.

141
00:10:48,100 --> 00:10:50,090
Thay vào đó, chúng tôi đang trả lại một quan sát được.

142
00:10:50,090 --> 00:10:55,245
Vì vậy, chỉ cần chuyển đổi điều đó sau đó để đăng ký và đó là nó.

143
00:10:55,245 --> 00:10:59,225
Thành phần trình đơn của bạn bây giờ có

144
00:10:59,225 --> 00:11:04,910
thể tiêu thụ các giá trị quan sát được phát ra bởi quan sát được.

145
00:11:04,910 --> 00:11:10,890
Thực hiện thay đổi tương tự đối với tệp.component.t, tệp.

146
00:11:10,890 --> 00:11:16,760
dishdetail.component.t và tệp.component.t home.t.

147
00:11:16,760 --> 00:11:22,520
Sau khi cập nhật các tập tin Tapscott thành phần còn lại, chúng

148
00:11:22,520 --> 00:11:27,245
ta hãy đi và xem xét hành vi của ứng dụng của chúng tôi trong trình duyệt.

149
00:11:27,245 --> 00:11:32,920
Đi vào trình duyệt, bạn sẽ nhận thấy không có sự khác biệt trong hành vi của ứng dụng của chúng tôi.

150
00:11:32,920 --> 00:11:36,170
Phiên bản này của ứng dụng Angular của chúng tôi được cập nhật để sử dụng

151
00:11:36,170 --> 00:11:40,275
observables thay vì lời hứa.

152
00:11:40,275 --> 00:11:42,620
Vì vậy, các thành phần nhà ở đây,

153
00:11:42,620 --> 00:11:46,085
về thành phần thực hiện chính xác theo cách tương tự như trước,

154
00:11:46,085 --> 00:11:49,800
và các thành phần trình đơn thực hiện chính xác cùng một điều.

155
00:11:49,800 --> 00:11:54,785
Ngoài ra các thành phần chi tiết món ăn sẽ hoạt động chính xác theo cách như trước.

156
00:11:54,785 --> 00:11:57,960
Với điều này, chúng tôi hoàn thành bài tập này.

157
00:11:57,960 --> 00:12:01,430
Trong bài tập này, chúng tôi đã thực hiện các bước đầu tiên của chúng tôi để sử dụng

158
00:12:05,030 --> 00:12:08,330
các vật thể quan sát trong ứng dụng Angular của chúng tôi bằng cách cập nhật các dịch vụ và tương ứng các thành phần

159
00:12:08,330 --> 00:12:12,185
để sử dụng các vật thể quan sát thay cho lời hứa.

160
00:12:12,185 --> 00:12:18,640
Đây là thời điểm tốt để bạn thực hiện một cam kết git với thông điệp RxJS phần một.