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

2
00:00:04,518 --> 00:00:09,098
No exercício anterior, vimos a utilização da nossa primeira directiva estrutural,

3
00:00:09,098 --> 00:00:09,812
a NGFor.

4
00:00:09,812 --> 00:00:15,186
Vamos nos fazer mais algumas perguntas sobre diretivas estruturais e

5
00:00:15,186 --> 00:00:19,970
aprender como elas são úteis quando escrevemos nossas aplicações angulares.

6
00:00:22,000 --> 00:00:26,110
As directivas estruturais são um tipo de directivas.

7
00:00:26,110 --> 00:00:30,628
Então diretivas é um guarda-chuva geral sob o qual você tem componentes,

8
00:00:30,628 --> 00:00:35,847
então você tem diretivas estruturais, e então você tem diretivas de atributo.

9
00:00:35,847 --> 00:00:39,015
Então vamos aprender um pouco mais sobre diretivas.

10
00:00:39,015 --> 00:00:43,121
Então o que percebemos é que os modelos angulares são dinâmicos, então eles precisam ser

11
00:00:43,121 --> 00:00:47,379
criados em tempo real, haverá muita manipulação a ser feita no DOM.

12
00:00:47,379 --> 00:00:52,721
Então, o que as diretivas nos ajudam é permitir-nos dar instruções

13
00:00:52,721 --> 00:00:57,710
ao Angular sobre como renderizar os modelos para o DOM.

14
00:00:57,710 --> 00:01:00,900
Então, eles usam diretivas para dar instruções

15
00:01:00,900 --> 00:01:04,880
para Angular como ele está renderizando os modelos na tela.

16
00:01:04,880 --> 00:01:10,120
Então, em geral, uma diretiva pode ser definida diretamente em Angular usando

17
00:01:10,120 --> 00:01:14,520
uma classe com o decorador @Directive.

18
00:01:14,520 --> 00:01:19,044
Vemos bem um exemplo de uma directiva que podemos nós mesmos

19
00:01:19,044 --> 00:01:22,630
criar um pouco mais tarde neste curso.

20
00:01:22,630 --> 00:01:25,258
No momento, vamos olhar para as diretivas de construção.

21
00:01:25,258 --> 00:01:26,587
E em particular,

22
00:01:26,587 --> 00:01:32,650
já encontramos o nosso primeiro tipo de directiva, que é um componente.

23
00:01:32,650 --> 00:01:35,060
Um componente é um tipo especial de diretiva e

24
00:01:35,060 --> 00:01:39,800
Angular, que tem seu próprio modelo associado a ele.

25
00:01:39,800 --> 00:01:45,700
E já vimos como podemos aproveitar um componente para definir

26
00:01:45,700 --> 00:01:50,420
partes de nosso layout para a tela de nosso aplicativo.

27
00:01:51,910 --> 00:01:57,610
Como mencionei, existem dois outros tipos de diretivas em Angular,

28
00:01:57,610 --> 00:02:00,465
diretivas estruturais e atributos.

29
00:02:00,465 --> 00:02:05,138
Examinaremos rapidamente as diretivas estruturais nesta lição.

30
00:02:05,138 --> 00:02:09,359
E então vamos olhar para diretivas de atributos um pouco mais tarde em

31
00:02:09,359 --> 00:02:10,290
este curso.

32
00:02:11,400 --> 00:02:15,608
Então, o que são as directivas estruturais e como elas são úteis para nós?

33
00:02:15,608 --> 00:02:19,590
O que percebemos ao usar diretivas estruturais são,

34
00:02:19,590 --> 00:02:24,910
eles nos ajudam a alterar o layout do nosso conteúdo

35
00:02:24,910 --> 00:02:30,020
, ajudando-nos a adicionar e remover elementos do DOM.

36
00:02:30,020 --> 00:02:33,800
Em particular, observe o uso do termo add e

37
00:02:33,800 --> 00:02:37,460
remove e substitui elementos no DOM.

38
00:02:37,460 --> 00:02:41,720
Então você está literalmente usando as diretivas estruturais para manipular

39
00:02:41,720 --> 00:02:44,640
seu DOM de sua página web.

40
00:02:44,640 --> 00:02:51,124
Então, você pode usar as diretivas estruturais aplicando-as a um elemento host,

41
00:02:51,124 --> 00:02:56,738
tipicamente um div ou um item de lista no DOM e também a seus descendentes.

42
00:02:56,738 --> 00:02:59,435
Já vimos o usuário,

43
00:02:59,435 --> 00:03:04,840
a diretiva estrutural NGfor, no exercício anterior.

44
00:03:04,840 --> 00:03:11,650
E vimos como usamos o NGFor para percorrer uma variedade de pratos,

45
00:03:11,650 --> 00:03:17,020
e depois colocar cada um deles para construir o menu para o nosso restaurante.

46
00:03:18,480 --> 00:03:22,870
Aqui, vou mencionar brevemente algumas das diretivas estruturais comuns que você vai

47
00:03:22,870 --> 00:03:27,180
encontrar ao escrever sua partição Angular.

48
00:03:27,180 --> 00:03:31,520
Uma das diretivas estruturais mais comuns que você verá é a diretiva nGiF

49
00:03:31,520 --> 00:03:32,620
.

50
00:03:32,620 --> 00:03:40,710
Quando você usá-lo em sua sintaxe de template, você irá escrevê-lo como *nGIF,

51
00:03:40,710 --> 00:03:45,800
então é assim que esta diretiva é usada em seu DOM.

52
00:03:45,800 --> 00:03:50,973
Então, por exemplo, se você aplicar a diretiva nGIF a um div como

53
00:03:50,973 --> 00:03:56,050
neste exemplo, o que você está especificando onde é que

54
00:03:56,050 --> 00:04:01,845
se o selectedDish não for nulo, então este div será adicionado ao DOM.

55
00:04:01,845 --> 00:04:05,287
Se esse SelectedDish for nulo, então este div,

56
00:04:05,287 --> 00:04:10,053
o que estiver contido nesta div não será adicionado ao DOM, então

57
00:04:10,053 --> 00:04:15,965
você está literalmente removendo isso do DOM se o valor for falso.

58
00:04:15,965 --> 00:04:19,800
Se for verdade, então ele é adicionado ao despejo.

59
00:04:19,800 --> 00:04:24,280
Da mesma forma, vimos o uso da diretiva NGFor.

60
00:04:24,280 --> 00:04:29,580
Então, onde definimos, por exemplo, para o item md-list-no exercício anterior

61
00:04:29,580 --> 00:04:35,470
dissemos *NGFor e disse, deixe prato de pratos.

62
00:04:35,470 --> 00:04:40,750
Então, isso nos permite iterar sobre a matriz de pratos

63
00:04:40,750 --> 00:04:46,925
que são definidos em nosso casaco de script tipo.

64
00:04:46,925 --> 00:04:55,570
Outra diretiva estrutural que pode encontrar uso comum é a diretiva NGSwitch.

65
00:04:55,570 --> 00:04:57,840
Embora eu não tenha um exemplo agora,

66
00:04:57,840 --> 00:05:02,940
mais tarde neste curso vamos encontrar o uso da diretiva NGSwitch.

67
00:05:02,940 --> 00:05:07,080
Isso permite que você adicione seletivamente certos elementos ao DOM

68
00:05:07,080 --> 00:05:11,940
especificando uma condição, dependendo do que a condição for avaliada,

69
00:05:11,940 --> 00:05:17,060
então você estará usando um desses elementos na lista.

70
00:05:17,060 --> 00:05:21,858
Se você está familiarizado com a instrução switch de C++ ou Java,

71
00:05:21,858 --> 00:05:25,250
o ngSwitch parece muito familiar para você.

72
00:05:25,250 --> 00:05:29,710
Então ele vai agir de forma semelhante à instrução switch que você

73
00:05:29,710 --> 00:05:32,295
estão acostumados a partir de Java ou C++.

74
00:05:32,295 --> 00:05:35,675
Com a breve discussão sobre as directivas estruturais,

75
00:05:35,675 --> 00:05:40,748
vamos passar para o próximo exercício onde vamos continuar a examinar componentes.

76
00:05:40,748 --> 00:05:47,459
[MÚSICA]