1
00:00:00,031 --> 00:00:04,477
[MUSIC]

2
00:00:04,477 --> 00:00:09,184
Bây giờ chúng tôi đã có một giới thiệu nhanh chóng về các

3
00:00:09,184 --> 00:00:15,564
khung MVM và MVVM, các dịch vụ góc, và cũng tiêm phụ thuộc,

4
00:00:15,564 --> 00:00:21,003
bây giờ chúng ta hãy chuyển sang bài tập tiếp theo của chúng tôi, nơi chúng tôi sẽ tạo ra

5
00:00:21,003 --> 00:00:26,442
dịch vụ góc đầu tiên của chúng tôi và sau đó tiêm nó vào thành phần

6
00:00:26,442 --> 00:00:29,710
của chúng tôi và sử dụng nó trong thành phần.

7
00:00:29,710 --> 00:00:34,370
Để bắt đầu, hãy truy cập ứng dụng của bạn

8
00:00:34,370 --> 00:00:38,629
trong bảng chỉnh sửa trong thư mục Ứng dụng,

9
00:00:38,629 --> 00:00:44,237
tạo một thư mục con mới và đặt tên nó là Dịch vụ.

10
00:00:44,237 --> 00:00:52,918
Bây giờ chúng ta sẽ sử dụng Angular CLI để thêm một dịch vụ mới vào ứng dụng Angular của chúng tôi.

11
00:00:52,918 --> 00:00:57,953
Để làm điều đó, tại loại nhắc ng

12
00:00:57,953 --> 00:01:04,673
tạo ra dịch vụ, và dịch vụ/món ăn.

13
00:01:04,673 --> 00:01:11,480
Vì vậy, điều này sẽ tạo ra một dịch vụ mới trong thư mục Dịch vụ có tên là dịch vụ món ăn.

14
00:01:11,480 --> 00:01:16,815
Vì vậy, một khi điều này được tạo ra, bạn thấy rằng hai tập tin được tạo

15
00:01:16,815 --> 00:01:23,837
ra bởi CLI góc gọi là DishService.Ts và dish.service.specter.t.

16
00:01:23,837 --> 00:01:30,010
Điều này được sử dụng để kiểm tra dịch vụ Angular của chúng tôi trong khi chúng tôi sẽ nói về sau.

17
00:01:30,010 --> 00:01:35,361
Thứ hai là nơi chúng tôi sẽ tạo ra dịch vụ món ăn của chúng tôi và

18
00:01:35,361 --> 00:01:42,516
sau đó tiêm nó vào mô-đun ứng dụng của chúng tôi và sử dụng nó trong thành phần menu của chúng tôi.

19
00:01:42,516 --> 00:01:47,550
Đi đến trình soạn thảo, chúng ta hãy mở tập tin dish.service.ets.

20
00:01:47,550 --> 00:01:52,618
Bây giờ, khi bạn mở tập tin này, bạn ngay lập tức nhận thấy ở đây

21
00:01:52,618 --> 00:01:58,108
tuyên bố đầu tiên có nói, import {Injectable} từ '@angular /core'.

22
00:01:58,108 --> 00:02:02,791
Vì vậy, tiêm này cho phép chúng tôi định nghĩa

23
00:02:02,791 --> 00:02:06,674
trang trí tiêm này cho bất kỳ lớp mà chúng tôi định nghĩa ở đây.

24
00:02:06,674 --> 00:02:10,730
Vì vậy, bạn có thể thấy rằng chúng tôi đang xác định một lớp ở đây được gọi là một DishService.

25
00:02:10,730 --> 00:02:15,532
Bằng cách sử dụng trang trí tiêm này cho dịch vụ món ăn này,

26
00:02:15,532 --> 00:02:21,030
chúng tôi đang làm cho đối tượng này bây giờ tiêm trong ứng dụng của chúng tôi.

27
00:02:21,030 --> 00:02:25,481
Vì vậy, đây là những gì cho phép tiêm phụ thuộc được sử dụng trong

28
00:02:25,481 --> 00:02:26,490
ứng dụng của chúng tôi.

29
00:02:26,490 --> 00:02:30,345
Vì vậy, một khi bạn khai báo các lớp như tiêm,

30
00:02:30,345 --> 00:02:36,746
bây giờ chúng ta hãy cấu hình DishService của chúng tôi để cung cấp một số thông tin cho chúng tôi.

31
00:02:36,746 --> 00:02:39,119
Vì vậy, trong đây, tôi sẽ nhập khẩu,

32
00:02:42,757 --> 00:02:51,413
The Dish class từ thư mục chia sẻ,

33
00:02:51,413 --> 00:02:55,354
và cũng có thể nhập khẩu,

34
00:02:58,307 --> 00:03:01,887
Các DESS hằng số từ,

35
00:03:08,402 --> 00:03:11,574
Chia sẻ thư mục ở đây.

36
00:03:11,574 --> 00:03:14,353
Vì vậy, một khi tôi đã nhập khẩu hai này,

37
00:03:14,353 --> 00:03:19,432
bây giờ dịch vụ của tôi có thể được cấu hình để cung cấp giá trị cho chúng tôi.

38
00:03:19,432 --> 00:03:24,246
Vì vậy, bên trong dịch vụ, tôi sẽ

39
00:03:24,246 --> 00:03:29,370
thêm vào một phương pháp mới gọi getDishes, và

40
00:03:29,370 --> 00:03:35,753
phương pháp này sẽ trở lại trong mảng các món ăn ở đây.

41
00:03:35,753 --> 00:03:41,098
Và, vì vậy phương pháp này sẽ trả về hằng số DESS

42
00:03:41,098 --> 00:03:45,722
mà chúng tôi đã nhập khẩu vào DishService của chúng tôi.

43
00:03:45,722 --> 00:03:50,239
Với điều này, DishService của chúng tôi bây giờ được cấu hình để

44
00:03:50,239 --> 00:03:54,866
cung cấp mảng đối tượng DESS JavaScript cho bất kỳ

45
00:03:54,866 --> 00:03:59,398
phần nào khác của ứng dụng của chúng tôi mà yêu cầu nó.

46
00:03:59,398 --> 00:04:03,862
Bây giờ trước khi điều đó xảy ra, chúng ta cần phải có dịch vụ này và

47
00:04:03,862 --> 00:04:06,660
sau đó tiêm vào ứng dụng của chúng tôi.

48
00:04:06,660 --> 00:04:11,652
Để làm điều đó, chúng tôi sẽ mở tập tin .t mô-đun ứng dụng.

49
00:04:11,652 --> 00:04:17,214
Vì vậy, bên trong các ứng dụng module file .t, ngay sau khi nhập khẩu

50
00:04:17,214 --> 00:04:22,333
các thành phần ngay tại đó, Tôi sẽ nhập khẩu, D

51
00:04:25,974 --> 00:04:34,950
ishService ngay tại đó.

52
00:04:34,950 --> 00:04:36,618
Và điều này được nhập khẩu từ,

53
00:04:42,730 --> 00:04:46,466
Dịch vụ DishService ở đây.

54
00:04:46,466 --> 00:04:53,885
Vì vậy, một khi chúng tôi nhập khẩu mà, sau đó chúng tôi sẽ tuyên bố DishService này như một nhà cung cấp.

55
00:04:53,885 --> 00:04:58,121
Vì vậy, nếu bạn đi vào trang trí mô-đun ng, vì vậy

56
00:04:58,121 --> 00:05:03,170
bạn thấy tài sản thứ ba này ở đây được gọi là nhà cung cấp.

57
00:05:03,170 --> 00:05:05,960
Vì vậy, chúng tôi có tờ khai, nhập khẩu, và các nhà cung cấp.

58
00:05:05,960 --> 00:05:11,176
Vì vậy, bất cứ khi nào bạn có một dịch vụ mà bạn muốn làm cho có sẵn cho

59
00:05:11,176 --> 00:05:14,860
tất cả các thành phần từ một phần của mô-đun này.

60
00:05:14,860 --> 00:05:21,170
Sau đó, bạn sẽ chỉ định rằng như là một nhà cung cấp trong mô-đun ở đây.

61
00:05:21,170 --> 00:05:25,618
Vì vậy, ngay đây, tôi sẽ nói, DishService, đây.

62
00:05:25,618 --> 00:05:31,036
Vì vậy, với điều này, DishService của tôi bây giờ trở nên có sẵn cho phần còn lại của ứng dụng.

63
00:05:31,036 --> 00:05:32,186
Bây giờ, làm thế nào điều này xảy ra?

64
00:05:32,186 --> 00:05:36,948
Các Angular phụ thuộc tiêm nhìn vào thông tin này mà chúng tôi

65
00:05:36,948 --> 00:05:41,944
đã tuyên bố ở đây và sau đó quyết định rằng nó cần phải tạo ra một DishService và

66
00:05:41,944 --> 00:05:44,382
tiêm nó bất cứ nơi nào nó được yêu cầu.

67
00:05:44,382 --> 00:05:47,092
Bây giờ, làm thế nào để chúng ta sử dụng dịch vụ đó?

68
00:05:47,092 --> 00:05:52,674
Chúng tôi thấy rằng trong thành phần menu, chúng tôi đã sớm nhận được

69
00:05:52,674 --> 00:06:00,180
các DESS liên tục trực tiếp bằng cách nhập từ tập tin các món ăn được chia sẻ ở đây.

70
00:06:00,180 --> 00:06:04,681
Bây giờ đây không phải là cách lý tưởng để thu thập thông tin,

71
00:06:04,681 --> 00:06:09,812
thay vì buộc thông tin trực tiếp vào thành phần của

72
00:06:09,812 --> 00:06:14,685
bạn, bạn nên cho một dịch vụ lấy thông tin đó cho bạn.

73
00:06:14,685 --> 00:06:19,065
Sau đó, chúng tôi có thể thiết kế lại dịch vụ của mình để có thể đi và

74
00:06:19,065 --> 00:06:24,579
lấy cùng một thông tin từ một máy chủ back-end nếu bạn yêu cầu.

75
00:06:24,579 --> 00:06:28,396
Thật vậy, đó là những gì chúng tôi sẽ làm trong một số bài tập sau này.

76
00:06:28,396 --> 00:06:33,384
Vì vậy, bạn sẽ ủy thác trách nhiệm của việc lấy thông tin đến dịch vụ

77
00:06:33,384 --> 00:06:37,814
và sau đó bạn sẽ chỉ sử dụng dịch vụ trong thành phần menu này.

78
00:06:37,814 --> 00:06:43,627
Vì vậy, chúng tôi sẽ xóa thành phần món ăn này từ đó và

79
00:06:43,627 --> 00:06:48,806
thay vào đó chúng tôi sẽ nhập khẩu DishService ở đây.

80
00:06:48,806 --> 00:06:52,105
Và DishService này được nhập khẩu từ,

81
00:06:57,492 --> 00:07:04,140
services/dish.service tập tin ở đây.

82
00:07:04,140 --> 00:07:09,744
Vì vậy, sau khi thêm điều này bây giờ chúng tôi đã thực hiện một phần của công việc.

83
00:07:09,744 --> 00:07:14,774
Bây giờ chúng ta cần phải làm cho dịch vụ này có sẵn cho các thành phần của chúng tôi để sử dụng.

84
00:07:14,774 --> 00:07:18,107
Vì vậy, đó là nơi chúng tôi sẽ đi xuống để xây dựng này ở đây.

85
00:07:18,107 --> 00:07:19,769
Trong constructor này, vì vậy

86
00:07:19,769 --> 00:07:23,813
bây giờ bạn thấy việc sử dụng các constructor trong lớp của chúng tôi ở đây.

87
00:07:23,813 --> 00:07:28,814
Vì vậy, trong nhà xây dựng này chúng ta sẽ thấy

88
00:07:28,814 --> 00:07:35,609
riêng DishService và DishService ở đây.

89
00:07:35,609 --> 00:07:38,377
Vì vậy, đây là loại DishService, vì vậy

90
00:07:38,377 --> 00:07:43,914
khi bạn tuyên bố này trong constructor, khi thành phần này được tạo ra,

91
00:07:43,914 --> 00:07:48,771
sau đó DishService này mà bạn đã tiêm vào mô-đun ứng dụng.

92
00:07:48,771 --> 00:07:52,222
Khi bạn tiêm vào mô-đun ứng dụng,

93
00:07:52,222 --> 00:07:56,177
nó sẽ tạo ra một đối tượng DishService duy nhất.

94
00:07:56,177 --> 00:08:00,956
Và đối tượng DishService đó sẽ được cung cấp cho bạn trong

95
00:08:00,956 --> 00:08:02,123
thành phần menu của bạn ở đây.

96
00:08:02,123 --> 00:08:09,606
Vì vậy, bây giờ bạn có thể sau đó kêu gọi các phương pháp mà DishService này cung cấp cho

97
00:08:09,606 --> 00:08:13,780
bạn để thực hiện công việc thay mặt cho bạn.

98
00:08:13,780 --> 00:08:15,847
Vì vậy, một khi bạn đặt nó trong đó,

99
00:08:15,847 --> 00:08:20,333
bây giờ chúng tôi nhận ra rằng chúng tôi không còn có DESS liên tục ở đây.

100
00:08:20,333 --> 00:08:24,311
Vì vậy, tôi cần bằng cách nào đó lấy thông tin này.

101
00:08:24,311 --> 00:08:29,138
Bây giờ đây là nơi tôi sẽ tận dụng dịch vụ mà tôi có sẵn để

102
00:08:29,138 --> 00:08:31,023
lấy thông tin cho chúng tôi.

103
00:08:31,023 --> 00:08:33,257
Chúng ta lấy thông tin này ở đâu?

104
00:08:33,257 --> 00:08:38,058
Vì vậy, đây là nơi chúng ta sẽ có sự giúp đỡ của phương pháp vòng đời này được gọi là

105
00:08:38,058 --> 00:08:38,801
ngonInit.

106
00:08:38,801 --> 00:08:43,861
Vì vậy, khi bạn khai báo phương pháp vòng đời này được gọi là ngonInit trong

107
00:08:43,861 --> 00:08:49,561
ứng dụng của bạn, vì vậy bạn thấy rằng trong lớp học, bạn nói thực hiện onInit.

108
00:08:49,561 --> 00:08:54,239
Vì vậy, việc thực hiện onInit này đòi hỏi bạn phải

109
00:08:54,239 --> 00:08:59,570
thực hiện phương pháp này ngonInit như là một phần của lớp học của bạn ở đây.

110
00:08:59,570 --> 00:09:02,461
Vì vậy, bên trong phương pháp này NgonInit,

111
00:09:02,461 --> 00:09:07,450
bây giờ bạn có thể yêu cầu dịch vụ để lấy thông tin này.

112
00:09:07,450 --> 00:09:08,690
Sao lại thế?

113
00:09:08,690 --> 00:09:13,560
Phương pháp vòng đời này sẽ được thực thi

114
00:09:13,560 --> 00:09:19,040
bởi khung Angular bất cứ khi nào thành phần này được instantiated.

115
00:09:19,040 --> 00:09:23,770
Vì vậy, bất cứ khi nào thành phần này được tạo ra, phương pháp này sẽ được thực hiện.

116
00:09:23,770 --> 00:09:30,324
Vì vậy, khi phương pháp đó được thực hiện, sau đó tại thời điểm đó tôi có thể đi và

117
00:09:30,324 --> 00:09:34,623
lấy các món ăn từ DishService.

118
00:09:34,623 --> 00:09:36,839
Vì vậy, tôi có thể nói DishService, và

119
00:09:36,839 --> 00:09:42,700
sau đó bạn sẽ biết rằng bạn có phương pháp getDishService bên trong DishService.

120
00:09:42,700 --> 00:09:48,105
Bạn có thể gọi phương pháp để lấy các món ăn cho bạn.

121
00:09:48,105 --> 00:09:52,511
Bây giờ khi chúng tôi làm điều này, sau đó các món ăn đối tượng sẽ được cung cấp bởi

122
00:09:52,511 --> 00:09:56,090
các dịch vụ cho chúng tôi thông qua phương pháp GetDishes này.

123
00:09:56,090 --> 00:10:03,829
Và đó có thể được đưa vào các món ăn của chúng tôi biến địa phương mà chúng tôi đã định nghĩa ở đây.

124
00:10:03,829 --> 00:10:08,563
Vì vậy, với điều này, chúng tôi hoàn thành cập nhật

125
00:10:08,563 --> 00:10:12,847
cho tất cả các tệp ứng dụng của chúng tôi.

126
00:10:12,847 --> 00:10:18,993
Chúng ta hãy đi và xem nhanh ứng dụng Angular kết quả.

127
00:10:18,993 --> 00:10:23,507
Chuyển sang trình duyệt, bây giờ bạn có thể thấy rằng trong trình duyệt

128
00:10:23,507 --> 00:10:26,030
ứng dụng Angular hiển thị giống như trước đây.

129
00:10:26,030 --> 00:10:30,342
Trong phiên bản này như bạn đã thấy, thông tin về các món ăn

130
00:10:30,342 --> 00:10:34,967
sẽ được lấy vào thành phần của bạn bằng cách sử dụng dịch vụ.

131
00:10:34,967 --> 00:10:38,847
Dịch vụ lần lượt sẽ lấy thông tin này cho bạn.

132
00:10:38,847 --> 00:10:41,945
Bây giờ tại thời điểm này chúng tôi đang giữ cho dịch vụ rất cơ bản.

133
00:10:41,945 --> 00:10:46,105
Dịch vụ chỉ đơn giản trả về giá trị hằng số này mà chúng ta đã định nghĩa ở đây.

134
00:10:46,105 --> 00:10:50,738
Sau đó, bạn có thể tưởng tượng rằng bạn sẽ mở rộng dịch vụ để đi và

135
00:10:50,738 --> 00:10:54,042
lấy thông tin này từ máy chủ back-end.

136
00:10:54,042 --> 00:10:55,428
Khi điều đó xảy

137
00:10:55,428 --> 00:11:00,489
ra, việc lấy thông tin sẽ không được ngay lập tức nữa.

138
00:11:00,489 --> 00:11:04,911
Đó là nơi chúng tôi sẽ cần sự trợ giúp của lời hứa và

139
00:11:04,911 --> 00:11:11,022
cũng là cách tiếp cận JavaScript phản ứng để hỗ trợ sự chậm trễ này và

140
00:11:11,022 --> 00:11:17,881
đối phó với sự chậm trễ trong việc lấy thông tin trong ứng dụng của chúng tôi.

141
00:11:17,881 --> 00:11:21,699
Chúng ta sẽ nói về điều đó một cách chi tiết hơn trong mô-đun tiếp theo.

142
00:11:21,699 --> 00:11:26,683
Bây giờ, ứng dụng của chúng tôi sẽ chạy tốt, vì vậy bạn có thể chọn bất kỳ một trong

143
00:11:26,683 --> 00:11:32,370
những món ăn đó và thông tin sẽ được hiển thị giống như trước đây.

144
00:11:32,370 --> 00:11:38,250
Với điều này, chúng tôi cạnh tranh bài tập này, nơi chúng tôi tìm hiểu những điều cơ bản về các dịch vụ Angular.

145
00:11:38,250 --> 00:11:41,700
Và chúng tôi cũng đã thấy cách chúng tôi có thể sử dụng dịch vụ Angular,

146
00:11:41,700 --> 00:11:46,118
trong thành phần ứng dụng của chúng tôi.

147
00:11:46,118 --> 00:11:51,682
Đây là thời điểm tốt để bạn thực hiện một cam kết git với các dịch vụ cơ bản thông điệp.

148
00:11:51,682 --> 00:11:57,797
[ MUSIC].