1
00:00:03,450 --> 00:00:08,610
Trong bài tập này, chúng tôi sẽ làm cho việc sử dụng các máy khách HTTP góc để

2
00:00:08,610 --> 00:00:13,870
giao tiếp với máy chủ JSON mà chúng tôi đã thiết lập trong bài tập trước đó.

3
00:00:13,870 --> 00:00:21,270
Bây giờ chúng tôi sẽ có thể tải dữ liệu từ máy chủ đến ứng dụng góc cạnh của chúng tôi bằng cách sử dụng

4
00:00:21,270 --> 00:00:25,200
HTTP client và sau đó sử dụng dữ liệu để

5
00:00:25,200 --> 00:00:29,755
xây dựng các quan điểm khác nhau trong các thành phần của chúng tôi.

6
00:00:29,755 --> 00:00:34,050
Trong bài tập này, chúng ta sẽ cấu hình lại dịch vụ món ăn để có thể

7
00:00:34,050 --> 00:00:38,960
đi và lấy dữ liệu về các món ăn từ máy chủ JSON.

8
00:00:38,960 --> 00:00:40,545
Là một phần trong nhiệm vụ của bạn,

9
00:00:40,545 --> 00:00:41,920
bạn sẽ hoàn thành hai phần còn lại,

10
00:00:41,920 --> 00:00:44,735
dịch vụ lãnh đạo và dịch vụ khuyến mãi.

11
00:00:44,735 --> 00:00:51,810
Chúng ta sẽ thấy làm thế nào chúng ta có thể tận dụng các khách hàng HTTP mà sẽ trả lại một quan sát được cho chúng tôi.

12
00:00:51,810 --> 00:00:55,580
Chúng tôi đã cấu hình lại ứng dụng của chúng tôi,

13
00:00:55,580 --> 00:01:02,530
đặc biệt là dịch vụ để có thể cung cấp khả năng quan sát đến các thành phần của chúng tôi.

14
00:01:02,530 --> 00:01:07,070
Trong các thành phần của chúng tôi, chúng tôi đang đăng ký những điều quan sát này.

15
00:01:07,070 --> 00:01:10,745
Vì vậy, phần chính của thiết lập

16
00:01:10,745 --> 00:01:15,310
để lấy dữ liệu từ dịch vụ đến thành phần đã có.

17
00:01:15,310 --> 00:01:22,195
Chúng tôi sẽ tăng cường nó một chút để đối phó với các lỗi trong bài tập tiếp theo.

18
00:01:22,195 --> 00:01:27,290
Bước đầu tiên của chúng tôi trong việc chuẩn bị ứng dụng Angular để sử dụng

19
00:01:27,290 --> 00:01:31,040
HTTP client để truy cập vào máy chủ là

20
00:01:31,040 --> 00:01:35,005
cấu hình ứng dụng của chúng tôi với HttpClientModule.

21
00:01:35,005 --> 00:01:38,505
Vì vậy, để làm điều đó, hãy mở app.module.t.

22
00:01:38,505 --> 00:01:42,030
Sau đó, trong đây, chúng ta hãy nhập

23
00:01:42,030 --> 00:01:57,460
HttpClientModule từ Angular/Common/HTTP.

24
00:02:00,410 --> 00:02:02,700
Một khi chúng tôi nhập khẩu

25
00:02:02,700 --> 00:02:06,625
đó, sau đó chúng tôi sẽ đi trước và cấu hình trình trang trí NGModule

26
00:02:06,625 --> 00:02:12,510
trong nhập khẩu với HttpClientModule.

27
00:02:14,890 --> 00:02:23,640
Bây giờ, ứng dụng của chúng tôi đã sẵn sàng để sử dụng HttpClientModule để truy cập vào máy chủ.

28
00:02:23,640 --> 00:02:28,880
Bây giờ, hãy chắc chắn rằng máy chủ JSON đang hoạt động và

29
00:02:28,880 --> 00:02:31,190
phục vụ dữ liệu để ứng dụng của chúng tôi có thể

30
00:02:31,190 --> 00:02:34,520
giao tiếp với các ứng dụng máy chủ JSON.

31
00:02:34,520 --> 00:02:39,055
Bây giờ chúng tôi đang truy cập dữ liệu từ phía máy chủ,

32
00:02:39,055 --> 00:02:46,220
nó là một thực hành tốt để tạo ra một giá trị đặc biệt mà trỏ đến

33
00:02:46,220 --> 00:02:50,840
baseURL của máy chủ của bạn để

34
00:02:50,840 --> 00:02:55,845
nó có thể được cấu hình trong ứng dụng góc cạnh của bạn như và khi cần thiết.

35
00:02:55,845 --> 00:02:58,325
Vì vậy, đi đến thư mục được chia sẻ,

36
00:02:58,325 --> 00:03:05,345
tôi sẽ tạo một tệp mới ở đây có tên là baseurl.t.

37
00:03:05,345 --> 00:03:07,055
Sau đó, trong tập tin này,

38
00:03:07,055 --> 00:03:15,995
tôi sẽ bao gồm một hằng số và xuất nó và hằng số có tên BaseURL,

39
00:03:15,995 --> 00:03:24,355
mà tôi sẽ thiết lập để HTTP: //localhost:3000.

40
00:03:24,355 --> 00:03:31,455
Vì vậy, như bạn nhớ lại, đây là BaseURL mà máy chủ JSON của tôi có thể truy cập.

41
00:03:31,455 --> 00:03:35,665
Vì vậy, localhost:3000/, có.

42
00:03:35,665 --> 00:03:37,565
Vì vậy, với điều này,

43
00:03:37,565 --> 00:03:40,210
hãy để tôi lưu các thay đổi cho BaseURL.

44
00:03:40,210 --> 00:03:47,105
Bây giờ, góc cung cấp một cách cung cấp các giá trị như thế

45
00:03:47,105 --> 00:03:54,990
này cho phần còn lại của ứng dụng của bạn bằng cách cấu hình một nhà cung cấp trong mô-đun ứng dụng của bạn.

46
00:03:54,990 --> 00:03:57,510
Vì vậy, đi đến các mô-đun ứng dụng,

47
00:03:57,510 --> 00:04:04,545
để cho phép chúng tôi cung cấp rằng baseURL cụ thể,

48
00:04:04,545 --> 00:04:10,870
chúng tôi sẽ đầu tiên nhập giá trị BaseURL vào ứng dụng góc của chúng tôi.

49
00:04:10,870 --> 00:04:27,380
Vì vậy, tôi sẽ nói nhập BaseURL từ shared/baseurl.

50
00:04:27,650 --> 00:04:31,790
Giá trị này bây giờ có thể được cung cấp cho

51
00:04:31,790 --> 00:04:35,625
phần còn lại của ứng dụng của tôi bằng cách đi đến các nhà cung cấp.

52
00:04:35,625 --> 00:04:38,270
Sau đó, ngoài LeaderService,

53
00:04:38,270 --> 00:04:42,150
nếu tôi cấu hình một giá trị như thế này,

54
00:04:42,150 --> 00:04:45,965
tôi sẽ nói cung cấp

55
00:04:45,965 --> 00:04:56,070
và sau đó BaseURL, UseValue.

56
00:04:56,540 --> 00:05:03,355
Vì vậy, bằng cách này, tôi sẽ cung cấp giá trị BaseURL này như

57
00:05:03,355 --> 00:05:11,310
là một nhà cung cấp giá trị từ trong mô-đun ứng dụng để phần còn lại của ứng dụng góc cạnh của tôi.

58
00:05:11,310 --> 00:05:12,835
Trong bước tiếp theo,

59
00:05:12,835 --> 00:05:19,400
chúng tôi sẽ cấu hình DishService của chúng tôi để cho phép nó truy cập vào phía máy chủ,

60
00:05:19,400 --> 00:05:21,830
và sau đó lấy dữ liệu từ phía máy chủ,

61
00:05:21,830 --> 00:05:25,475
và sau đó làm cho dữ liệu có sẵn cho các thành phần của chúng tôi.

62
00:05:25,475 --> 00:05:30,170
Bây giờ, chúng ta sẽ đi đến DishService.

63
00:05:30,170 --> 00:05:32,140
Sau đó, trong DishService,

64
00:05:32,140 --> 00:05:37,790
các món ăn này không còn cần thiết từ tập tin địa phương ở đó.

65
00:05:37,790 --> 00:05:40,970
Tôi sẽ tải dữ liệu đó từ phía máy chủ.

66
00:05:40,970 --> 00:05:46,475
Vì vậy, tôi sẽ loại bỏ điều đó và sau đó thêm vào một nhập khẩu

67
00:05:46,475 --> 00:05:55,460
của HttpClient từ góc cạnh,

68
00:05:55,460 --> 00:06:00,150
mỗi HTTP phổ biến,

69
00:06:01,240 --> 00:06:10,130
nhập khẩu BaseURL từ,

70
00:06:10,130 --> 00:06:19,015
nhớ lại rằng đây là trong shared/baseurl.

71
00:06:19,015 --> 00:06:21,715
Bây giờ, trong DishService của

72
00:06:21,715 --> 00:06:24,960
tôi, tôi sẽ đi và lấy dữ liệu từ phía máy chủ.

73
00:06:24,960 --> 00:06:27,510
Vì vậy, trong constructor,

74
00:06:27,510 --> 00:06:31,740
tôi sẽ cập nhật các constructor bằng cách

75
00:06:32,260 --> 00:06:39,615
tiêm HttpClient vào constructor của tôi ở đây.

76
00:06:39,615 --> 00:06:45,275
Vì vậy, bây giờ, DishService của tôi nên được thiết lập để

77
00:06:45,275 --> 00:06:50,990
có được dữ liệu từ phía máy chủ và trả lại dữ liệu cho ứng dụng của tôi.

78
00:06:50,990 --> 00:06:52,340
Bây giờ, bạn nhận thấy rằng

79
00:06:52,340 --> 00:06:56,915
phương pháp GetDishes đã được thiết lập để trở về quan sát được thành phần.

80
00:06:56,915 --> 00:06:58,980
Vì vậy, phần đó đã được thiết lập.

81
00:06:58,980 --> 00:07:06,080
Bây giờ, những gì điều này sẽ trở lại là những gì nó có được từ

82
00:07:06,080 --> 00:07:13,230
phương pháp HTTP get

83
00:07:13,230 --> 00:07:17,760
mà chúng tôi sẽ gọi phía máy chủ.

84
00:07:17,760 --> 00:07:21,015
Vì vậy, để gọi phía máy chủ,

85
00:07:21,015 --> 00:07:23,775
tôi sẽ phải cung cấp,

86
00:07:23,775 --> 00:07:25,395
trong phương pháp get,

87
00:07:25,395 --> 00:07:30,750
baseURL mà tôi

88
00:07:30,750 --> 00:07:36,020
đã thu được, và sau đó là các món ăn.

89
00:07:36,020 --> 00:07:44,000
Vì vậy, theo cách này, phương pháp HTTP get sẽ nhận được dữ liệu từ localhost:3000/món ăn.

90
00:07:44,610 --> 00:07:49,760
Vì vậy, đó là URL phía máy chủ

91
00:07:49,760 --> 00:07:54,995
mà từ đó bạn có thể lấy dữ liệu món ăn ở đây. Đó là nó.

92
00:07:54,995 --> 00:08:01,430
Máy chủ của tôi sẽ cung cấp dữ liệu trong các hình thức của một

93
00:08:01,430 --> 00:08:07,660
quan sát đến dịch vụ này khi phương pháp HTTP get được gọi,

94
00:08:07,660 --> 00:08:14,495
và đó sẽ được trả lại cho các thành phần thông qua các phương pháp GetDishes.

95
00:08:14,495 --> 00:08:19,580
Đó là về nó. Bây giờ, dịch vụ của tôi được thiết lập để đi và

96
00:08:19,580 --> 00:08:24,525
lấy dữ liệu từ phía máy chủ và sau đó trả lại dữ liệu cho thành phần của tôi.

97
00:08:24,525 --> 00:08:29,670
Tôi sẽ cập nhật các phương pháp còn lại cũng theo cách tương tự.

98
00:08:29,670 --> 00:08:36,230
Vì vậy, những gì tôi sẽ làm cho phương pháp tiếp theo cho phương pháp GetDish là,

99
00:08:36,230 --> 00:08:38,760
tôi sẽ sao chép

100
00:08:39,190 --> 00:08:48,015
phần này và sau đó chỉ cần dán nó vào vị trí ở đây,

101
00:08:48,015 --> 00:08:49,890
và sau đó chúng tôi sẽ chỉnh sửa điều đó.

102
00:08:49,890 --> 00:08:54,830
Bây giờ, khi bạn cần phải có được cho một món ăn cụ thể,

103
00:08:54,830 --> 00:08:58,865
bạn có ID của món ăn có sẵn cho bạn.

104
00:08:58,865 --> 00:09:03,870
Vì vậy, chúng tôi sẽ nói ID GetDish có sẵn dưới dạng tham số.

105
00:09:03,870 --> 00:09:05,745
Vì vậy, để các món ăn,

106
00:09:05,745 --> 00:09:10,130
tôi sẽ thêm ID làm tham số khác ở đây.

107
00:09:10,130 --> 00:09:13,250
Bây giờ, khi tôi nhận được phản ứng và sau

108
00:09:13,250 --> 00:09:18,905
đó trả lại cho các thành phần thông qua các cuộc gọi phương pháp GetDish.

109
00:09:18,905 --> 00:09:21,470
Tương tự như vậy, đối với món ăn đặc trưng,

110
00:09:21,470 --> 00:09:26,355
nó sẽ là một cách hơi thú vị để cấu hình nó.

111
00:09:26,355 --> 00:09:28,945
Bây giờ, đối với món ăn đặc trưng,

112
00:09:28,945 --> 00:09:32,705
khi bạn cần truy cập dữ liệu từ phía máy chủ,

113
00:09:32,705 --> 00:09:34,785
những gì tôi sẽ làm là, bây giờ,

114
00:09:34,785 --> 00:09:41,140
khi tôi yêu cầu một món ăn đặc trưng, bây giờ,

115
00:09:41,140 --> 00:09:45,410
cách phía máy chủ của tôi được thiết lập là tôi có thể gửi

116
00:09:45,410 --> 00:09:51,580
một tham số truy vấn trong URL của tôi để tôi có thể nói món ăn?

117
00:09:51,580 --> 00:09:56,615
và sau đó nói nổi bật bằng đúng.

118
00:09:56,615 --> 00:10:00,290
Vì vậy, bằng cách này, máy chủ của tôi sẽ

119
00:10:00,290 --> 00:10:06,840
chỉ trả về những đối tượng mà cờ nổi bật được đặt thành true,

120
00:10:06,840 --> 00:10:09,965
hoặc thuộc tính nổi bật được đặt thành true ở phía máy chủ.

121
00:10:09,965 --> 00:10:13,770
Bây giờ, đây là cách phía máy chủ được thiết lập.

122
00:10:13,770 --> 00:10:15,670
Bây giờ, một lần nữa, một khi bạn có được dữ liệu,

123
00:10:15,670 --> 00:10:20,390
sau đó bạn chỉ cần ánh xạ giá trị và sau đó trả lại rằng như là

124
00:10:20,390 --> 00:10:25,490
một quan sát được thành phần của tôi thông qua phương pháp món ăn được đặc trưng.

125
00:10:25,490 --> 00:10:30,110
Khi tôi truy vấn phía máy chủ bằng cách sử dụng tham số truy vấn,

126
00:10:30,110 --> 00:10:34,155
nó sẽ trả về một mảng các đối tượng phù hợp.

127
00:10:34,155 --> 00:10:39,350
Trong trường hợp này, nó xảy ra rằng mảng sẽ chứa chính xác một mục ở đó.

128
00:10:39,350 --> 00:10:44,230
Nhưng khi tôi trả về giá trị sau khi có được kết quả,

129
00:10:44,230 --> 00:10:51,865
tôi cũng cần phải bao gồm một số không có vì đây là một mảng, vì

130
00:10:51,865 --> 00:10:55,460
vậy tôi cần phải trả về phần tử đầu tiên từ mảng.

131
00:10:55,460 --> 00:11:00,050
Trước khi tôi quên, hãy để tôi nhập

132
00:11:00,050 --> 00:11:10,770
toán tử bản đồ từ các toán tử rxjs.

133
00:11:10,770 --> 00:11:14,200
Bây giờ, đối với người cuối cùng, GetDishids,

134
00:11:14,200 --> 00:11:17,570
những gì tôi sẽ làm là tận dụng thực tế là tôi đã

135
00:11:17,570 --> 00:11:27,340
có phương pháp GetDishes sẵn có cho tôi.

136
00:11:27,340 --> 00:11:31,705
Vì vậy, khi phương thức getDishes trở về,

137
00:11:31,705 --> 00:11:37,610
tôi sẽ ánh xạ với các nhà điều hành bản đồ

138
00:11:41,280 --> 00:12:00,475
như dishes.map, dish.dish id

139
00:12:00,475 --> 00:12:07,105
Vì vậy, bằng cách này, tôi chỉ trả về giá trị mà tôi cần,

140
00:12:07,105 --> 00:12:10,840
chỉ là các món ăn ids thông qua phương pháp này ở đây.

141
00:12:10,840 --> 00:12:12,765
Đó là về nó.

142
00:12:12,765 --> 00:12:19,410
Bây giờ, dịch vụ món ăn của tôi được cập nhật hoàn toàn để đi và lấy dữ liệu từ

143
00:12:19,410 --> 00:12:27,840
trang web máy chủ và sau đó cung cấp dữ liệu cho các thành phần của tôi trong tôi.

144
00:12:27,840 --> 00:12:30,230
Ứng dụng góc ở đây.

145
00:12:30,230 --> 00:12:31,775
Trong bước tiếp theo,

146
00:12:31,775 --> 00:12:34,645
tôi sẽ đi vào thành phần menu.

147
00:12:34,645 --> 00:12:37,085
Sau đó, trong thành phần menu,

148
00:12:37,085 --> 00:12:45,400
tôi sẽ sử dụng giao diện tiêm có sẵn thông qua

149
00:12:45,400 --> 00:12:53,900
lõi góc để tiêm BaseURL này mà tôi đã thu được ở đó.

150
00:12:53,900 --> 00:12:56,340
Vậy, làm thế nào để chúng ta sử dụng nó?

151
00:12:56,340 --> 00:13:00,665
Trong trình xây dựng của thành phần của tôi,

152
00:13:00,665 --> 00:13:03,530
tôi sẽ đi vào và nói,

153
00:13:05,520 --> 00:13:12,910
"@Inject" Vì vậy, nhớ lại rằng chúng tôi đã thiết lập

154
00:13:12,910 --> 00:13:20,675
BaseURL này như một nhà cung cấp cho giá trị này trong mô-đun ứng dụng trước đó.

155
00:13:20,675 --> 00:13:27,425
Vì vậy, BaseURL đó bây giờ có thể được tiêm vào các thành phần như thế này ở đây.

156
00:13:27,425 --> 00:13:29,120
Bây giờ, khi bạn có một dịch vụ,

157
00:13:29,120 --> 00:13:31,170
bạn đang tiêm các dịch vụ như thế này ở đây,

158
00:13:31,170 --> 00:13:32,875
nhưng khi bạn có một giá trị,

159
00:13:32,875 --> 00:13:38,050
sau đó bạn tiêm giá trị bằng cách sử dụng bộ trang trí "@Inject".

160
00:13:38,050 --> 00:13:45,935
Ở đây, chúng tôi đang chỉ định giá trị nhà cung cấp mà chúng tôi đã chỉ định ở đó.

161
00:13:45,935 --> 00:13:48,720
Chúng tôi đã nói, cung cấp:BaseURL có,

162
00:13:48,720 --> 00:13:50,580
vì vậy đó là giá trị mà chúng tôi đang cung cấp ở đây.

163
00:13:50,580 --> 00:13:53,470
Sau đó, tôi tuyên bố điều này là riêng BaseURL.

164
00:13:53,470 --> 00:13:55,660
Vì vậy, bây giờ, trong mã của tôi ở đây,

165
00:13:55,660 --> 00:14:02,910
BaseURL này có sẵn để cấu hình bất cứ điều gì tôi cần trong ứng dụng của tôi ở đây.

166
00:14:02,910 --> 00:14:04,985
Trong khi tôi vẫn còn ở đây,

167
00:14:04,985 --> 00:14:14,450
tôi sẽ loại bỏ món ăn được lựa chọn này cũng không được sử dụng trong ứng dụng của tôi.

168
00:14:15,300 --> 00:14:21,190
Sau đó, phương pháp này cũng tôi không sử dụng với ứng dụng

169
00:14:21,190 --> 00:14:25,085
của tôi, vì vậy hãy để tôi làm một chút dọn dẹp trong khi tôi vẫn còn ở đây.

170
00:14:25,085 --> 00:14:27,925
Cách chúng tôi xử lý dữ liệu mà chúng tôi thu được

171
00:14:27,925 --> 00:14:30,635
từ dịch vụ sẽ vẫn giữ nguyên.

172
00:14:30,635 --> 00:14:34,565
Bởi vì dịch vụ của tôi vẫn còn trở lại và quan sát được,

173
00:14:34,565 --> 00:14:38,055
và tôi đang đăng ký để quan sát được trong thành phần này.

174
00:14:38,055 --> 00:14:40,765
Vì vậy, phần đó không thay đổi chút nào.

175
00:14:40,765 --> 00:14:47,645
Bây giờ, lý do tại sao tôi tiêm baseURL trong thành phần của tôi là,

176
00:14:47,645 --> 00:14:50,935
trong mẫu của tôi ở đây,

177
00:14:50,935 --> 00:14:53,985
tôi đang có được hình ảnh món ăn ở đây.

178
00:14:53,985 --> 00:15:00,625
Bây giờ, nhưng hình ảnh món ăn này cần phải được lấy từ máy chủ của tôi ở đó,

179
00:15:00,625 --> 00:15:03,270
từ máy chủ JSON ở đó.

180
00:15:03,270 --> 00:15:08,800
Vì vậy, tôi cần phải đi vào và sau đó cập nhật nguồn này để nói,

181
00:15:08,800 --> 00:15:13,020
BaseURL cộng với hình ảnh món ăn.

182
00:15:13,020 --> 00:15:18,180
Vì vậy, tôi cần phải cung cấp URL hoàn chỉnh cho hình ảnh đó ở đó.

183
00:15:18,180 --> 00:15:26,995
Vì vậy, đó nên là, httlp://localhost:3000/images/, bất cứ điều gì.

184
00:15:26,995 --> 00:15:29,640
Vì vậy, đó là lý do tại sao tôi cần phải cung cấp

185
00:15:29,640 --> 00:15:34,605
giá trị BaseURL ngoài hình ảnh món ăn ở đây.

186
00:15:34,605 --> 00:15:37,470
Vì vậy, điều này tôi sẽ kèm theo trong dấu ngoặc kép,

187
00:15:37,470 --> 00:15:43,395
vì vậy đó là cách một biểu thức như thế này bên trong nội suy sẽ làm việc một cách chính xác.

188
00:15:43,395 --> 00:15:48,935
Vì vậy, kèm theo điều này trong dấu ngoặc kép và sau đó cung cấp rằng như là giá trị nguồn,

189
00:15:48,935 --> 00:15:54,730
và sau đó ở đây bạn thấy rằng bạn đang sử dụng BaseURL cộng với hình ảnh món ăn,

190
00:15:54,730 --> 00:16:00,725
dish.image, thuộc tính hình ảnh chỉ chứa URL một phần.

191
00:16:00,725 --> 00:16:05,645
Vì vậy, nó chứa hình ảnh gạch chéo và tên tập tin image.png.

192
00:16:05,645 --> 00:16:14,640
Vì vậy, đó là lý do tại sao tôi cần phải gắn thêm http://localhost:3000/,

193
00:16:14,640 --> 00:16:23,220
vào tài sản hình ảnh món ăn để tôi xây dựng tổng URL cho hình ảnh của tôi.

194
00:16:23,220 --> 00:16:27,385
Vì vậy, với điều này, thành phần menu của tôi bây giờ được thiết lập hoàn toàn

195
00:16:27,385 --> 00:16:32,000
để có được tất cả các dữ liệu từ phía máy chủ.

196
00:16:32,000 --> 00:16:37,100
Bây giờ, tương tự, tôi sẽ đề nghị bạn cập nhật

197
00:16:37,100 --> 00:16:43,440
thành phần chi tiết món ăn và cũng là thành phần nhà.

198
00:16:43,440 --> 00:16:45,790
Đi đến thành phần chi tiết món ăn,

199
00:16:45,790 --> 00:16:48,050
sử dụng tiêm ở đó,

200
00:16:48,050 --> 00:16:52,885
và sau đó đi đến nhà xây dựng,

201
00:16:52,885 --> 00:16:57,685
trong nhà xây dựng, bây giờ tôi cần phải sử dụng

202
00:16:57,685 --> 00:17:13,690
tiêm baseUrl và baseUrl ở đó,

203
00:17:13,690 --> 00:17:24,185
và như vậy, thành phần chi tiết món ăn của tôi bây giờ được thiết lập để có được dữ liệu từ dịch vụ món ăn.

204
00:17:24,185 --> 00:17:26,620
Vì vậy, phần này sẽ không còn thay đổi,

205
00:17:26,620 --> 00:17:29,780
nó vẫn chính xác như nhau bởi vì dịch vụ món ăn của tôi chỉ đơn giản là

206
00:17:29,780 --> 00:17:34,395
trả lại một quan sát được và tôi đang đăng ký để quan sát được ở đây.

207
00:17:34,395 --> 00:17:40,065
Tôi cũng cần phải cập nhật các thành phần món ăn chi tiết tập tin mẫu,

208
00:17:40,065 --> 00:17:43,310
vì vậy tương tự như đi đến nguồn hình ảnh ở đây,

209
00:17:43,310 --> 00:17:52,645
tôi sẽ thêm baseURL cộng với hình ảnh món ăn và sau đó đặt đó trong trích dẫn đó.

210
00:17:52,645 --> 00:17:57,565
Tương tự như vậy, đi đến thành phần nhà, cùng một điều.

211
00:17:57,565 --> 00:18:02,830
Tôi sẽ làm một tiêm,

212
00:18:02,830 --> 00:18:09,320
và trong constructor

213
00:18:10,860 --> 00:18:18,080
tôi làm một tiêm baseUrl,

214
00:18:22,380 --> 00:18:27,640
và đi đến các thành phần nhà tập tin mẫu,

215
00:18:27,640 --> 00:18:33,480
tương tự như nơi tôi sử dụng hình ảnh món ăn ở đây,

216
00:18:33,480 --> 00:18:39,700
vì vậy tôi sẽ nói, BaseURL cộng với hình ảnh món ăn,

217
00:18:39,700 --> 00:18:44,815
và sau đó kèm theo nó trong dấu ngoặc kép ở đây,

218
00:18:44,815 --> 00:18:48,530
và sau đó lưu các thay đổi.

219
00:18:52,230 --> 00:18:58,805
Vậy, đúng vậy. Ứng dụng của tôi bây giờ được cập nhật để sử dụng

220
00:18:58,805 --> 00:19:04,540
máy chủ để có được dữ liệu cho các món ăn.

221
00:19:04,540 --> 00:19:09,775
Vì vậy, chúng ta hãy đi và xem ứng dụng trong trình duyệt.

222
00:19:09,775 --> 00:19:11,630
Đi đến trình duyệt,

223
00:19:11,630 --> 00:19:14,150
bây giờ bạn có thể thấy rằng trong trình duyệt của

224
00:19:14,150 --> 00:19:18,480
tôi, món ăn của tôi đang được hiển thị chính xác như trước,

225
00:19:18,480 --> 00:19:20,920
và sau đó đi đến thành phần menu,

226
00:19:20,920 --> 00:19:26,380
bạn thấy rằng menu hiển thị chính xác như trước và thành phần chi tiết món ăn,

227
00:19:26,380 --> 00:19:31,935
cũng là các chi tiết món ăn được hiển thị chính xác như trước.

228
00:19:31,935 --> 00:19:38,015
Vì vậy, với sự thay đổi mà chúng tôi đã giới thiệu bằng cách truy cập dữ liệu từ phía máy chủ,

229
00:19:38,015 --> 00:19:41,075
chúng tôi có thể lấy dữ liệu từ phía máy chủ và sau đó

230
00:19:41,075 --> 00:19:45,335
hiển thị dữ liệu trong ứng dụng Angular của chúng tôi.

231
00:19:45,335 --> 00:19:51,365
Để thuyết phục bạn rằng dữ liệu thực sự được lấy từ máy chủ JSON của tôi,

232
00:19:51,365 --> 00:19:58,590
chúng ta hãy đi đến thiết bị đầu cuối và sau đó xem nhật ký trên cửa sổ thiết bị đầu cuối ở đó.

233
00:19:58,590 --> 00:20:03,620
Đi đến thiết bị đầu cuối nơi máy chủ JSON của tôi đang chạy,

234
00:20:03,620 --> 00:20:08,625
bạn có thể thấy rằng tôi đã thực sự thực hiện một loạt các yêu cầu Git

235
00:20:08,625 --> 00:20:14,030
từ trang web máy chủ của tôi để có được tất cả các dữ liệu mà tôi cần trong ứng dụng của tôi.

236
00:20:14,030 --> 00:20:20,755
Vì vậy, thực sự ứng dụng Angular của tôi bây giờ là lấy tất cả các dữ liệu từ

237
00:20:20,755 --> 00:20:27,850
trang web máy chủ cho tất cả các món ăn trong ứng dụng Angular của tôi.

238
00:20:27,850 --> 00:20:31,405
Bây giờ, bạn có thể sử dụng cách tiếp cận tương tự để cập nhật

239
00:20:31,405 --> 00:20:35,035
dịch vụ mới nhất và dịch vụ khuyến mãi,

240
00:20:35,035 --> 00:20:40,200
nhưng chúng tôi sẽ trì hoãn điều đó cho đến khi bài tập cuối cùng trong khóa học này,

241
00:20:40,200 --> 00:20:43,380
nhưng điều này có thể hoàn thành bài tập này.

242
00:20:43,380 --> 00:20:46,920
Trong bài tập này, chúng tôi đã học được cách

243
00:20:46,920 --> 00:20:50,420
sử dụng HTTP client để có được dữ liệu từ

244
00:20:50,420 --> 00:20:54,595
trang web máy chủ và sau đó sử dụng dữ liệu trong việc xây dựng các

245
00:20:54,595 --> 00:20:59,525
quan điểm trong các thành phần của ứng dụng Angular của chúng tôi.

246
00:20:59,525 --> 00:21:06,000
Đâ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 HTTP phần một.