1
00:00:03,650 --> 00:00:09,520
Một ứng dụng Angular điển hình bao gồm nhiều thành phần.

2
00:00:09,520 --> 00:00:16,225
Các thành phần điều khiển một phần của màn hình được gọi là dạng xem trong Angular.

3
00:00:16,225 --> 00:00:21,840
Vì vậy, khi bạn tạo màn hình của bạn trên ứng dụng Angular của

4
00:00:21,840 --> 00:00:25,310
bạn, bạn có thể chia màn hình của bạn thành nhiều lượt xem,

5
00:00:25,310 --> 00:00:29,384
mỗi người trong số họ được điều khiển bởi một thành phần riêng biệt.

6
00:00:29,384 --> 00:00:31,200
Cho đến nay, trong ví dụ,

7
00:00:31,200 --> 00:00:35,715
chúng ta có một thành phần gốc duy nhất điều khiển toàn bộ màn hình.

8
00:00:35,715 --> 00:00:42,440
Trong bài học này, chúng ta sẽ thêm vào một thành phần nữa mà mất một phần của màn hình và

9
00:00:42,440 --> 00:00:45,890
kiểm soát phần đó của màn hình và chăm sóc

10
00:00:45,890 --> 00:00:50,275
toàn bộ kết xuất của phần đó của màn hình, ở đây.

11
00:00:50,275 --> 00:00:54,060
Hãy truy cập nhanh vào thành phần ứng dụng mà

12
00:00:54,060 --> 00:00:57,350
chúng tôi đã có như là một phần của ứng dụng Angular của chúng tôi.

13
00:00:57,350 --> 00:00:58,730
Vì vậy, trong thành phần này,

14
00:00:58,730 --> 00:01:04,250
bạn có thể thấy rằng chúng ta đang nhập khẩu thành phần từ lõi Angular.

15
00:01:04,250 --> 00:01:07,100
Vì vậy, điều này cung cấp cho chúng ta khả năng để

16
00:01:07,100 --> 00:01:11,585
xác định một trang trí thành phần và áp dụng nó cho lớp của chúng tôi.

17
00:01:11,585 --> 00:01:16,640
Vì vậy, điều này sẽ xác định một thành phần tạo thành một phần của ứng dụng Angular của chúng tôi.

18
00:01:16,640 --> 00:01:19,590
Vì vậy, ở đây, thành phần đặc biệt này,

19
00:01:19,590 --> 00:01:22,970
như bạn có thể thấy, khi bạn xác định bộ trang trí thành phần,

20
00:01:22,970 --> 00:01:30,450
nó bao gồm một số thuộc tính ở đây một trong số họ là bộ chọn, ở đây.

21
00:01:30,450 --> 00:01:36,375
Bây giờ, thuộc tính chọn cụ thể này định nghĩa một chuỗi ở đây.

22
00:01:36,375 --> 00:01:40,010
Lưu ý, đặc biệt, những gì được chứa bên trong chuỗi.

23
00:01:40,010 --> 00:01:42,080
Nó nói là ứng dụng gốc.

24
00:01:42,080 --> 00:01:46,270
Bây giờ, nhìn lại tập tin index.html.

25
00:01:46,270 --> 00:01:48,915
Vì vậy, tôi sẽ tập tin index.html.

26
00:01:48,915 --> 00:01:51,400
Bạn có thể thấy rằng ngay tại đó,

27
00:01:51,400 --> 00:02:00,570
chúng tôi đang sử dụng ứng dụng root này như là một trong những thẻ trong tập tin index.html của chúng tôi.

28
00:02:00,570 --> 00:02:05,630
Vì vậy, bây giờ bạn thấy rằng thẻ cụ thể này mà bạn đang sử dụng đề cập

29
00:02:05,630 --> 00:02:11,270
đến bộ chọn của những gì chúng tôi đã chỉ định ở đây, app-root.

30
00:02:11,270 --> 00:02:18,500
Vì vậy, nếu bạn muốn cung cấp cho một phần của màn hình và làm cho điều đó có thể điều khiển bởi một thành phần,

31
00:02:18,500 --> 00:02:23,135
sau đó bạn sử dụng bộ chọn để xác định và sau đó bạn sẽ bao gồm

32
00:02:23,135 --> 00:02:28,310
các thẻ chọn vào tập tin HTML của bạn.

33
00:02:28,310 --> 00:02:32,190
Điều tương tự cũng áp dụng cho các mẫu của một thành phần.

34
00:02:32,190 --> 00:02:35,330
Nếu bạn bao gồm một bộ chọn khác từ một

35
00:02:35,330 --> 00:02:39,350
thành phần khác vào mẫu của thành phần này,

36
00:02:39,350 --> 00:02:42,770
thì phần đó của màn hình sẽ được bàn giao cho

37
00:02:42,770 --> 00:02:46,440
thành phần thứ hai được điều khiển từ thành phần thứ hai.

38
00:02:46,440 --> 00:02:52,304
Chúng ta cũng sẽ tìm hiểu về điều đó trong một trong những bài học sau này.

39
00:02:52,304 --> 00:02:57,970
Bây giờ, phần thứ hai mà bạn thấy được chỉ định là TemplateUrl.

40
00:02:57,970 --> 00:03:06,560
TemplateURL này chỉ định tên của tập tin mẫu cho thành phần cụ thể này.

41
00:03:06,560 --> 00:03:10,970
Vì vậy, trong trường hợp này, như bạn thấy, đây là app.component.html.

42
00:03:10,970 --> 00:03:14,720
Vì vậy, đó là lý do tại sao mẫu đang được xác định trong

43
00:03:14,720 --> 00:03:19,605
tệp app.component.html cho thành phần cụ thể này.

44
00:03:19,605 --> 00:03:25,270
Ngoài ra, bạn cũng có thể cung cấp các kiểu cho ứng dụng này.

45
00:03:25,270 --> 00:03:30,105
Vì vậy, ở đây chúng ta đang nói StyleUrls và sau đó ở đây,

46
00:03:30,105 --> 00:03:36,610
trong dấu ngoặc vuông bạn đang cung cấp câu nói này. /app.component.scss.

47
00:03:36,610 --> 00:03:44,175
Vì vậy, có nghĩa là tập tin SaaS cụ thể này được áp dụng cho phong cách này.

48
00:03:44,175 --> 00:03:48,620
Vì vậy, như bạn đã thấy khi chúng tôi tạo ra ứng dụng Angular của chúng

49
00:03:48,620 --> 00:03:53,970
tôi, tôi đã chỉ định để định dạng phong cách mà tôi sẽ sử dụng là một SCSS.

50
00:03:53,970 --> 00:03:56,650
Vì vậy, đó là lý do tại sao các tập tin này là SCSS.

51
00:03:56,650 --> 00:04:01,190
Nếu bạn không sử dụng phong cách SCSS và thay vào đó tạo bình thường,

52
00:04:01,190 --> 00:04:06,860
sau đó đây sẽ chỉ là các tập tin CSS và sau đó bạn có thể sử dụng CSS để xác định

53
00:04:06,860 --> 00:04:16,020
các phong cách có thể được sử dụng trong các mẫu ứng dụng của bạn hoặc trong các mẫu thành phần của bạn.

54
00:04:16,020 --> 00:04:19,820
Vì vậy, nếu bạn có bất kỳ

55
00:04:19,820 --> 00:04:23,000
phong cách cụ thể thành phần mà bạn muốn bao gồm cho thành phần cụ thể này,

56
00:04:23,000 --> 00:04:25,565
sau đó bạn sẽ bao gồm chúng trong tập tin này.

57
00:04:25,565 --> 00:04:29,965
Bạn cũng có thể chỉ định mẫu và kiểu nội tuyến.

58
00:04:29,965 --> 00:04:33,280
Vì vậy, nếu bạn chỉ định phong cách hoặc mẫu nội tuyến,

59
00:04:33,280 --> 00:04:37,785
bạn chỉ cần chỉ định rằng như với dấu ngoặc kép ngược.

60
00:04:37,785 --> 00:04:40,080
Vì vậy, ví dụ, tôi có thể đơn giản,

61
00:04:40,080 --> 00:04:42,520
thay vì làm TemplateURL,

62
00:04:42,520 --> 00:04:47,180
tôi chỉ có thể chỉnh sửa này để mẫu và

63
00:04:47,180 --> 00:04:52,475
sau đó tôi sẽ xác định mẫu trong dấu ngoặc kép trở lại đây.

64
00:04:52,475 --> 00:04:59,420
Vì vậy, tôi sẽ nói và trong trở lại qootes tôi thậm chí có thể làm các mẫu như thế này.

65
00:04:59,420 --> 00:05:07,360
Vì vậy, tôi có thể nói h1 và sau đó tiêu đề.

66
00:05:07,360 --> 00:05:17,060
Vì vậy, đây sẽ là những gì chúng tôi gọi là mẫu nội tuyến mà chúng tôi sử dụng trong ứng dụng của chúng tôi.

67
00:05:17,060 --> 00:05:19,280
Bây giờ, nếu bạn sử dụng dấu ngoặc kép trở lại,

68
00:05:19,280 --> 00:05:23,690
bạn cũng có thể sử dụng những thứ như đô la thêm vào

69
00:05:23,690 --> 00:05:28,955
để sử dụng các biến trong các mẫu của bạn và vân vân.

70
00:05:28,955 --> 00:05:31,235
Trong khóa học đặc biệt này,

71
00:05:31,235 --> 00:05:34,820
chúng tôi sẽ sử dụng các tập tin mẫu riêng biệt

72
00:05:34,820 --> 00:05:39,590
và tạo các mẫu trong các tập tin HTML thay thế.

73
00:05:39,590 --> 00:05:45,050
Tôi thích phương pháp xác định các mẫu của tôi hơn là làm các mẫu nội tuyến.

74
00:05:45,050 --> 00:05:49,180
Nhưng nếu mẫu của bạn là rất đơn giản và chỉ chứa hai hoặc ba dòng,

75
00:05:49,180 --> 00:05:56,235
sau đó bằng tất cả các phương tiện sử dụng một mẫu nội tuyến như thế này trong ứng dụng của bạn.

76
00:05:56,235 --> 00:06:02,930
Vì vậy, để tôi thay đổi nó trở lại giá trị ban đầu của tôi ở đây.

77
00:06:02,930 --> 00:06:04,770
Cũng vậy với phong cách.

78
00:06:04,770 --> 00:06:08,240
Ngoài ra, tôi chỉ có thể nói phong cách và sau đó trong dấu ngoặc kép trở lại

79
00:06:08,240 --> 00:06:12,500
bao gồm các lớp CSS của tôi trong dấu ngoặc kép trở lại.

80
00:06:12,500 --> 00:06:15,245
Mặc dù như tôi đã đề cập,

81
00:06:15,245 --> 00:06:24,895
tôi thích giữ chúng trong các tập tin riêng biệt chỉ vì có mã sạch trong các tập tin.t của tôi ở đây.

82
00:06:24,895 --> 00:06:27,515
Vì vậy, chúng tôi có phong cách mẫu chọn.

83
00:06:27,515 --> 00:06:30,010
Chúng tôi cũng sẽ có một cái gọi là mô-đun ID.

84
00:06:30,010 --> 00:06:33,020
Tại thời điểm này tôi không sử dụng nó cho thành phần của tôi,

85
00:06:33,020 --> 00:06:40,395
nhưng trong một số trường hợp, bạn sẽ cần phải chỉ định ID mô-đun một cách rõ ràng cho thành phần của bạn.

86
00:06:40,395 --> 00:06:44,610
Chúng ta sẽ thấy một số ví dụ về điều đó một chút sau đó.

87
00:06:44,610 --> 00:06:50,955
Bây giờ ngoài ra, một thành phần là không có gì ngoài một lớp JavaScript hoặc một lớp Type Script.

88
00:06:50,955 --> 00:06:53,615
Vì vậy, đó là lý do tại sao bạn thấy ở đây,

89
00:06:53,615 --> 00:06:58,960
xác định một lớp nói AppComponent và sau đó bạn đang xuất khẩu lớp này.

90
00:06:58,960 --> 00:07:01,820
Lý do tại sao chúng tôi sử dụng xuất khẩu ở đây,

91
00:07:01,820 --> 00:07:06,820
để thành phần này có thể được nhập khẩu vào mô-đun ứng dụng của tôi.

92
00:07:06,820 --> 00:07:10,070
Vì vậy, bạn đã thấy rằng chúng tôi đang nhập khẩu này vào mô-đun ứng dụng của tôi.

93
00:07:10,070 --> 00:07:18,350
Vì vậy, bất cứ khi nào bạn muốn thực hiện bất kỳ thành phần hoặc một mô-đun trong di động trong mô-đun khác,

94
00:07:18,350 --> 00:07:25,245
sau đó bạn sẽ luôn luôn prepend xuất vào lớp ở đây.

95
00:07:25,245 --> 00:07:28,040
Vì vậy, ngoài ra, cũng,

96
00:07:28,040 --> 00:07:34,295
chúng ta thấy rằng chúng ta có một số thuộc tính địa phương mà chúng tôi xác định

97
00:07:34,295 --> 00:07:43,220
bên trong các lớp học của chúng tôi ở đây và những sẽ có thể truy cập thông qua mẫu của tôi.

98
00:07:43,220 --> 00:07:45,340
Vì vậy, tôi có thể sử dụng những điều này trong mẫu của tôi.

99
00:07:45,340 --> 00:07:48,170
Vì vậy, các thuộc tính được xác định bên trong

100
00:07:48,170 --> 00:07:53,230
tập tin component của tôi có thể truy cập từ các tập tin mẫu của tôi.

101
00:07:53,230 --> 00:08:00,875
Chúng ta sẽ nói về các aspector ràng buộc dữ liệu một chút sau đó trong một bài học khác.

102
00:08:00,875 --> 00:08:08,075
Tóm lại, những gì chúng ta đã học được cho đến nay là một thành phần được định nghĩa bằng cách xác

103
00:08:08,075 --> 00:08:15,990
định mã và cũng chỉ định mẫu tương ứng.

104
00:08:15,990 --> 00:08:19,850
Vì vậy, bên trong mã bạn có thể xác định các thuộc tính và phương thức

105
00:08:19,850 --> 00:08:24,455
sẽ có thể truy cập từ mẫu của bạn từ mẫu tương ứng.

106
00:08:24,455 --> 00:08:26,530
Vì vậy, như bạn đã thấy, trong siêu dữ liệu,

107
00:08:26,530 --> 00:08:29,370
trong trang trí, trong trang trí thành phần,

108
00:08:29,370 --> 00:08:33,425
bạn chỉ định tên tệp mẫu là một trong những

109
00:08:33,425 --> 00:08:38,380
thuộc tính cho lớp thành phần của bạn ở đây.

110
00:08:38,380 --> 00:08:41,870
Tương tự như vậy, bất kỳ thuộc tính và phương thức mà bạn xác định trong

111
00:08:41,870 --> 00:08:45,875
thành phần của bạn sẽ có thể truy cập từ mẫu của bạn.

112
00:08:45,875 --> 00:08:49,645
Không chỉ vậy, bạn cũng có thể có những gì được gọi là sự kiện

113
00:08:49,645 --> 00:08:53,450
ràng buộc từ mẫu của bạn trở lại thành phần của bạn.

114
00:08:53,450 --> 00:08:57,320
Vì vậy, nếu bất kỳ sự kiện nào được tạo ra trong các mẫu của bạn, ví dụ,

115
00:08:57,320 --> 00:09:02,180
nhấp vào một nút trên mẫu của bạn có thể kích hoạt các

116
00:09:02,180 --> 00:09:08,535
cuộc gọi đến

117
00:09:08,535 --> 00:09:11,400
các phương thức bên trong mã của bạn ở đây, Javascript hoặc mã Type Script ở đây.

118
00:09:11,400 --> 00:09:16,790
Chúng ta sẽ thấy việc sử dụng chúng trong một trong những bài học sau này và sau đó, tôi sẽ, một lần nữa, xem

119
00:09:16,790 --> 00:09:20,180
lại điểm này về ràng buộc tài sản và ràng buộc sự kiện,

120
00:09:20,180 --> 00:09:23,500
và giải thích điều này cho bạn một chút chi tiết hơn.

121
00:09:23,500 --> 00:09:29,840
Các thành phần trong một ứng dụng Angular có thể tự tổ chức thành một hệ thống phân cấp.

122
00:09:29,840 --> 00:09:32,470
Vì vậy, bạn sẽ luôn luôn có một thành phần gốc.

123
00:09:32,470 --> 00:09:33,835
Vì vậy, đối với ứng dụng của chúng tôi,

124
00:09:33,835 --> 00:09:37,130
tập tin app.component.t và

125
00:09:37,130 --> 00:09:43,039
mẫu HTML tương ứng tạo thành phần gốc cho ứng dụng của chúng tôi

126
00:09:43,039 --> 00:09:46,724
và thành phần gốc này sau đó có thể chứa các

127
00:09:46,724 --> 00:09:52,825
thành phần xuống trong một hệ thống phân cấp và có thể bao gồm các thành phần trong hệ thống phân cấp.

128
00:09:52,825 --> 00:09:56,750
Chúng ta sẽ thấy rằng trong bài tập tiếp theo,

129
00:09:56,750 --> 00:10:02,275
nơi chúng ta sẽ tạo ra một thành phần khác và sau đó sử dụng nó trong thành phần gốc của chúng tôi.

130
00:10:02,275 --> 00:10:04,960
Vì vậy, bạn có thể có nhiều thành phần được

131
00:10:04,960 --> 00:10:08,005
đưa vào thành phần gốc của bạn và

132
00:10:08,005 --> 00:10:13,690
các thành phần này lần lượt có thể sử dụng các thành phần khác được bao gồm bên trong chúng.

133
00:10:13,690 --> 00:10:21,075
Vì vậy, hệ thống phân cấp của các thành phần là những gì cho phép bạn thiết kế màn hình ứng dụng của bạn.

134
00:10:21,075 --> 00:10:24,940
Với sự hiểu biết nhanh chóng về các thành phần

135
00:10:24,940 --> 00:10:28,810
và làm thế nào các thành phần hữu ích cho việc thiết kế ứng dụng của

136
00:10:28,810 --> 00:10:32,935
chúng tôi, bây giờ chúng tôi sẽ đi vào bài tập tiếp theo của chúng tôi, nơi chúng tôi sẽ tạo ra

137
00:10:32,935 --> 00:10:37,339
và thêm một thành phần khác vào ứng dụng Angular của chúng tôi

138
00:10:37,339 --> 00:10:41,810
và sau đó chúng tôi sẽ xác định một mẫu cho thành phần đó và sau đó chúng tôi sẽ sử dụng thành phần

139
00:10:41,810 --> 00:10:47,230
đó bên trong thành phần gốc của chúng tôi để thiết kế màn hình của chúng tôi.