[MÚSICA]
No exercício anterior, vimos a utilização da nossa primeira directiva estrutural,
a NGFor.
Vamos nos fazer mais algumas perguntas sobre diretivas estruturais e
aprender como elas são úteis quando escrevemos nossas aplicações angulares.
As directivas estruturais são um tipo de directivas.
Então diretivas é um guarda-chuva geral sob o qual você tem componentes,
então você tem diretivas estruturais, e então você tem diretivas de atributo.
Então vamos aprender um pouco mais sobre diretivas.
Então o que percebemos é que os modelos angulares são dinâmicos, então eles precisam ser
criados em tempo real, haverá muita manipulação a ser feita no DOM.
Então, o que as diretivas nos ajudam é permitir-nos dar instruções
ao Angular sobre como renderizar os modelos para o DOM.
Então, eles usam diretivas para dar instruções
para Angular como ele está renderizando os modelos na tela.
Então, em geral, uma diretiva pode ser definida diretamente em Angular usando
uma classe com o decorador @Directive.
Vemos bem um exemplo de uma directiva que podemos nós mesmos
criar um pouco mais tarde neste curso.
No momento, vamos olhar para as diretivas de construção.
E em particular,
já encontramos o nosso primeiro tipo de directiva, que é um componente.
Um componente é um tipo especial de diretiva e
Angular, que tem seu próprio modelo associado a ele.
E já vimos como podemos aproveitar um componente para definir
partes de nosso layout para a tela de nosso aplicativo.
Como mencionei, existem dois outros tipos de diretivas em Angular,
diretivas estruturais e atributos.
Examinaremos rapidamente as diretivas estruturais nesta lição.
E então vamos olhar para diretivas de atributos um pouco mais tarde em
este curso.
Então, o que são as directivas estruturais e como elas são úteis para nós?
O que percebemos ao usar diretivas estruturais são,
eles nos ajudam a alterar o layout do nosso conteúdo
, ajudando-nos a adicionar e remover elementos do DOM.
Em particular, observe o uso do termo add e
remove e substitui elementos no DOM.
Então você está literalmente usando as diretivas estruturais para manipular
seu DOM de sua página web.
Então, você pode usar as diretivas estruturais aplicando-as a um elemento host,
tipicamente um div ou um item de lista no DOM e também a seus descendentes.
Já vimos o usuário,
a diretiva estrutural NGfor, no exercício anterior.
E vimos como usamos o NGFor para percorrer uma variedade de pratos,
e depois colocar cada um deles para construir o menu para o nosso restaurante.
Aqui, vou mencionar brevemente algumas das diretivas estruturais comuns que você vai
encontrar ao escrever sua partição Angular.
Uma das diretivas estruturais mais comuns que você verá é a diretiva nGiF
.
Quando você usá-lo em sua sintaxe de template, você irá escrevê-lo como *nGIF,
então é assim que esta diretiva é usada em seu DOM.
Então, por exemplo, se você aplicar a diretiva nGIF a um div como
neste exemplo, o que você está especificando onde é que
se o selectedDish não for nulo, então este div será adicionado ao DOM.
Se esse SelectedDish for nulo, então este div,
o que estiver contido nesta div não será adicionado ao DOM, então
você está literalmente removendo isso do DOM se o valor for falso.
Se for verdade, então ele é adicionado ao despejo.
Da mesma forma, vimos o uso da diretiva NGFor.
Então, onde definimos, por exemplo, para o item md-list-no exercício anterior
dissemos *NGFor e disse, deixe prato de pratos.
Então, isso nos permite iterar sobre a matriz de pratos
que são definidos em nosso casaco de script tipo.
Outra diretiva estrutural que pode encontrar uso comum é a diretiva NGSwitch.
Embora eu não tenha um exemplo agora,
mais tarde neste curso vamos encontrar o uso da diretiva NGSwitch.
Isso permite que você adicione seletivamente certos elementos ao DOM
especificando uma condição, dependendo do que a condição for avaliada,
então você estará usando um desses elementos na lista.
Se você está familiarizado com a instrução switch de C++ ou Java,
o ngSwitch parece muito familiar para você.
Então ele vai agir de forma semelhante à instrução switch que você
estão acostumados a partir de Java ou C++.
Com a breve discussão sobre as directivas estruturais,
vamos passar para o próximo exercício onde vamos continuar a examinar componentes.
[MÚSICA]