1
00:00:00,000 --> 00:00:06,150
Bây giờ chúng ta sẽ chuyển sang

2
00:00:06,150 --> 00:00:09,045
bài tập tiếp theo của chúng tôi, nơi chúng tôi sẽ tạo ra

3
00:00:09,045 --> 00:00:13,275
một thành phần mới và thêm nó vào ứng dụng Angular của chúng tôi.

4
00:00:13,275 --> 00:00:17,430
Sau đó, chúng tôi sẽ sử dụng thành phần đó để điều khiển một phần

5
00:00:17,430 --> 00:00:22,380
của màn hình mà chúng tôi đã thiết kế cho ứng dụng Angular của chúng tôi.

6
00:00:22,380 --> 00:00:27,380
Màn hình cho ứng dụng Angular của chúng tôi là khá nhàm chán tại thời điểm này.

7
00:00:27,380 --> 00:00:32,240
Tất cả những gì chúng ta có là một thanh công cụ ở trên cùng và sau đó là một

8
00:00:32,240 --> 00:00:35,595
màn hình trắng, trống ở đây, nhưng điều đó cũng cho chúng ta những ý tưởng.

9
00:00:35,595 --> 00:00:39,560
Bây giờ chúng ta có thể lấy thêm nội dung và sau

10
00:00:39,560 --> 00:00:43,970
đó đặt nó vào phần này của màn hình ở đây. Làm thế nào để chúng ta làm được điều đó?

11
00:00:43,970 --> 00:00:46,850
Chúng ta có thể tạo ra một thành phần mới và sau đó bàn

12
00:00:46,850 --> 00:00:49,460
giao phần này của màn hình cho thành phần đó và nói,

13
00:00:49,460 --> 00:00:53,450
“Bạn chăm sóc kết xuất bất cứ điều gì bạn muốn vào phần đó của màn hình.”

14
00:00:53,450 --> 00:00:58,055
Vì vậy, quan điểm đó sẽ được điều khiển bởi các thành phần mới.

15
00:00:58,055 --> 00:01:03,345
Làm thế nào để chúng ta làm được điều đó? Chúng ta hãy đi qua bài tập ngay bây giờ.

16
00:01:03,345 --> 00:01:06,610
Để bắt đầu với bài tập,

17
00:01:06,610 --> 00:01:10,620
hãy đi đến hướng dẫn tập thể dục theo video cụ thể này.

18
00:01:10,620 --> 00:01:12,555
Sau đó, trong hướng dẫn tập thể dục,

19
00:01:12,555 --> 00:01:15,680
bạn sẽ thấy một số tài nguyên tập thể dục,

20
00:01:15,680 --> 00:01:18,290
đó là một tập tin zip có sẵn cho bạn.

21
00:01:18,290 --> 00:01:23,085
Tải tập tin zip đó vào máy tính của bạn,

22
00:01:23,085 --> 00:01:28,320
và điều này sẽ cung cấp cho bạn một tập tin images.zip.

23
00:01:28,320 --> 00:01:36,340
Vì vậy, chỉ cần lưu nó dưới dạng tập tin images.zip vào thư mục tải xuống của bạn,

24
00:01:36,340 --> 00:01:39,140
giải nén nó, và sau đó điều này sẽ cung cấp cho bạn

25
00:01:39,140 --> 00:01:42,200
một thư mục hình ảnh có chứa

26
00:01:42,200 --> 00:01:46,700
một tập hợp các hình ảnh mà chúng tôi sẽ sử dụng trong ứng dụng của chúng tôi.

27
00:01:46,700 --> 00:01:51,379
Giải nén tệp images.zip mà bạn vừa tải xuống,

28
00:01:51,379 --> 00:01:56,415
và di chuyển tệp images.zip đó vào dự án của bạn,

29
00:01:56,415 --> 00:01:58,130
và trong dự án của bạn,

30
00:01:58,130 --> 00:02:02,695
vào thư mục nguồn và tài sản ở đây.

31
00:02:02,695 --> 00:02:08,645
Vì vậy, một lần nữa, di chuyển thư mục hình ảnh mà bạn nhận được bằng cách

32
00:02:08,645 --> 00:02:15,110
giải nén các tập tin images.zip và sau đó di chuyển thư mục hình ảnh đó vào ứng dụng của bạn,

33
00:02:15,110 --> 00:02:17,465
do đó, bên trong ứng dụng của bạn,

34
00:02:17,465 --> 00:02:22,670
dưới nguồn và tài sản thư mục con.

35
00:02:22,670 --> 00:02:26,975
Những hình ảnh được cung cấp ở đây sẽ

36
00:02:26,975 --> 00:02:31,690
có sẵn để sử dụng trong ứng dụng Angular của bạn.

37
00:02:31,690 --> 00:02:37,310
Bây giờ, chúng ta sẽ sử dụng các CLI góc để

38
00:02:37,310 --> 00:02:43,025
tự động tạo ra một thành phần cho chúng ta và thêm nó vào ứng dụng Angular của chúng tôi.

39
00:02:43,025 --> 00:02:45,750
Vì vậy, trong thiết bị đầu cuối,

40
00:02:45,750 --> 00:02:50,420
đi đến thư mục chứa ứng dụng Angular của bạn và gõ

41
00:02:50,420 --> 00:02:56,960
ng tạo ra trình đơn thành phần.

42
00:02:56,960 --> 00:03:00,570
Vì vậy, chúng ta sẽ đặt tên thành phần này là MenuComponent.

43
00:03:00,570 --> 00:03:03,980
MenuComponent này sẽ chứa menu cho

44
00:03:03,980 --> 00:03:08,390
nhà hàng mà chúng tôi đang chuẩn bị ứng dụng Angular của chúng tôi cho.

45
00:03:08,390 --> 00:03:10,460
Vì vậy, khi bạn gõ này, điều

46
00:03:10,460 --> 00:03:11,975
này sẽ tự động tạo ra

47
00:03:11,975 --> 00:03:16,350
các MenuComponent và sau đó thêm nó vào ứng dụng Angular của bạn.

48
00:03:16,350 --> 00:03:19,970
MenuComponent này sẽ được tạo ra và thêm

49
00:03:19,970 --> 00:03:27,300
vào thư mục nguồn/ứng dụng/menu của ứng dụng của bạn.

50
00:03:27,300 --> 00:03:33,050
Vì vậy, nó sẽ tạo ra một tập hợp các tập tin trong thư mục menu.

51
00:03:33,050 --> 00:03:35,550
Vì vậy, bạn có thể thấy rằng nó tạo ra một tập tin SCSS,

52
00:03:35,550 --> 00:03:38,310
một tập tin HTML, và các tập tin s,

53
00:03:38,310 --> 00:03:40,630
và sau đó một cái gì đó được gọi là tập tin s phổ.

54
00:03:40,630 --> 00:03:42,495
Chúng ta sẽ quay lại với điều đó sau.

55
00:03:42,495 --> 00:03:48,140
Sau đó, nó cũng sẽ cập nhật tệp module.t ứng dụng của bạn.

56
00:03:48,140 --> 00:03:52,920
Vì vậy, chúng ta hãy đi và xem những gì vừa xảy ra khi bạn

57
00:03:52,920 --> 00:03:58,415
tạo MenuComponent này và thêm nó vào ứng dụng Angular của bạn.

58
00:03:58,415 --> 00:04:01,040
Chúng ta hãy đi đến BTV.

59
00:04:01,040 --> 00:04:03,930
Đến với biên tập viên của chúng tôi,

60
00:04:03,930 --> 00:04:05,245
bây giờ bạn sẽ nhận thấy rằng,

61
00:04:05,245 --> 00:04:06,650
trong thư mục ứng dụng,

62
00:04:06,650 --> 00:04:09,380
có một thư mục mới được gọi là menu ở đó,

63
00:04:09,380 --> 00:04:16,210
và thư mục menu này chứa tất cả các tệp liên quan đến MenuComponent ở đây.

64
00:04:16,210 --> 00:04:22,385
Angular CLI tuân theo hướng dẫn kiểu tiêu chuẩn Angular.

65
00:04:22,385 --> 00:04:25,715
Hướng dẫn phong cách cho thấy rằng mỗi thành phần nên được đặt

66
00:04:25,715 --> 00:04:29,765
vào thư mục riêng của nó như được nhìn thấy ở đây,

67
00:04:29,765 --> 00:04:34,220
và tôi khá thích điều này bởi vì tôi rất ám ảnh về

68
00:04:34,220 --> 00:04:38,840
việc giữ nó hệ thống phân cấp sạch cho các thư mục ứng dụng của tôi ở đây.

69
00:04:38,840 --> 00:04:41,825
Vì vậy, điều này hiệu quả rất tốt với tôi.

70
00:04:41,825 --> 00:04:44,545
Một số người thích một hệ thống phân cấp phẳng,

71
00:04:44,545 --> 00:04:46,570
nhưng tôi chỉ bị nhầm lẫn với phần đó.

72
00:04:46,570 --> 00:04:51,455
Vì vậy, tôi thích lưu trữ mỗi thành phần trong thư mục riêng của nó.

73
00:04:51,455 --> 00:04:53,480
Vì vậy, nó có tác dụng tốt cho tôi.

74
00:04:53,480 --> 00:04:58,430
Bây giờ, nếu bạn mở tệp.t ứng dụng module.t,

75
00:04:58,430 --> 00:05:02,390
bạn sẽ nhận thấy rằng tệp.t ứng dụng module.t đã được cập nhật

76
00:05:02,390 --> 00:05:06,810
bằng cách bao gồm một lần nhập khác vào tệp.t ứng dụng module.t.

77
00:05:06,810 --> 00:05:09,435
Vì vậy, bạn thấy rằng, cùng với AppComponent,

78
00:05:09,435 --> 00:05:15,235
MenuComponent đã tự động được thêm vào như là một nhập khẩu vào mô-đun ứng dụng của bạn.

79
00:05:15,235 --> 00:05:17,570
Vì vậy, điều này có nghĩa là MenuComponent bây giờ

80
00:05:17,570 --> 00:05:20,470
có sẵn cho ứng dụng Angular của bạn được sử dụng.

81
00:05:20,470 --> 00:05:26,590
Ngoài ra, nếu bạn kiểm tra thuộc tính khai báo bên trong trình trang trí NgModule,

82
00:05:26,590 --> 00:05:29,160
bạn sẽ thấy rằng trong thuộc tính khai báo,

83
00:05:29,160 --> 00:05:31,465
ngoài AppComponent,

84
00:05:31,465 --> 00:05:34,120
bạn cũng có MenuComponent bao gồm.

85
00:05:34,120 --> 00:05:37,270
Đây là lý do tại sao tôi yêu Angular CLI,

86
00:05:37,270 --> 00:05:40,035
bởi vì nó đơn giản hóa tất cả điều này làm việc cho tôi.

87
00:05:40,035 --> 00:05:41,945
Nếu tôi đã làm điều đó bằng tay,

88
00:05:41,945 --> 00:05:48,710
tôi sẽ phải tự đi vào ứng dụng module.t và sau đó gõ vào tất cả các mã này ở đó,

89
00:05:48,710 --> 00:05:53,830
và có một xác suất cao mà tôi sẽ kết thúc phạm sai lầm ở đó.

90
00:05:53,830 --> 00:05:57,800
Vì vậy, chúng tôi đang tiết kiệm cho mình rất nhiều rắc rối bằng cách sử dụng CLI Angular.

91
00:05:57,800 --> 00:05:59,720
Vì vậy, đó là lý do tại sao tôi đã yêu

92
00:05:59,720 --> 00:06:04,455
Angular CLI để tạo ra các ứng dụng Angular của tôi.

93
00:06:04,455 --> 00:06:07,965
Vì vậy, với điều đó, chúng tôi đã thiết lập

94
00:06:07,965 --> 00:06:11,570
MenuComponent của chúng tôi để có sẵn cho ứng dụng Angular của chúng tôi.

95
00:06:11,570 --> 00:06:14,505
Bây giờ, tôi sẽ sử dụng MenuComponent ở đâu?

96
00:06:14,505 --> 00:06:21,460
Tôi sẽ làm cho sử dụng các MenuComponent bên trong mẫu AppComponents của tôi.

97
00:06:21,460 --> 00:06:25,275
Vì vậy, tôi sẽ đi đến mẫu AppComponents và sau đó

98
00:06:25,275 --> 00:06:29,810
bao gồm các MenuComponent ở đây trong AppComponent của tôi.

99
00:06:29,810 --> 00:06:37,795
Vì vậy, mà về cơ bản sẽ bàn giao rằng một phần của màn hình để MenuComponent của tôi.

100
00:06:37,795 --> 00:06:38,980
Làm thế nào để chúng ta làm được điều đó?

101
00:06:38,980 --> 00:06:44,300
Để làm điều đó, trước tiên chúng ta sẽ xem nhanh các tập tin MenuComponent.ts.

102
00:06:44,300 --> 00:06:47,425
Vì vậy, khi bạn mở tập tin MenuComponent.Ts,

103
00:06:47,425 --> 00:06:54,225
bạn sẽ thấy rằng chọn cho MenuComponent đã được định nghĩa là ứng dụng menu.

104
00:06:54,225 --> 00:07:02,615
Vì vậy, đây là tên chọn tiêu chuẩn mà Angular CLI cung cấp cho các thành phần của bạn.

105
00:07:02,615 --> 00:07:04,840
Bạn có thể thay đổi điều này nếu bạn muốn,

106
00:07:04,840 --> 00:07:07,970
nhưng bất kỳ bộ chọn nào bạn chỉ định ở đây, nó

107
00:07:07,970 --> 00:07:15,670
sẽ tạo thành các thẻ mà bạn sử dụng để đưa nó vào tập tin mẫu của bạn.

108
00:07:15,670 --> 00:07:20,195
Vì vậy, quay trở lại AppComponent.html,

109
00:07:20,195 --> 00:07:23,795
bây giờ, nếu tôi muốn bao gồm các tập tin menu ở đây,

110
00:07:23,795 --> 00:07:24,930
vì vậy tôi sẽ chỉ nói,

111
00:07:24,930 --> 00:07:31,775
thẻ menu ứng dụng và thì

112
00:07:31,775 --> 00:07:35,360
đấy, một phần của màn hình bây giờ được bàn giao cho MenuComponent

113
00:07:35,360 --> 00:07:40,640
của tôi, và nó lên đến MenuComponent để quyết định những gì nó muốn đặt trong đó.

114
00:07:40,640 --> 00:07:42,420
Vì vậy, bất cứ điều gì được định nghĩa,

115
00:07:42,420 --> 00:07:49,535
mẫu MenuComponents sẽ được đặt vào vị trí ở đây.

116
00:07:49,535 --> 00:07:53,630
Vì vậy, bây giờ, tất cả những gì chúng tôi còn lại với là đi và chuẩn bị

117
00:07:53,630 --> 00:07:58,695
MenuComponent của chúng tôi để hiển thị các thông tin thích hợp cho chúng tôi.

118
00:07:58,695 --> 00:08:00,885
Hãy lưu các thay đổi,

119
00:08:00,885 --> 00:08:04,825
và sau đó chúng tôi sẽ chuyển sang

120
00:08:04,825 --> 00:08:11,715
bước tiếp theo, nơi chúng tôi sẽ tạo menu cho nhà hàng của chúng tôi bằng cách sử dụng MenuComponent.

121
00:08:11,715 --> 00:08:14,845
Trước khi tôi làm điều đó,

122
00:08:14,845 --> 00:08:17,625
những gì tôi sẽ làm là,

123
00:08:17,625 --> 00:08:19,830
đi đến thư mục ứng dụng ở đây,

124
00:08:19,830 --> 00:08:22,090
và sau đó trong thư mục ứng dụng,

125
00:08:22,090 --> 00:08:29,660
tôi sẽ tạo một thư mục con mới và tên đó là thư mục con được chia sẻ.

126
00:08:29,660 --> 00:08:34,015
Bây giờ, bất kỳ tập tin mà tôi sẽ chia sẻ trên các thành phần khác nhau,

127
00:08:34,015 --> 00:08:37,040
tôi sẽ đặt nó vào thư mục được chia sẻ ở đây.

128
00:08:37,040 --> 00:08:39,160
Bây giờ, bên trong thư mục được chia sẻ,

129
00:08:39,160 --> 00:08:45,895
tôi sẽ tạo ra một tập tin mới có tên là dish.t.

130
00:08:45,895 --> 00:08:51,650
Bên trong món ăn này.s, tôi sẽ tạo ra một lớp để xác định

131
00:08:51,650 --> 00:08:59,050
một món ăn và làm cho nó có sẵn cho các thành phần còn lại để sử dụng.

132
00:08:59,050 --> 00:09:02,555
Vì vậy, để xác định một lớp TypeScript ở đây,

133
00:09:02,555 --> 00:09:04,240
tôi sẽ nói xuất khẩu,

134
00:09:04,240 --> 00:09:07,525
vì vậy tôi đang xuất khẩu lớp TypeScript này ở đây,

135
00:09:07,525 --> 00:09:13,550
lớp xuất khẩu, và sau đó tôi sẽ đặt tên lớp như món ăn.

136
00:09:13,550 --> 00:09:16,230
Bên trong lớp món ăn này,

137
00:09:16,230 --> 00:09:20,175
bây giờ tôi có thể xác định các thuộc tính khác nhau.

138
00:09:20,175 --> 00:09:21,550
Vì vậy, đối với lớp món ăn,

139
00:09:21,550 --> 00:09:23,050
tôi sẽ xác định một thuộc tính,

140
00:09:23,050 --> 00:09:27,425
đó là một ID, mà tôi định nghĩa là một chuỗi.

141
00:09:27,425 --> 00:09:31,330
Bây giờ, hãy chú ý, nếu bạn đến từ thế giới JavaScript,

142
00:09:31,330 --> 00:09:35,975
trong JavaScript, bạn không cần phải xác định kiểu của bất kỳ biến nào.

143
00:09:35,975 --> 00:09:43,380
TypeScript mang đến cơ sở này cho bạn để xác định kiểu cho mỗi biến.

144
00:09:43,380 --> 00:09:46,405
Vì vậy, nếu bạn chỉ định tên, cột và chuỗi,

145
00:09:46,405 --> 00:09:51,785
điều đó có nghĩa là biến tên sẽ luôn thuộc kiểu chuỗi.

146
00:09:51,785 --> 00:09:55,595
Vì vậy, nếu bạn cố gắng gán một số nguyên cho tên,

147
00:09:55,595 --> 00:09:58,400
sau đó trình biên dịch TypeScript sẽ tự động

148
00:09:58,400 --> 00:10:01,850
bắt nó cho bạn và sau đó cho bạn biết rằng có một lỗi.

149
00:10:01,850 --> 00:10:04,855
Đó là lý do, sử dụng TypeScript,

150
00:10:04,855 --> 00:10:08,155
bạn có thể giảm số lượng lỗi mà bạn có thể gây ra.

151
00:10:08,155 --> 00:10:11,850
JavaScript truyền thống không thực hiện

152
00:10:11,850 --> 00:10:16,790
kiểm tra lỗi này vì nó không có bất kỳ khái niệm về kiểu dữ liệu.

153
00:10:16,790 --> 00:10:22,025
Nhưng nếu bạn đến từ một ngôn ngữ lập trình truyền thống như C++ hoặc Java,

154
00:10:22,025 --> 00:10:24,945
bạn đã rất quen thuộc với các kiểu dữ liệu,

155
00:10:24,945 --> 00:10:28,565
các kiểu dữ liệu nguyên thủy, và

156
00:10:28,565 --> 00:10:33,290
các kiểu dữ liệu khác đã được định nghĩa vào ngôn ngữ.

157
00:10:33,290 --> 00:10:41,315
TypeScript mang tính năng đó đến JavaScript hay đúng hơn là một phần của TypeScript,

158
00:10:41,315 --> 00:10:47,865
và cho phép bạn xác định các biến và đính kèm các kiểu vào

159
00:10:47,865 --> 00:10:49,950
các biến đó, do đó tên TypeScript.

160
00:10:49,950 --> 00:10:51,500
Vì vậy, đối với các món ăn,

161
00:10:51,500 --> 00:10:53,970
tôi sẽ tạo ra một tài sản tên.

162
00:10:53,970 --> 00:10:57,870
Sau đó, tôi sẽ tạo ra một tài sản hình ảnh

163
00:10:57,870 --> 00:10:59,640
, cũng là một chuỗi.

164
00:10:59,640 --> 00:11:03,710
Chuỗi hình ảnh này sẽ là một chuỗi mà trỏ đến

165
00:11:03,710 --> 00:11:08,635
URL của hình ảnh mà tôi sẽ sử dụng cho món ăn đặc biệt này.

166
00:11:08,635 --> 00:11:18,230
Sau đó, tôi sẽ xác định một thể loại cho món ăn này như cũng là một chuỗi đặc trưng như Boolean,

167
00:11:18,230 --> 00:11:21,130
nhãn như một chuỗi.

168
00:11:21,150 --> 00:11:31,810
Giá như một chuỗi và sau đó mô tả như một chuỗi.

169
00:11:31,810 --> 00:11:37,695
Vì vậy, đây là những đặc tính mà tôi liên kết với lớp món ăn.

170
00:11:37,695 --> 00:11:43,440
Vì vậy, điều này sẽ xác định các món ăn khác nhau trong thực đơn của tôi của nhà hàng của tôi,

171
00:11:43,440 --> 00:11:48,060
và cho mỗi món ăn tôi cần phải xác định tất cả các thuộc tính khác nhau.

172
00:11:48,060 --> 00:11:49,325
Bây giờ, tại sao tôi lại cần điều đó?

173
00:11:49,325 --> 00:11:54,400
Điều đó sẽ giúp tôi xây dựng thực đơn cho nhà hàng của tôi như bạn sẽ thấy khá sớm.

174
00:11:54,400 --> 00:12:02,890
Vì vậy, với điều này, chúng tôi hoàn thành định nghĩa của lớp học của tôi ở đó.

175
00:12:02,890 --> 00:12:06,940
Hãy lưu các thay đổi vào tập tin dish.t.

176
00:12:06,940 --> 00:12:11,300
Bây giờ, tập tin dish.t này đang xuất khẩu một lớp học.

177
00:12:11,300 --> 00:12:15,820
Bây giờ, tôi có thể nhập lớp này vào bất kỳ

178
00:12:15,820 --> 00:12:22,485
tập tin kịch bản kiểu thành phần của ứng dụng của tôi.

179
00:12:22,485 --> 00:12:28,550
Tiếp theo, tôi sẽ chuyển sang tập tin menu.component.t của tôi.

180
00:12:28,550 --> 00:12:34,484
Bên trong tập tin menu.component.t ngoài việc nhập khẩu các thành phần,

181
00:12:34,484 --> 00:12:38,420
sau đó tôi cũng sẽ thấy rằng bạn đang nhập một onInit ở đó.

182
00:12:38,420 --> 00:12:41,885
Chúng ta sẽ đến phần OnInit trong một trong những bài tập sau này.

183
00:12:41,885 --> 00:12:45,475
Tôi sẽ giải thích những gì nó làm trong một bài tập sau.

184
00:12:45,475 --> 00:12:53,820
Chúng tôi cũng sẽ nhập lớp mới mà chúng tôi tạo ra được gọi là lớp Dish.

185
00:12:53,820 --> 00:12:56,160
Tại sao chúng ta nhập khẩu lớp món ăn này?

186
00:12:56,160 --> 00:13:03,180
Vì vậy mà chúng ta có thể sử dụng đó như là một loại cho một biến mà tôi đang xác định ở đây.

187
00:13:03,180 --> 00:13:04,850
Vậy, lớp món ăn này ở đâu?

188
00:13:04,850 --> 00:13:13,955
Nó là trong.. /shared/dish thư mục.

189
00:13:13,955 --> 00:13:17,890
Vì vậy, điều này nằm trong thư mục món ăn được chia sẻ ở trên đó.

190
00:13:17,890 --> 00:13:22,460
Sau đó, bạn sẽ thấy rằng chúng tôi đã xác định các thành phần menu ở đây.

191
00:13:22,460 --> 00:13:23,640
Vì vậy, bạn có thể thấy rằng nó nói,

192
00:13:23,640 --> 00:13:27,950
“Xuất trình đơn lớp thành phần” và sau đó nó nói, “Thực hiện trên nó.”

193
00:13:27,950 --> 00:13:30,630
Chúng ta sẽ trở lại với điều đó trong một chút sau đó.

194
00:13:30,630 --> 00:13:37,130
Bạn cũng thấy rằng có một constructor và có một phương pháp khác ở đây được gọi là ngOnIt.

195
00:13:37,130 --> 00:13:40,170
Chúng ta sẽ sử dụng những điều này trong một số bài tập sau này.

196
00:13:40,170 --> 00:13:42,970
Vì vậy, chúng ta hãy để nó ở đó như vậy và chúng ta sẽ

197
00:13:42,970 --> 00:13:46,565
trở lại để hiểu nó là gì trong một thời gian ngắn.

198
00:13:46,565 --> 00:13:48,940
Ngoài ra, lưu ý rằng đối với thành phần này,

199
00:13:48,940 --> 00:13:52,040
mẫu được định nghĩa trong thành phần menu chấm HTML,

200
00:13:52,040 --> 00:13:56,070
và URL phong cách được định nghĩa ở đó.

201
00:13:56,070 --> 00:14:02,170
Bây giờ, ngoài ra, vào lớp thành phần menu của tôi,

202
00:14:02,170 --> 00:14:07,100
tôi sẽ bao gồm một biến mới được gọi là

203
00:14:07,100 --> 00:14:14,660
các món ăn mà sẽ là một mảng của các loại món ăn.

204
00:14:14,660 --> 00:14:21,540
Được chứ? Sau đó, tôi sẽ chỉ đơn giản là bao gồm các bộ

205
00:14:21,540 --> 00:14:29,955
món ăn vào biến món ăn của tôi mà tôi đã định nghĩa ở đây.

206
00:14:29,955 --> 00:14:35,040
Bây giờ, để gõ tất cả những thứ bằng tay sẽ mất rất nhiều thời gian.

207
00:14:35,040 --> 00:14:39,060
Vì vậy, thay vào đó, những gì tôi muốn đề nghị bạn làm là chỉ cần đi và sao chép

208
00:14:39,060 --> 00:14:45,780
nội dung trực tiếp từ các hướng dẫn theo video này.

209
00:14:45,780 --> 00:14:47,350
Vì vậy, đó là những gì tôi sẽ làm.

210
00:14:47,350 --> 00:14:50,810
Sau đó quay lại và dán nó vào đây.

211
00:14:50,810 --> 00:14:55,720
Bây giờ bạn có thể thấy rằng tôi đã cắt và dán các thông tin cho

212
00:14:55,720 --> 00:15:00,120
tất cả các món ăn của tôi từ các hướng dẫn trong đây.

213
00:15:00,120 --> 00:15:07,045
Vì vậy, điều này hoàn thành mảng của tất cả các món ăn được xác định trong hướng dẫn của tôi.

214
00:15:07,045 --> 00:15:11,035
Vì vậy, đó là cách dễ nhất để nắm giữ thông tin này.

215
00:15:11,035 --> 00:15:13,525
Vì vậy, chỉ cần cắt và dán nó từ đó.

216
00:15:13,525 --> 00:15:16,800
Bây giờ, lưu ý rằng đối với món ăn này,

217
00:15:16,800 --> 00:15:20,885
mỗi một trong số họ là một đối tượng JavaScript ở đây.

218
00:15:20,885 --> 00:15:25,240
Vì vậy, đó có thể được ánh xạ vào lớp kịch bản kiểu tương ứng ở đó.

219
00:15:25,240 --> 00:15:28,700
Vì vậy, bạn có thể thấy rằng mỗi đối tượng JavaScript có thuộc tính ở đó,

220
00:15:28,700 --> 00:15:35,245
và các thuộc tính này chính xác phù hợp với các thuộc tính mà tôi xác định cho lớp món ăn của tôi.

221
00:15:35,245 --> 00:15:37,080
Vì vậy, một khi tôi xác định điều này,

222
00:15:37,080 --> 00:15:39,430
sau đó các món ăn bây giờ sẽ trở thành một mảng các

223
00:15:39,430 --> 00:15:42,020
món ăn và điều này bây giờ sẽ trở thành có sẵn cho

224
00:15:42,020 --> 00:15:48,420
tôi để sử dụng khi tôi xác định mẫu HTML của tôi cho thực đơn của tôi.

225
00:15:48,420 --> 00:15:53,715
Hãy lưu những thay đổi mà chúng tôi đã thực hiện cho đến nay và sau đó chúng tôi sẽ

226
00:15:53,715 --> 00:15:59,410
mở tệp menu.component.html.

227
00:15:59,410 --> 00:16:02,580
Vì vậy, chúng tôi sẽ đi đến các menu.component.html tập tin.

228
00:16:02,580 --> 00:16:06,280
Bạn sẽ thấy rằng trong menu.component.html tập tin,

229
00:16:06,280 --> 00:16:11,390
bạn hiện chỉ có một P với trình đơn hoạt động ở đây.

230
00:16:11,390 --> 00:16:17,390
Vì vậy, nếu bạn chỉ cần dán nó vào đó và sau đó nhìn thấy các ứng dụng làm việc,

231
00:16:17,390 --> 00:16:20,500
bạn sẽ thấy chỉ trình đơn này hoạt động trên màn hình.

232
00:16:20,500 --> 00:16:25,640
Tôi sẽ thay thế này bằng mã mẫu riêng của tôi ở đây.

233
00:16:25,640 --> 00:16:31,230
Đây là nơi tôi sẽ có sự giúp đỡ của bố cục flex góc để giúp tôi bố trí

234
00:16:31,230 --> 00:16:37,125
nội dung của tôi tốt trong màn hình của tôi.

235
00:16:37,125 --> 00:16:38,885
Vì vậy, để bắt đầu,

236
00:16:38,885 --> 00:16:41,490
tôi sẽ bắt đầu với một div,

237
00:16:41,490 --> 00:16:46,480
mà tôi sẽ áp dụng một lớp được gọi là container.

238
00:16:46,480 --> 00:16:49,710
Tôi sẽ xác định lớp chứa bằng cách sử dụng một

239
00:16:49,710 --> 00:16:55,360
số mã CSS một chút sau đó trong bài tập này.

240
00:16:55,360 --> 00:16:57,715
Vì vậy, tôi sẽ áp dụng các container lớp ở đây.

241
00:16:57,715 --> 00:17:04,640
Tôi cũng sẽ xác định một tài sản được gọi là fxlayout.

242
00:17:04,640 --> 00:17:07,545
Một thuộc tính được gọi là fxlayout.

243
00:17:07,545 --> 00:17:10,205
Bây giờ, fxlayout này là một thuộc tính

244
00:17:10,205 --> 00:17:15,015
mà bố trí flex góc cho phép tôi áp dụng cho một div.

245
00:17:15,015 --> 00:17:20,295
Điều này xác định xem nội dung khác nhau

246
00:17:20,295 --> 00:17:25,440
mà tôi bao gồm bên trong những div nên được đặt ra theo chiều ngang hoặc chiều dọc.

247
00:17:25,440 --> 00:17:28,755
Vì vậy, tôi sẽ chỉ định điều này là một cột.

248
00:17:28,755 --> 00:17:32,675
Vì vậy, bất cứ nội dung tôi bao gồm bên trong div này,

249
00:17:32,675 --> 00:17:36,105
sẽ được đặt ra theo chiều dọc một bên dưới khác trên màn hình của tôi.

250
00:17:36,105 --> 00:17:43,855
Nếu bạn đã nhìn thấy cách lưới làm việc với nội dung trong Bootstrap,

251
00:17:43,855 --> 00:17:47,100
bạn sẽ thấy rằng điều này về cơ bản nói với tôi rằng tôi sẽ

252
00:17:47,100 --> 00:17:50,970
đặt tất cả mọi thứ vào một cột duy nhất dưới đó.

253
00:17:50,970 --> 00:17:55,700
Đừng nhầm lẫn cột này với cột Bootstrap từ lưới Bootstrap của Bootstrap.

254
00:17:55,700 --> 00:17:57,185
Chúng là hai thứ khác nhau.

255
00:17:57,185 --> 00:18:01,290
Ở đây, thuộc tính là fxlayout và tôi chỉ định cột.

256
00:18:01,290 --> 00:18:03,240
Tôi cũng có thể chỉ định điều này như là hàng

257
00:18:03,240 --> 00:18:07,470
, có nghĩa là nội dung sẽ được đặt ra theo chiều ngang.

258
00:18:07,470 --> 00:18:14,590
Bây giờ cũng, một thuộc tính nữa tôi sẽ chỉ định cho điều này là FxLayoutGap,

259
00:18:14,590 --> 00:18:18,705
mà tôi sẽ chỉ định là 10 pixel.

260
00:18:18,705 --> 00:18:23,330
Vì vậy, điều này có nghĩa là bất cứ nội dung nào tôi bao gồm ở đây

261
00:18:23,330 --> 00:18:27,690
sẽ được tách ra với nhau bằng khoảng cách 10 điểm ảnh giữa mỗi một trong số họ.

262
00:18:27,690 --> 00:18:33,745
Từ kiến thức Bootstraps, bạn sẽ thấy những gì một cắt là ở đây.

263
00:18:33,745 --> 00:18:38,050
Điều này định nghĩa sự tách rời giữa

264
00:18:38,050 --> 00:18:42,925
hai phần nội dung trong mẫu ứng dụng của tôi.

265
00:18:42,925 --> 00:18:46,945
Vì vậy, với điều này, chúng tôi sẽ đóng div ở đây.

266
00:18:46,945 --> 00:18:49,080
Bây giờ, bên trong div này,

267
00:18:49,080 --> 00:18:57,735
tôi sẽ xác định nội dung thực tế sẽ đi vào tập tin menu.component.html của tôi.

268
00:18:57,735 --> 00:19:04,035
Bây giờ ở đây, tôi sẽ sử dụng một thành phần khác mà

269
00:19:04,035 --> 00:19:10,745
thiết kế vật liệu cung cấp cho tôi gọi là một thành phần danh sách mat.

270
00:19:10,745 --> 00:19:14,470
Vì vậy, thành phần này cho phép tôi tạo ra một danh sách các

271
00:19:14,470 --> 00:19:19,215
mục mà tôi đưa vào mẫu của tôi ở đây.

272
00:19:19,215 --> 00:19:25,360
Vì vậy, đây là một thành phần danh sách vật liệu góc cạnh.

273
00:19:25,360 --> 00:19:30,980
Từ Bootstrap, bạn nhận thấy rằng trong Bootstrap chúng tôi đã có đối tượng media.

274
00:19:30,980 --> 00:19:36,430
Vì vậy, danh sách mat giống như đối tượng phương tiện truyền thông trong một số ý nghĩa từ Bootstrap.

275
00:19:36,430 --> 00:19:39,470
Bây giờ để điều này, tôi sẽ áp dụng một lớp,

276
00:19:39,470 --> 00:19:42,095
một thuộc tính được gọi là FXFlex.

277
00:19:42,095 --> 00:19:49,990
Bây giờ, điều này có nghĩa là toàn bộ điều này sẽ được coi là một đơn vị hoặc một phần

278
00:19:49,990 --> 00:19:58,180
nội dung mà chúng sẽ được bố trí bởi bố cục flex của tôi ở đây.

279
00:19:58,180 --> 00:20:01,100
Vì vậy, nếu bạn đã quen thuộc với CSS flex layout.

280
00:20:01,100 --> 00:20:05,505
Vì vậy, đây là một phần của nội dung sẽ được đặt ra bởi cách bố trí CSS flex của tôi.

281
00:20:05,505 --> 00:20:09,420
Vì vậy, áp dụng FXFlex ở đây,

282
00:20:09,420 --> 00:20:16,610
và sau đó bên trong đây tôi sẽ xác định mat-list-item.

283
00:20:16,610 --> 00:20:18,380
Vì vậy, đây là một mục danh sách ở đây.

284
00:20:18,380 --> 00:20:22,250
Vì vậy, từ kiến thức HTML của bạn,

285
00:20:22,250 --> 00:20:28,090
nếu thẻ LI mà bạn sử dụng trong HTML là tương tự như điều này ở đây.

286
00:20:28,090 --> 00:20:31,240
Vì vậy, đây là một mục danh sách mg ở đây.

287
00:20:31,240 --> 00:20:34,705
Vì vậy, rõ ràng, bên trong danh sách mục này,

288
00:20:34,705 --> 00:20:39,220
bạn sẽ được xác định danh sách của sự vật.

289
00:20:39,220 --> 00:20:45,750
Bây giờ, góc cạnh cung cấp một số chỉ thị cấu trúc mà bạn có thể áp dụng

290
00:20:45,750 --> 00:20:53,455
cho thẻ của bạn ở đây cho phép bạn tạo nội dung của bạn.

291
00:20:53,455 --> 00:20:58,375
Bây giờ, tôi sẽ sử dụng một chỉ thị cấu trúc được gọi là ngFor.

292
00:20:58,375 --> 00:21:01,990
Chúng ta sẽ thấy cách chúng ta sử dụng nó trong mẫu này.

293
00:21:01,990 --> 00:21:04,050
Sau đó, sau bài tập này,

294
00:21:04,050 --> 00:21:07,250
tôi sẽ giải thích ngắn gọn cho bạn những gì các chỉ thị cấu trúc là và

295
00:21:07,250 --> 00:21:11,625
mục đích mà họ phục vụ trong việc xác định các mẫu của bạn ở đây.

296
00:21:11,625 --> 00:21:15,960
Vì vậy, bên trong mục danh sách trống này, tôi sẽ nói,

297
00:21:15,960 --> 00:21:21,480
sao, lưu ý cú pháp, sao NGFor.

298
00:21:22,470 --> 00:21:25,500
Vì vậy, đây là chỉ thị cấu trúc, chỉ

299
00:21:25,500 --> 00:21:29,585
thị cấu trúc NGFor theo góc cạnh.

300
00:21:29,585 --> 00:21:34,690
Chỉ thị cấu trúc NGFor này cho phép bạn

301
00:21:34,690 --> 00:21:40,855
làm là lặp lại một mảng các mục.

302
00:21:40,855 --> 00:21:48,805
Hãy nhớ rằng chúng tôi định nghĩa các món ăn như là một mảng các đối tượng món ăn trong mã của chúng tôi.

303
00:21:48,805 --> 00:21:51,040
Bây giờ, trong mẫu của tôi,

304
00:21:51,040 --> 00:21:54,095
tôi sẽ có quyền truy cập vào đối tượng món ăn đó.

305
00:21:54,095 --> 00:21:56,945
Vì vậy, ở đây, nếu tôi muốn lặp lại nó,

306
00:21:56,945 --> 00:21:59,160
cách tôi chỉ định nó là tôi sẽ nói,

307
00:21:59,160 --> 00:22:04,950
“Hãy để món ăn.”

308
00:22:04,950 --> 00:22:11,495
Đây là cách cú pháp hoạt động cho chỉ thị cấu trúc NGFor.

309
00:22:11,495 --> 00:22:14,020
Vì vậy, hãy để món ăn của các món ăn.

310
00:22:14,020 --> 00:22:21,805
Điều này có nghĩa là các món ăn là mảng của các đối tượng món ăn.

311
00:22:21,805 --> 00:22:24,245
Khi chúng ta chọn nói cho món ăn của các món ăn,

312
00:22:24,245 --> 00:22:27,130
điều này sẽ cho phép tôi truy cập vào từng phần tử của

313
00:22:27,130 --> 00:22:30,460
mảng và sau đó nó giúp tôi lặp lại trên mảng.

314
00:22:30,460 --> 00:22:32,085
Điều này giống như một vòng lặp for,

315
00:22:32,085 --> 00:22:36,210
nếu bạn đã quen thuộc với các vòng lặp từ lập trình.

316
00:22:36,210 --> 00:22:40,630
Vì vậy, điều này hoạt động như một vòng lặp for cho bạn và sau đó nó giúp bạn lặp

317
00:22:40,630 --> 00:22:46,855
lại tất cả các yếu tố của mảng món ăn ở đây.

318
00:22:46,855 --> 00:22:51,050
Món ăn này trở thành một đối tượng JavaScript cho phép tôi

319
00:22:51,050 --> 00:22:55,350
truy cập vào từng phần tử của mảng đó ở đó.

320
00:22:55,350 --> 00:23:00,680
Bây giờ, từ điều này, chúng ta cũng có thể

321
00:23:00,680 --> 00:23:06,775
truy cập vào các thuộc tính của từng đối tượng riêng lẻ bên trong mảng món ăn của tôi.

322
00:23:06,775 --> 00:23:13,335
Vì vậy, sau đó, tôi có thể sử dụng chúng để xác định mẫu của tôi ở đây.

323
00:23:13,335 --> 00:23:16,120
Hãy để tôi đặt ra mẫu và sau đó chúng tôi sẽ quay trở lại và

324
00:23:16,120 --> 00:23:19,185
nhìn vào cách hai cái này có liên quan với nhau ở đây.

325
00:23:19,185 --> 00:23:21,760
Bây giờ, bên trong mục danh sách trống của tôi,

326
00:23:21,760 --> 00:23:28,480
tôi có thể bao gồm một hình ảnh với các thuộc tính như MatlistaVatar.

327
00:23:30,040 --> 00:23:38,625
Vì vậy, điều này cho phép tôi bao gồm một hình ảnh và sau đó với nguồn được chỉ định ở đây.

328
00:23:38,625 --> 00:23:44,275
Bây giờ thú vị, nhìn vào cú pháp mà tôi đang sử dụng ở đây.

329
00:23:44,275 --> 00:23:48,380
Bên trong niềng răng đôi, tôi sẽ nói dish.image.

330
00:23:48,560 --> 00:23:55,985
Điều này có nghĩa là đây là một nội suy một chiều mà chúng ta đang nói đến.

331
00:23:55,985 --> 00:23:58,885
Ở đây, khi tôi chỉ định này,

332
00:23:58,885 --> 00:24:07,635
những gì điều này có nghĩa là nguồn này sẽ nhận được giá trị của dish.image đã được định nghĩa trong

333
00:24:07,635 --> 00:24:10,515
đối tượng JavaScript của tôi mà tôi đã định nghĩa trong

334
00:24:10,515 --> 00:24:17,050
lớp kịch bản kiểu của tôi ở đó và đó là có sẵn cho tôi để làm bố trí ở đây.

335
00:24:17,050 --> 00:24:22,510
Vì vậy, rằng giá trị dish.image sẽ có sẵn cho tôi và cũng cho hình ảnh này,

336
00:24:22,510 --> 00:24:28,255
tôi sẽ chỉ định một giá trị thay thế như dish.name.

337
00:24:28,255 --> 00:24:33,770
Nhớ lại rằng món ăn của tôi cũng có tài sản tên có sẵn cho

338
00:24:33,770 --> 00:24:39,240
tôi để xác định một hình ảnh cho danh sách của tôi ở đây.

339
00:24:39,240 --> 00:24:42,460
Bạn sẽ sớm nhận ra danh sách này trông như thế nào trên

340
00:24:42,460 --> 00:24:46,010
màn hình khi chúng tôi hoàn thành mẫu này ở đây.

341
00:24:46,010 --> 00:24:53,140
Ngoài ra, tôi sẽ sử dụng một h1 với thẻ MatLine.

342
00:24:53,140 --> 00:24:56,500
Một lần nữa, đây là việc sử dụng

343
00:24:56,500 --> 00:25:04,900
các thành phần vật liệu góc danh sách để xác định mẫu của tôi ở đây.

344
00:25:04,900 --> 00:25:12,800
Vì vậy, tôi nói h1 MatLine vì vậy điều này giúp tôi xác định một dòng ở đây và sau đó bên trong đó,

345
00:25:12,800 --> 00:25:17,170
tôi sẽ sử dụng niềng răng đôi và nói dish.name ở đây.

346
00:25:17,170 --> 00:25:24,930
Vì vậy, điều này cho phép tôi có được giá trị của tên món ăn ở đó.

347
00:25:24,930 --> 00:25:33,140
Vì vậy, mà định nghĩa một dòng và sau đó trong dòng tiếp theo tôi sẽ nói p MatLine.

348
00:25:33,140 --> 00:25:36,370
Vì vậy, tôi sẽ sử dụng thẻ p ở đây và sau đó

349
00:25:36,370 --> 00:25:39,655
đóng thẻ p và sau đó bên trong thẻ p,

350
00:25:39,655 --> 00:25:48,000
tôi sẽ sử dụng một span để xác định dish.description.

351
00:25:48,000 --> 00:25:52,025
Vì vậy, nếu bạn đã quen thuộc với các đối tượng JavaScript,

352
00:25:52,025 --> 00:25:56,180
bây giờ bạn thấy làm thế nào tôi đang truy cập vào các thuộc tính của

353
00:25:56,180 --> 00:26:02,030
đối tượng JavaScript của tôi ở đây, dish.description ở đây.

354
00:26:02,030 --> 00:26:06,595
Để lưu ý, chạy qua này một lần nữa

355
00:26:06,595 --> 00:26:13,630
thuộc tính ngFor cho phép tôi lặp lại một mảng các đối tượng ở đây.

356
00:26:13,630 --> 00:26:17,700
Vì vậy, các món ăn ở đây là một loạt các đối tượng món ăn.

357
00:26:17,700 --> 00:26:20,865
Vì vậy, khi tôi nói cho món ăn của các món ăn,

358
00:26:20,865 --> 00:26:28,070
món ăn này sẽ cho tôi truy cập vào mỗi yếu tố của

359
00:26:28,070 --> 00:26:32,170
mảng món ăn của tôi và tôi lặp lại trên mỗi yếu tố của mảng

360
00:26:32,170 --> 00:26:36,525
và sau đó tôi sẽ được tạo ra nội dung này cho mỗi người trong số họ.

361
00:26:36,525 --> 00:26:39,205
Vì vậy, mục danh sách trống này,

362
00:26:39,205 --> 00:26:43,500
về cơ bản hoạt động giống như một vòng lặp for từ

363
00:26:43,500 --> 00:26:47,830
ngôn ngữ máy tính truyền thống của bạn và sau đó nó lặp lại

364
00:26:47,830 --> 00:26:52,890
danh sách các món ăn và sau đó đặt ra mỗi một trong số họ trên màn hình của tôi.

365
00:26:52,890 --> 00:26:54,895
Vì vậy, với sự thay đổi này,

366
00:26:54,895 --> 00:27:00,145
chúng ta hãy lưu tệp thành phần menu.

367
00:27:00,145 --> 00:27:06,800
Tiếp theo, chúng ta đi đến app.module.t và chúng ta cần nhập mô-đun MatList vào này.

368
00:27:06,800 --> 00:27:11,840
Vì vậy, chúng ta nói, nhập MatlistModule

369
00:27:11,840 --> 00:27:20,380
từ Angular/Material/list.Một khi chúng tôi đã nhập khẩu này ở

370
00:27:20,380 --> 00:27:25,390
đó, sau đó chúng tôi đi xuống và sau đó cập nhật nhập khẩu trong

371
00:27:25,390 --> 00:27:30,320
bộ trang trí mô-đun Ng và thêm vào

372
00:27:30,320 --> 00:27:36,435
mô-đun MatList vào danh sách nhập khẩu có.

373
00:27:36,435 --> 00:27:42,430
Điều này module.t ứng dụng của tôi bây giờ được cập nhật và sau đó cũng,

374
00:27:42,430 --> 00:27:47,770
tôi sẽ đi đến các tập tin styles.scss và sau đó thêm vào

375
00:27:47,770 --> 00:27:53,575
lớp chứa ở đây.

376
00:27:53,575 --> 00:27:55,890
Lớp container định nghĩa gì ở đây?

377
00:27:55,890 --> 00:28:00,995
Lớp chứa là lề 20 pixel

378
00:28:00,995 --> 00:28:07,830
và hiển thị flex và lưu các thay đổi.

379
00:28:07,830 --> 00:28:12,210
Bây giờ, chúng ta hãy đi và nhìn vào trang web của chúng tôi.

380
00:28:12,210 --> 00:28:14,180
Đi đến trang web của chúng tôi.

381
00:28:14,180 --> 00:28:15,885
Thì đấy. Đây rồi.

382
00:28:15,885 --> 00:28:22,250
Thực đơn cho nhà hàng của chúng tôi hiển thị trong tất cả sự lộng lẫy của nó trên màn hình.

383
00:28:22,250 --> 00:28:25,365
Bạn thấy trình đơn này đã được tạo ra như thế nào.

384
00:28:25,365 --> 00:28:30,455
Nhìn vào mảng đối tượng JavaScript mà bạn đã thấy.

385
00:28:30,455 --> 00:28:35,250
Xem cách mỗi thuộc tính cho mảng đối tượng JavaScript đã được sử dụng và

386
00:28:35,250 --> 00:28:40,490
ánh xạ đến bốn mục trong danh sách của tôi.

387
00:28:40,490 --> 00:28:44,170
Nhìn vào cách các hình ảnh tương ứng đã được bao gồm ở đây

388
00:28:44,170 --> 00:28:48,430
bằng cách sử dụng MatlistaVatar ở đây.

389
00:28:48,430 --> 00:28:55,150
Vì vậy, điều này tạo ra hình ảnh tròn ở đây và sau đó lưu ý cách tên

390
00:28:55,150 --> 00:29:03,155
của món ăn được hiển thị ở đây và sau đó mô tả của món ăn bao gồm ở đây.

391
00:29:03,155 --> 00:29:09,010
Tuyệt vời. Bây giờ, chúng tôi có menu cho nhà hàng của chúng tôi trên

392
00:29:09,010 --> 00:29:14,925
màn hình bằng cách sử dụng một thành phần menu trong Angular.

393
00:29:14,925 --> 00:29:17,625
Điều này hoàn thành bài tập này.

394
00:29:17,625 --> 00:29:21,860
Trong bài tập này, chúng tôi đã học cách tạo ra một thành phần mới.

395
00:29:21,860 --> 00:29:25,165
thêm nó vào ứng dụng Angular của chúng tôi,

396
00:29:25,165 --> 00:29:28,270
làm thế nào để bao gồm thành phần đó vào mẫu của

397
00:29:28,270 --> 00:29:32,365
một thành phần khác để tạo ra hệ thống phân cấp của các thành phần.

398
00:29:32,365 --> 00:29:39,255
Sau đó, chúng tôi thấy làm thế nào chúng tôi có thể sử dụng bố cục flex góc và cũng

399
00:29:39,255 --> 00:29:42,700
là các thành phần thiết kế vật liệu để thiết kế

400
00:29:42,700 --> 00:29:47,560
mẫu cho thành phần menu của chúng tôi để hiển thị nội dung ở đây.

401
00:29:47,560 --> 00:29:52,710
Bây giờ, nếu anh hỏi tôi làm thế nào để tôi nhớ tất cả những điều này.

402
00:29:52,710 --> 00:29:54,535
Vâng, thành thật mà nói,

403
00:29:54,535 --> 00:29:59,435
bạn không thể nhớ tất cả mọi thứ nhưng bạn cần phải hiểu cách tiếp cận. Điều

404
00:29:59,435 --> 00:30:03,035
đó quan trọng hơn là cố gắng ghi nhớ bất cứ điều gì trong số những điều này.

405
00:30:03,035 --> 00:30:06,735
Bây giờ, nếu bạn hỏi tôi ở đâu để tôi có được thông tin về

406
00:30:06,735 --> 00:30:12,740
thành phần danh sách từ tài liệu góc cạnh.

407
00:30:12,740 --> 00:30:16,560
Chúng tôi có thể sắp xếp tài liệu góc cạnh và ở đó bạn

408
00:30:16,560 --> 00:30:21,005
sẽ có các chi tiết về cách một thành phần danh sách nên được chuẩn bị.

409
00:30:21,005 --> 00:30:29,405
Bây giờ, nơi nào chúng ta có được các chi tiết về cách chúng ta thiết kế một thành phần theo góc cạnh?

410
00:30:29,405 --> 00:30:33,240
Chúng tôi chỉ kiểm tra một chút về điều đó và sau đó trong bài tập này,

411
00:30:33,240 --> 00:30:41,080
chúng tôi đã học cách tạo ra một thành phần mới và sau đó áp dụng nó trong ứng dụng góc cạnh của chúng tôi.

412
00:30:41,080 --> 00:30:44,790
Vì vậy, đây là một điểm tốt để bạn có thể làm một

413
00:30:44,790 --> 00:30:48,905
nhận xét với các thành phần tin nhắn phần một.

414
00:30:48,905 --> 00:30:50,540
Trong bài tập tiếp theo,

415
00:30:50,540 --> 00:30:54,895
chúng tôi sẽ cải thiện điều này một chút hơn bằng cách sử dụng một loại

416
00:30:54,895 --> 00:31:00,920
thành phần vật liệu góc cạnh khác để đặt ra nội dung trên màn hình của tôi.