1
00:00:00,000 --> 00:00:04,549
[MÚSICA]

2
00:00:04,549 --> 00:00:08,557
No primeiro módulo, revisamos brevemente as diretivas e

3
00:00:08,557 --> 00:00:11,590
olhamos para as diretivas estruturais.

4
00:00:11,590 --> 00:00:15,410
Vimos como as diretivas estruturais nos permitem projetar os modelos.

5
00:00:15,410 --> 00:00:17,880
Para os nossos componentes angulares.

6
00:00:17,880 --> 00:00:21,160
Nesta lição, vamos revisar diretivas de atributos.

7
00:00:21,160 --> 00:00:23,770
O terceiro tipo de directiva.

8
00:00:23,770 --> 00:00:28,790
E também vamos olhar para como podemos desenhar uma diretiva personalizada

9
00:00:28,790 --> 00:00:31,350
no exercício que segue esta palestra.

10
00:00:33,240 --> 00:00:37,490
Então, como percebemos, diretivas são uma maneira

11
00:00:37,490 --> 00:00:42,360
de projetar ambos os modelos angulares e nos permitem fazer

12
00:00:42,360 --> 00:00:47,820
várias partes da manipulação da barragem com um R Angular aplicações vistas.

13
00:00:47,820 --> 00:00:53,280
Então, vimos o uso de diretivas para dar instruções para a repetição Angular e

14
00:00:53,280 --> 00:00:56,750
como renderizar os modelos no DOM.

15
00:00:56,750 --> 00:01:01,090
E nós já aprendemos que dentro do aplicativo Angular,

16
00:01:01,090 --> 00:01:06,020
o uso de diretivas estruturais nos modelos nos permite projetar

17
00:01:06,020 --> 00:01:10,080
nossas visões de nossa aplicação Angular.

18
00:01:10,080 --> 00:01:15,060
Nós também aprendemos que o componente que temos usado tão

19
00:01:15,060 --> 00:01:20,640
extensivamente nos vários exercícios neste curso.

20
00:01:20,640 --> 00:01:26,410
É um tipo especial de directiva que tem um modelo ou uma vista anexada a ele.

21
00:01:27,430 --> 00:01:29,560
E também aprendemos anteriormente que,

22
00:01:29,560 --> 00:01:35,330
, existem dois outros tipos de diretivas que podemos usar em nossos modelos.

23
00:01:35,330 --> 00:01:39,390
As diretivas estruturais e atributos.

24
00:01:39,390 --> 00:01:44,060
Nós olhamos para algumas diretivas estruturais embutidas no primeiro módulo

25
00:01:44,060 --> 00:01:46,990
deste curso.

26
00:01:46,990 --> 00:01:52,380
E vimos como podemos usar diretivas estruturais como o NG4 ou NGF e

27
00:01:52,380 --> 00:01:59,060
mais em que exercícios nas partes anteriores deste curso.

28
00:01:59,060 --> 00:02:04,230
Agora vamos olhar para o outro tipo de diretiva, a diretiva de atributo.

29
00:02:04,230 --> 00:02:05,630
O que é uma diretiva de atributo e

30
00:02:05,630 --> 00:02:10,360
como ela nos ajuda ao projetar nosso aplicativo Angular.

31
00:02:10,360 --> 00:02:12,650
Então, o que são diretivas de atributos?As diretivas de atributo

32
00:02:12,650 --> 00:02:18,790
são usadas como atributos para elementos em seu modelo.

33
00:02:18,790 --> 00:02:23,460
Assim, assim como você tem o seu código HTML que você escreve dentro do seu modelo e

34
00:02:23,460 --> 00:02:26,900
os elementos HTML você pode aplicar uma diretiva de atributo

35
00:02:26,900 --> 00:02:28,410
a esses elementos HTML.

36
00:02:28,410 --> 00:02:31,940
Também vimos a diretiva estrutural do usuário.

37
00:02:31,940 --> 00:02:37,020
E vimos que os próprios componentes podem adicionar elementos adicionais de

38
00:02:37,020 --> 00:02:41,710
como HTML que podem ser usados dentro dos modelos do seu aplicativo Angular.

39
00:02:41,710 --> 00:02:45,510
Então, a maneira como usamos os componentes com seus seletores

40
00:02:45,510 --> 00:02:49,850
foi uma maneira que usamos diretivas dentro de nossa aplicação Angular.

41
00:02:49,850 --> 00:02:53,910
Quando vimos o uso de diretivas estruturais que foram aplicadas a

42
00:02:53,910 --> 00:02:58,890
os vários elementos HTML dentro do nosso modelo.

43
00:02:58,890 --> 00:03:02,590
Agora olhamos para diretivas de atributos que nos permitem alterar

44
00:03:02,590 --> 00:03:06,930
certas propriedades de nossos elementos HTML.

45
00:03:06,930 --> 00:03:09,480
Então, qual é o uso de diretivas de atributos?

46
00:03:09,480 --> 00:03:15,480
Diretivas de atributo escutam e modificam o comportamento de outros elementos HTML ou

47
00:03:15,480 --> 00:03:21,410
atributos ou propriedades ou componentes que você usa em seus modelos.

48
00:03:21,410 --> 00:03:25,630
Nós realmente usamos alguns dos built-in directiva atributos

49
00:03:25,630 --> 00:03:30,500
já sem falar explicitamente sobre eles.

50
00:03:30,500 --> 00:03:34,880
Falando sobre as diretivas de atributos incorporadas que vêm como parte da sua estrutura

51
00:03:34,880 --> 00:03:36,260
Angular.

52
00:03:36,260 --> 00:03:41,390
Você já encontrou modelo Ng em algumas das lições anteriores

53
00:03:41,390 --> 00:03:46,410
neste curso, especificamente na área de ligação de dados e

54
00:03:46,410 --> 00:03:52,620
também quando estudamos sobre as fontes no módulo anterior.

55
00:03:52,620 --> 00:03:55,520
Há dois outros tipos de diretivas de atributo embutidas que

56
00:03:55,520 --> 00:03:59,180
pode encontrar é ngClass e ngStyle.

57
00:03:59,180 --> 00:04:03,430
Pelo nome em si você pode adivinhar qual é o seu propósito.

58
00:04:03,430 --> 00:04:07,600
Da mesma forma, existem alguns outros módulos que você usa dentro de seus aplicativos Angular

59
00:04:07,600 --> 00:04:13,190
como o FormsModule e também o RouterModule que têm seu

60
00:04:13,190 --> 00:04:18,245
próprio conjunto de diretivas de atributo embutidas que fazemos uso.

61
00:04:18,245 --> 00:04:22,865
Na verdade, já fizemos uso deles quando definimos formulários e

62
00:04:22,865 --> 00:04:28,645
também o uso do roteador dentro da nossa aplicação Angular anteriormente.

63
00:04:28,645 --> 00:04:33,005
Agora, neste ponto, vocês podem estar se perguntando, como faço para criar minha diretiva de atributo próprio

64
00:04:33,005 --> 00:04:37,985
se estou interessado em criar uma diretiva personalizada, então

65
00:04:37,985 --> 00:04:44,950
é aqui que vamos olhar para como você pode derivar uma diretiva personalizada.

66
00:04:44,950 --> 00:04:50,470
Vamos explorar diretivas personalizadas no próximo slide brevemente e

67
00:04:50,470 --> 00:04:53,040
no exercício a seguir.

68
00:04:53,040 --> 00:04:57,280
Então, em diretivas personalizadas, sua expectativa é que você seria capaz de implementar

69
00:04:57,280 --> 00:04:58,990
o que você está interessado em.

70
00:04:58,990 --> 00:05:03,310
Em particular, então é aqui que podemos criar nossas próprias diretivas personalizadas.

71
00:05:03,310 --> 00:05:08,660
Usando o Angular CLI, você pode andaime o código Bare Bones para uma diretiva

72
00:05:08,660 --> 00:05:13,130
e, em seguida, modificar esse código para implementar sua diretiva personalizada.

73
00:05:13,130 --> 00:05:17,860
Então, quando você implementa uma diretiva personalizada usando Angular CLI,

74
00:05:17,860 --> 00:05:19,920
ela criará uma diretiva para você.

75
00:05:19,920 --> 00:05:24,490
E então você notará imediatamente que dentro da diretiva,

76
00:05:24,490 --> 00:05:29,880
você estará usando essa directiva decorador ornamentado classe

77
00:05:29,880 --> 00:05:35,290
, a fim de converter a classe em uma diretiva e

78
00:05:35,290 --> 00:05:39,410
vamos encontrar um tal no exercício que se segue.

79
00:05:39,410 --> 00:05:45,120
Além disso, com o director, especialmente quando você estiver usando diretivas de atributo e

80
00:05:45,120 --> 00:05:50,490
, você deseja modificar qualquer um dos elementos usados em seus modelos.

81
00:05:50,490 --> 00:05:55,560
Outra classe que é útil para nós é chamada ElementRef.

82
00:05:55,560 --> 00:06:00,740
Isso também é importante a partir do código Angular, e isso é injetado em seu construtor de directivas

83
00:06:00,740 --> 00:06:06,130
, escrito sua classe directiva.

84
00:06:06,130 --> 00:06:10,940
E então isso permite que você acesse os elementos DOM e

85
00:06:10,940 --> 00:06:13,580
, em seguida, faça modificações neles.

86
00:06:13,580 --> 00:06:18,137
Então, com esta rápida compreensão de como você pode criar diretivas personalizadas,

87
00:06:18,137 --> 00:06:22,351
vamos dar uma olhada em um exemplo no exercício que segue esta palestra.

88
00:06:22,351 --> 00:06:28,469
[MÚSICA]