1
00:00:00,000 --> 00:00:04,549
[MUSIC]

2
00:00:04,549 --> 00:00:08,557
Trong mô-đun đầu tiên, chúng tôi đã xem xét các chỉ thị ngắn gọn và

3
00:00:08,557 --> 00:00:11,590
chúng tôi xem xét các chỉ thị cấu trúc.

4
00:00:11,590 --> 00:00:15,410
Chúng tôi đã thấy cách các chỉ thị cấu trúc cho phép chúng tôi thiết kế các mẫu.

5
00:00:15,410 --> 00:00:17,880
Đối với các thành phần Angular của chúng tôi.

6
00:00:17,880 --> 00:00:21,160
Trong bài học này, chúng ta sẽ xem xét các chỉ thị thuộc tính.

7
00:00:21,160 --> 00:00:23,770
Loại thứ ba của chỉ thị.

8
00:00:23,770 --> 00:00:28,790
Và chúng ta cũng sẽ xem xét làm thế nào chúng ta có thể thiết kế một chỉ thị tùy chỉnh

9
00:00:28,790 --> 00:00:31,350
trong bài tập mà sau bài giảng này.

10
00:00:33,240 --> 00:00:37,490
Vì vậy, như chúng tôi nhận ra, chỉ thị là một cách

11
00:00:37,490 --> 00:00:42,360
thiết kế cả hai mẫu Angular và cho phép chúng tôi để làm

12
00:00:42,360 --> 00:00:47,820
các phần khác nhau của thao tác đập với một R Angular quan điểm ứng dụng.

13
00:00:47,820 --> 00:00:53,280
Vì vậy, chúng tôi đã thấy việc sử dụng các chỉ thị để đưa ra hướng dẫn cho sự lặp lại góc và

14
00:00:53,280 --> 00:00:56,750
làm thế nào để hiển thị các mẫu vào DOM.

15
00:00:56,750 --> 00:01:01,090
Và chúng tôi đã học được rằng trong ứng dụng Angular,

16
00:01:01,090 --> 00:01:06,020
việc sử dụng các chỉ thị cấu trúc trong các mẫu cho phép chúng

17
00:01:06,020 --> 00:01:10,080
tôi thiết kế quan điểm của chúng tôi về ứng dụng Angular của chúng tôi.

18
00:01:10,080 --> 00:01:15,060
Chúng tôi cũng học được rằng các thành phần mà chúng tôi đã sử dụng rất

19
00:01:15,060 --> 00:01:20,640
rộng rãi trong các bài tập khác nhau trong khóa học này.

20
00:01:20,640 --> 00:01:26,410
Nó là một loại chỉ thị đặc biệt trong đó có một mẫu hoặc một cái nhìn gắn liền với nó.

21
00:01:27,430 --> 00:01:29,560
Và chúng tôi cũng đã học được trước đó rằng,

22
00:01:29,560 --> 00:01:35,330
có hai loại chỉ thị khác mà chúng tôi có thể sử dụng trong các mẫu của chúng tôi.

23
00:01:35,330 --> 00:01:39,390
Các chỉ thị cấu trúc và thuộc tính chỉ thị.

24
00:01:39,390 --> 00:01:44,060
Chúng tôi đã xem xét một số chỉ thị cấu trúc tích hợp trong

25
00:01:44,060 --> 00:01:46,990
mô-đun đầu tiên của khóa học này.

26
00:01:46,990 --> 00:01:52,380
Và chúng tôi đã thấy cách chúng tôi có thể sử dụng các chỉ thị cấu trúc như NG4 hoặc NGF và

27
00:01:52,380 --> 00:01:59,060
nhiều hơn nữa trong các bài tập đó trong các phần trước của khóa học này.

28
00:01:59,060 --> 00:02:04,230
Bây giờ chúng ta sẽ xem xét các loại chỉ thị khác, chỉ thị thuộc tính.

29
00:02:04,230 --> 00:02:05,630
Chỉ thị thuộc tính là gì và

30
00:02:05,630 --> 00:02:10,360
nó giúp chúng tôi như thế nào khi thiết kế ứng dụng Angular của chúng tôi.

31
00:02:10,360 --> 00:02:12,650
Vậy các chỉ thị thuộc tính là gì?

32
00:02:12,650 --> 00:02:18,790
Chỉ thị thuộc tính được sử dụng làm thuộc tính cho các phần tử trong mẫu của bạn.

33
00:02:18,790 --> 00:02:23,460
Vì vậy, chỉ như thế mà bạn có mã HTML của bạn mà bạn viết trong mẫu của bạn và

34
00:02:23,460 --> 00:02:26,900
các yếu tố HTML bạn có thể áp dụng một chỉ thị thuộc tính

35
00:02:26,900 --> 00:02:28,410
cho những yếu tố HTML.

36
00:02:28,410 --> 00:02:31,940
Chúng tôi cũng đã thấy chỉ thị cấu trúc của người dùng.

37
00:02:31,940 --> 00:02:37,020
Và chúng tôi thấy các thành phần có thể tự thêm các

38
00:02:37,020 --> 00:02:41,710
yếu tố giống như HTML bổ sung có thể được sử dụng trong các mẫu của ứng dụng Angular của bạn.

39
00:02:41,710 --> 00:02:45,510
Vì vậy, cách chúng tôi sử dụng các thành phần với bộ chọn của chúng

40
00:02:45,510 --> 00:02:49,850
là một cách chúng tôi sử dụng các chỉ thị trong ứng dụng Angular của chúng tôi.

41
00:02:49,850 --> 00:02:53,910
Khi chúng ta thấy việc sử dụng các chỉ thị cấu trúc đã được áp dụng cho

42
00:02:53,910 --> 00:02:58,890
các yếu tố HTML khác nhau trong mẫu của chúng tôi.

43
00:02:58,890 --> 00:03:02,590
Bây giờ chúng ta nhìn vào các chỉ thị thuộc tính cho phép chúng ta thay đổi

44
00:03:02,590 --> 00:03:06,930
các thuộc tính nhất định của các phần tử HTML của chúng tôi.

45
00:03:06,930 --> 00:03:09,480
Vì vậy, việc sử dụng các chỉ thị thuộc tính là gì?

46
00:03:09,480 --> 00:03:15,480
Chỉ thị thuộc tính lắng nghe và sửa đổi hành vi của các phần tử HTML khác hoặc

47
00:03:15,480 --> 00:03:21,410
thuộc tính hoặc các thành phần mà bạn sử dụng trong mẫu của bạn.

48
00:03:21,410 --> 00:03:25,630
Chúng tôi đã thực sự thực sự sử dụng một số các

49
00:03:25,630 --> 00:03:30,500
thuộc tính được xây dựng trong chỉ thị đã mà không nói rõ ràng về chúng.

50
00:03:30,500 --> 00:03:34,880
Nói về các chỉ thị thuộc tính tích hợp sẵn mà đến như là một phần của

51
00:03:34,880 --> 00:03:36,260
khung Angular của bạn.

52
00:03:36,260 --> 00:03:41,390
Bạn đã gặp phải mô hình Ng trong một số bài học trước đây

53
00:03:41,390 --> 00:03:46,410
trong khóa học này, cụ thể là trong khu vực ràng buộc dữ liệu và

54
00:03:46,410 --> 00:03:52,620
cũng khi chúng tôi nghiên cứu về các phông chữ trong mô-đun trước đó.

55
00:03:52,620 --> 00:03:55,520
Có hai loại khác được xây dựng trong chỉ thị thuộc tính mà chúng ta

56
00:03:55,520 --> 00:03:59,180
có thể gặp phải là NGClass và NGStyle.

57
00:03:59,180 --> 00:04:03,430
Theo tên chính nó, bạn có thể đoán mục đích của họ là gì.

58
00:04:03,430 --> 00:04:07,600
Tương tự như vậy, có một số mô-đun khác mà bạn sử dụng trong

59
00:04:07,600 --> 00:04:13,190
các ứng dụng Angular của bạn như FormSmodule và cũng RouterModule có

60
00:04:13,190 --> 00:04:18,245
tập hợp riêng của họ các chỉ thị thuộc tính tích hợp mà chúng tôi sử dụng.

61
00:04:18,245 --> 00:04:22,865
Thật vậy, chúng tôi đã sử dụng chúng khi chúng tôi xác định các hình thức và

62
00:04:22,865 --> 00:04:28,645
cũng sử dụng router trong ứng dụng Angular của chúng tôi trước đó.

63
00:04:28,645 --> 00:04:33,005
Bây giờ, tại thời điểm này, bạn có thể tự hỏi, làm thế nào để tôi đi về tạo ra

64
00:04:33,005 --> 00:04:37,985
chỉ thị thuộc tính của riêng tôi nếu tôi quan tâm đến việc tạo ra một chỉ thị tùy chỉnh, vì vậy

65
00:04:37,985 --> 00:04:44,950
đây là nơi chúng ta sẽ xem xét làm thế nào bạn có thể lấy được một chỉ thị tùy chỉnh.

66
00:04:44,950 --> 00:04:50,470
Hãy khám phá các chỉ thị tùy chỉnh trong trang chiếu tiếp theo một thời gian ngắn và

67
00:04:50,470 --> 00:04:53,040
trong bài tập sau.

68
00:04:53,040 --> 00:04:57,280
Vì vậy, trong các chỉ thị tùy chỉnh mong đợi của bạn là bạn sẽ có thể thực hiện

69
00:04:57,280 --> 00:04:58,990
những gì bạn quan tâm.

70
00:04:58,990 --> 00:05:03,310
Đặc biệt, vì vậy đây là nơi chúng ta có thể tạo ra các chỉ thị tùy chỉnh của riêng mình.

71
00:05:03,310 --> 00:05:08,660
Sử dụng CLI góc, bạn có thể giàn giáo ra mã xương trần cho một chỉ thị

72
00:05:08,660 --> 00:05:13,130
và sau đó sửa đổi mã đó để thực hiện chỉ thị tùy chỉnh của bạn.

73
00:05:13,130 --> 00:05:17,860
Vì vậy, khi bạn thực hiện một chỉ thị tùy chỉnh bằng cách sử dụng Angular CLI,

74
00:05:17,860 --> 00:05:19,920
nó sẽ tạo ra một chỉ thị cho bạn.

75
00:05:19,920 --> 00:05:24,490
Và sau đó bạn sẽ ngay lập tức nhận thấy rằng trong chỉ thị,

76
00:05:24,490 --> 00:05:29,880
bạn sẽ được sử dụng rằng chỉ thị trang trí trang trí công phu

77
00:05:29,880 --> 00:05:35,290
lớp để chuyển đổi các lớp thành một chỉ thị và

78
00:05:35,290 --> 00:05:39,410
chúng ta sẽ gặp phải một trong những như vậy trong bài tập sau.

79
00:05:39,410 --> 00:05:45,120
Ngoài ra, với giám đốc, đặc biệt là khi bạn đang sử dụng chỉ thị thuộc tính và

80
00:05:45,120 --> 00:05:50,490
bạn muốn sửa đổi bất kỳ phần tử nào được sử dụng trong mẫu của bạn.

81
00:05:50,490 --> 00:05:55,560
Một lớp khác hữu ích cho chúng ta được gọi là ElemenTref.

82
00:05:55,560 --> 00:06:00,740
Điều này cũng quan trọng từ mã Angular, và điều này được tiêm vào

83
00:06:00,740 --> 00:06:06,130
constructor chỉ thị của bạn, viết lớp chỉ thị của bạn.

84
00:06:06,130 --> 00:06:10,940
Và sau đó điều này cho phép bạn truy cập vào các phần tử DOM và

85
00:06:10,940 --> 00:06:13,580
sau đó thực hiện sửa đổi cho chúng.

86
00:06:13,580 --> 00:06:18,137
Vì vậy, với sự hiểu biết nhanh chóng về cách bạn có thể tạo ra các chỉ thị tùy chỉnh,

87
00:06:18,137 --> 00:06:22,351
chúng ta hãy xem một ví dụ trong bài tập sau bài giảng này.

88
00:06:22,351 --> 00:06:28,469
[ NHẠC]