1
00:00:03,649 --> 00:00:10,244
Đã đến lúc bắt đầu bài tập đầu tiên trong khóa học này.

2
00:00:10,244 --> 00:00:14,564
Trong nhiệm vụ này, bạn sẽ được làm việc với các thành phần góc cạnh.

3
00:00:14,564 --> 00:00:18,172
Bạn sẽ tạo ra một thành phần mới được gọi là dishdetail

4
00:00:18,172 --> 00:00:21,690
để thêm nó vào ứng dụng góc cạnh của bạn,

5
00:00:21,690 --> 00:00:29,399
và bạn sẽ cập nhật mẫu của nó, để nó hiển thị các chi tiết của một món ăn cụ thể.

6
00:00:29,399 --> 00:00:37,645
Trước đó, trong bài tập trước, chúng tôi đã giới thiệu một thẻ vào thành phần menu của chúng tôi.

7
00:00:37,645 --> 00:00:41,954
Chúng tôi sẽ loại bỏ thẻ đó, và thay vào đó bao gồm các

8
00:00:41,954 --> 00:00:46,929
thành phần dishdetail ở vị trí của thẻ đó

9
00:00:46,929 --> 00:00:53,009
để các thành phần dishdetail sẽ có thể hiển thị thông tin của nó

10
00:00:53,009 --> 00:00:56,263
trong phần đó của màn hình.

11
00:00:56,263 --> 00:01:01,435
Nhiệm vụ đầu tiên của bạn là tạo ra thành phần dishdetail.

12
00:01:01,435 --> 00:01:08,060
Khi kết thúc nhiệm vụ đầu tiên, một khi bạn đã tạo ra thành phần dishdetail

13
00:01:08,060 --> 00:01:11,810
, sau đó, trong tập tin mẫu thành phần menu,

14
00:01:11,810 --> 00:01:18,020
bạn sẽ thay thế thẻ đó bằng cách chọn

15
00:01:18,020 --> 00:01:19,430
thành phần dishdetail trong

16
00:01:19,430 --> 00:01:23,510
đó, để các chi tiết của thành phần dishdetail sẽ được hiển thị

17
00:01:23,510 --> 00:01:27,579
ngay bên dưới trình đơn trong thành phần trình đơn.

18
00:01:27,579 --> 00:01:31,564
Chúng ta đã thấy làm thế nào bạn có thể thêm

19
00:01:31,564 --> 00:01:35,750
bộ chọn đó từ một thành phần vào một thành phần khác.

20
00:01:35,750 --> 00:01:37,693
Khi chúng tôi tạo thành phần menu,

21
00:01:37,693 --> 00:01:41,500
chúng tôi đưa vào thành phần ứng dụng,

22
00:01:41,500 --> 00:01:48,710
để vào cuối nhiệm vụ đầu tiên, đây sẽ là kết quả trên trình duyệt

23
00:01:48,710 --> 00:01:53,454
của bạn, ở đâu, thay vì thẻ hiển thị các chi tiết của món ăn,

24
00:01:53,454 --> 00:01:58,920
bạn sẽ thấy những từ gọi là “dishdetail works!” ở dưới cùng của trang.

25
00:01:58,920 --> 00:02:02,390
Một khi bạn hoàn thành điều này, sau đó bạn sẽ tải về

26
00:02:02,390 --> 00:02:09,349
một tập tin mẫu thành phần dishdetail cấu hình sẵn với một số mảnh bị thiếu,

27
00:02:09,349 --> 00:02:18,474
và sau đó thay thế vào vị trí trong mẫu của thành phần dishdetail của bạn.

28
00:02:18,474 --> 00:02:24,439
Một khi bạn thay thế mẫu của thành phần dishdetail được cung cấp,

29
00:02:24,439 --> 00:02:31,474
sau đó bạn sẽ thấy trang cập nhật như thế này.

30
00:02:31,474 --> 00:02:35,692
Vì vậy, bạn sẽ thấy hai phần trong trang ở đây, một phần trong đó nói

31
00:02:35,692 --> 00:02:39,480
“Hiển thị các chi tiết của món ăn ở đây.”

32
00:02:39,480 --> 00:02:43,909
Bạn sẽ sử dụng một thành phần thẻ để tạo ra các chi tiết của món ăn,

33
00:02:43,909 --> 00:02:47,145
và hiển thị món ăn đó ở đây.

34
00:02:47,145 --> 00:02:52,009
Ngoài ra, bạn cũng sẽ hiển thị một tập hợp các ý kiến về món ăn

35
00:02:52,009 --> 00:02:58,444
trong phần thứ hai của thành phần này ở đây.

36
00:02:58,444 --> 00:03:04,270
Bây giờ, để giúp bạn bắt đầu, trong hướng dẫn phân công,

37
00:03:04,270 --> 00:03:09,710
tôi đã cung cấp cho bạn một đối tượng JavaScript mới

38
00:03:09,710 --> 00:03:11,719
chứa các chi tiết của món ăn,

39
00:03:11,719 --> 00:03:15,770
bao gồm các ý kiến về món ăn đó.

40
00:03:15,770 --> 00:03:18,875
Bạn sẽ sử dụng thông tin đó để xây dựng

41
00:03:18,875 --> 00:03:21,740
hai: thành phần thẻ để hiển thị

42
00:03:21,740 --> 00:03:26,944
các chi tiết của món ăn, và danh sách các nhận xét ở đây.

43
00:03:26,944 --> 00:03:32,699
Nhiệm vụ thứ hai của bạn là sau đó cập nhật

44
00:03:32,699 --> 00:03:39,349
tập tin TypeScript của bạn để bao gồm các biến món ăn mới trong đó,

45
00:03:39,349 --> 00:03:45,379
và sau đó sử dụng biến món ăn với các thành phần thẻ,

46
00:03:45,379 --> 00:03:52,710
và sau đó chuẩn bị các thành phần thẻ ở đây để hiển thị các chi tiết của món ăn.

47
00:03:52,710 --> 00:03:55,400
Một khi bạn hoàn thành nhiệm vụ thứ hai,

48
00:03:55,400 --> 00:03:59,330
trong ứng dụng của bạn, bạn sẽ thấy rằng,

49
00:03:59,330 --> 00:04:04,699
ngay bên dưới menu, bạn sẽ thấy các chi tiết của

50
00:04:04,699 --> 00:04:09,590
thông tin món ăn được hiển thị trong một thẻ như thế này,

51
00:04:09,590 --> 00:04:13,520
vì vậy bạn có thể thấy tiêu đề, hình ảnh,

52
00:04:13,520 --> 00:04:17,129
và cũng là mô tả được thực hiện dưới đây.

53
00:04:17,129 --> 00:04:22,519
Bây giờ, sau khi bạn hoàn thành điều này, sau đó bạn sẽ chuyển sang nhiệm vụ thứ ba.

54
00:04:22,519 --> 00:04:29,120
Trong nhiệm vụ thứ ba, bạn sẽ sử dụng các nhận xét cũng được kèm theo bên trong

55
00:04:29,120 --> 00:04:35,239
món ăn mà chúng tôi đã cung cấp cho bạn trong đối tượng JavaScript,

56
00:04:35,239 --> 00:04:40,819
và sau đó sử dụng nó để xây dựng và hiển thị một danh sách các nhận xét ở đây.

57
00:04:40,819 --> 00:04:43,235
Khi kết thúc nhiệm vụ thứ ba,

58
00:04:43,235 --> 00:04:48,595
đây là những gì bạn sẽ thấy được hiển thị ở phía bên phải của món ăn của bạn.

59
00:04:48,595 --> 00:04:52,235
Bạn có thể thấy rằng bạn có một tiêu đề ở đây với

60
00:04:52,235 --> 00:04:54,019
từ “Nhận xét”,

61
00:04:54,019 --> 00:04:58,149
và sau đó bạn có một danh sách các nhận xét được hiển thị ở đây.

62
00:04:58,149 --> 00:05:03,480
Các thông tin để xây dựng các ý kiến này có sẵn bên trong

63
00:05:03,480 --> 00:05:07,699
đối tượng JavaScript món ăn mà chúng tôi đã cung cấp cho bạn.

64
00:05:07,699 --> 00:05:11,610
Đặc biệt, lưu ý rằng đây là nhận xét thực tế,

65
00:05:11,610 --> 00:05:15,505
đây là số sao được đưa ra cho nhận xét đó,

66
00:05:15,505 --> 00:05:21,259
và đây là nơi chúng tôi hiển thị tên tác giả với hai dấu gạch ngang ở phía trước,

67
00:05:21,259 --> 00:05:25,589
và lưu ý, ở cuối, chúng tôi hiển thị ngày ở đây.

68
00:05:25,589 --> 00:05:28,774
Để có thể xây dựng ngày này ở đây,

69
00:05:28,774 --> 00:05:33,600
bạn cần phải sử dụng một đường ống góc có tên là Date.

70
00:05:33,600 --> 00:05:37,610
Chúng tôi đã thấy việc sử dụng một đường ống tích hợp được gọi là chữ hoa

71
00:05:37,610 --> 00:05:39,939
trong bài tập trước đó,

72
00:05:39,939 --> 00:05:45,379
vì vậy bạn chỉ cần sử dụng đường ống Date để tạo

73
00:05:45,379 --> 00:05:50,660
ngày này được hiển thị ở bên phải tên của tác giả ở đây.

74
00:05:50,660 --> 00:05:53,839
Vì vậy, đó là những gợi ý để bạn bắt đầu với

75
00:05:53,839 --> 00:05:59,240
nhiệm vụ thứ ba này trong nhiệm vụ đầu tiên của bạn.

76
00:05:59,240 --> 00:06:02,849
Hãy vui vẻ hoàn thành nhiệm vụ đầu tiên.

77
00:06:02,849 --> 00:06:04,620
Bất kể tài nguyên nào bạn cần,

78
00:06:04,620 --> 00:06:09,980
tập tin mẫu đã hoàn thành một nửa cấu hình sẵn

79
00:06:09,980 --> 00:06:14,115
và đối tượng JavaScript món ăn đều có sẵn

80
00:06:14,115 --> 00:06:18,649
trong hướng dẫn cho nhiệm vụ này.