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

2
00:00:04,549 --> 00:00:08,557
В самом первом модуле мы кратко рассмотрели директивы и

3
00:00:08,557 --> 00:00:11,590
мы смотрим на структурные директивы.

4
00:00:11,590 --> 00:00:15,410
Мы видели, как структурные директивы позволяют нам разрабатывать шаблоны.

5
00:00:15,410 --> 00:00:17,880
Для наших угловых компонентов.

6
00:00:17,880 --> 00:00:21,160
В этом уроке мы рассмотрим директивы атрибутов.

7
00:00:21,160 --> 00:00:23,770
Третий вид директивы.

8
00:00:23,770 --> 00:00:28,790
И мы также рассмотрим, как мы можем разработать пользовательскую директиву

9
00:00:28,790 --> 00:00:31,350
в упражнении, которое следует за этой лекцией.

10
00:00:33,240 --> 00:00:37,490
Итак, как мы поняли, директивы являются способом

11
00:00:37,490 --> 00:00:42,360
проектирования обоих угловых шаблонов и позволяют нам делать

12
00:00:42,360 --> 00:00:47,820
различные части манипуляции с дамбой с RAngular приложений представлений.

13
00:00:47,820 --> 00:00:53,280
Итак, мы видели использование директив для указания углового повторения и

14
00:00:53,280 --> 00:00:56,750
как рендеринга шаблонов в DOM.

15
00:00:56,750 --> 00:01:01,090
И мы уже узнали, что в угловом приложении

16
00:01:01,090 --> 00:01:06,020
использование структурных директив в шаблонах позволяет нам проектировать

17
00:01:06,020 --> 00:01:10,080
наши взгляды на наше угловое приложение.

18
00:01:10,080 --> 00:01:15,060
Мы также узнали, что компонент, который мы использовали так

19
00:01:15,060 --> 00:01:20,640
широко в различных упражнениях в этом курсе.

20
00:01:20,640 --> 00:01:26,410
Это особый вид директивы, который имеет шаблон или представление, прикрепленный к нему.

21
00:01:27,430 --> 00:01:29,560
И мы также узнали ранее, что

22
00:01:29,560 --> 00:01:35,330
есть два других вида директив, которые мы можем использовать в наших шаблонах.

23
00:01:35,330 --> 00:01:39,390
Структурные директивы и директивы атрибутов.

24
00:01:39,390 --> 00:01:44,060
Мы рассмотрели некоторые встроенные структурные директивы в самом первом модуле

25
00:01:44,060 --> 00:01:46,990
этого курса.

26
00:01:46,990 --> 00:01:52,380
И мы видели, как мы можем использовать структурные директивы, такие как NG4 или NGF и

27
00:01:52,380 --> 00:01:59,060
больше в этих упражнениях в предыдущих частях этого курса.

28
00:01:59,060 --> 00:02:04,230
Теперь мы рассмотрим другой вид директивы, атрибутивную директиву.

29
00:02:04,230 --> 00:02:05,630
Что такое директива атрибута и

30
00:02:05,630 --> 00:02:10,360
, как она помогает нам при разработке нашего углового приложения.

31
00:02:10,360 --> 00:02:12,650
Итак, что такое атрибутивные директивы?

32
00:02:12,650 --> 00:02:18,790
Директивы атрибутов используются в качестве атрибутов для элементов в вашем шаблоне.

33
00:02:18,790 --> 00:02:23,460
Так же, как у вас есть свой HTML-код, который вы пишете в своем шаблоне и

34
00:02:23,460 --> 00:02:26,900
элементы HTML, вы можете применить директиву атрибута

35
00:02:26,900 --> 00:02:28,410
к этим элементам HTML.

36
00:02:28,410 --> 00:02:31,940
Мы также видели структурную директиву пользователя.

37
00:02:31,940 --> 00:02:37,020
И мы видели, что компоненты сами могут добавлять дополнительные HTML-подобные

38
00:02:37,020 --> 00:02:41,710
элементы, которые могут быть использованы в шаблонах вашего Angular приложения.

39
00:02:41,710 --> 00:02:45,510
Таким образом, как мы используем компоненты с их селекторами

40
00:02:45,510 --> 00:02:49,850
был одним из способов использования директив в нашем угловом приложении.

41
00:02:49,850 --> 00:02:53,910
Когда мы увидели использование структурных директив, которые были применены к

42
00:02:53,910 --> 00:02:58,890
различных HTML элементов в нашем шаблоне.

43
00:02:58,890 --> 00:03:02,590
Теперь мы рассмотрим директивы атрибутов, которые позволяют нам изменять

44
00:03:02,590 --> 00:03:06,930
определенные свойства наших HTML-элементов.

45
00:03:06,930 --> 00:03:09,480
Итак, что такое использование директив атрибутов?

46
00:03:09,480 --> 00:03:15,480
Директивы атрибутов прослушивают и изменяют поведение других элементов HTML или

47
00:03:15,480 --> 00:03:21,410
атрибутов или свойств или компонентов, используемых в шаблонах.

48
00:03:21,410 --> 00:03:25,630
Мы действительно действительно использовали некоторые из встроенных атрибутов

49
00:03:25,630 --> 00:03:30,500
директивы уже без явного разговора о них.

50
00:03:30,500 --> 00:03:34,880
Говоря о встроенных атрибутивных директивах, которые входят в состав вашей

51
00:03:34,880 --> 00:03:36,260
Angular структуры.

52
00:03:36,260 --> 00:03:41,390
Вы уже сталкивались с моделью Ng в некоторых из предыдущих уроков

53
00:03:41,390 --> 00:03:46,410
в этом курсе, в частности в области привязки данных и

54
00:03:46,410 --> 00:03:52,620
также, когда мы изучали шрифты в предыдущем модуле.

55
00:03:52,620 --> 00:03:55,520
Есть два других типа встроенных атрибутивных директив, которые мы

56
00:03:55,520 --> 00:03:59,180
можем столкнуться - это NgClass и NgStyle.

57
00:03:59,180 --> 00:04:03,430
По самому названию можно догадаться, какова их цель.

58
00:04:03,430 --> 00:04:07,600
Аналогичным образом, есть некоторые другие модули, которые вы используете в ваших приложениях Angular

59
00:04:07,600 --> 00:04:18,245
, таких как FormsModule, а также RouterModule, которые имеют собственный набор встроенных директив атрибутов, которые мы используем.

60
00:04:18,245 --> 00:04:22,865
Действительно, мы уже использовали их, когда мы определяем формы и

61
00:04:22,865 --> 00:04:28,645
также использовать маршрутизатор в нашем угловом приложении ранее.

62
00:04:28,645 --> 00:04:33,005
Теперь, на данный момент, вам может быть интересно, как мне создать мою собственную директиву атрибутов

63
00:04:33,005 --> 00:04:37,985
, если я заинтересован в создании пользовательской директивы, поэтому

64
00:04:37,985 --> 00:04:44,950
это где мы рассмотрим, как вы можете получить пользовательскую директиву.

65
00:04:44,950 --> 00:04:50,470
Давайте рассмотрим пользовательские директивы в следующем слайде кратко и

66
00:04:50,470 --> 00:04:53,040
в следующем упражнении.

67
00:04:53,040 --> 00:04:57,280
Поэтому в пользовательских директивах ваше ожидание заключается в том, что вы сможете реализовать

68
00:04:57,280 --> 00:04:58,990
то, что вас интересует.

69
00:04:58,990 --> 00:05:03,310
В частности, вот где мы можем создавать свои собственные пользовательские директивы.

70
00:05:03,310 --> 00:05:08,660
Используя угловой интерфейс командной строки, вы можете выручить код голых костей для директивы

71
00:05:08,660 --> 00:05:13,130
и затем изменить этот код, чтобы реализовать вашу пользовательскую директиву.

72
00:05:13,130 --> 00:05:17,860
Поэтому, когда вы реализуете пользовательскую директиву с использованием Angular CLI,

73
00:05:17,860 --> 00:05:19,920
она создаст директиву для вас.

74
00:05:19,920 --> 00:05:24,490
И тогда вы сразу заметите, что в рамках директив,

75
00:05:24,490 --> 00:05:29,880
вы будете использовать этот директивный декоратор украсить класс

76
00:05:29,880 --> 00:05:35,290
для того, чтобы преобразовать класс в директиву и

77
00:05:35,290 --> 00:05:39,410
мы столкнемся с одним таким в упражнении, которое следует.

78
00:05:39,410 --> 00:05:45,120
Кроме того, с директором, особенно когда вы используете директивы атрибутов и

79
00:05:45,120 --> 00:05:50,490
вы хотите изменить любой из элементов, которые используются в ваших шаблонах.

80
00:05:50,490 --> 00:05:55,560
Другой класс, который нам полезен, называется ElementRef.

81
00:05:55,560 --> 00:06:00,740
Это также важно из углового кода, и это вводится в ваш конструктор директив

82
00:06:00,740 --> 00:06:06,130
, написанный вашим классом директивы.

83
00:06:06,130 --> 00:06:10,940
И тогда это позволяет вам получить доступ к элементам DOM и

84
00:06:10,940 --> 00:06:13,580
затем вносить в них изменения.

85
00:06:13,580 --> 00:06:18,137
Итак, с этим быстрым пониманием того, как вы можете создавать пользовательские директивы,

86
00:06:18,137 --> 00:06:22,351
давайте рассмотрим пример в упражнении, которое следует за этой лекцией.

87
00:06:22,351 --> 00:06:28,469
[МУЗЫКА]