[MUSIC]
Dans l'exercice précédent, nous avons vu l'utilisation de notre première directive structurelle,
le NgFor.
Posons-nous quelques questions supplémentaires sur les directives structurelles et
apprenons comment elles sont utiles lorsque nous écrivons nos applications Angular.
Les directives structurelles sont une sorte de directives.
Donc les directives est un parapluie général sous lequel vous avez des composants,
alors vous avez des directives structurelles, puis vous avez des directives attributaires.
Alors apprenons un peu plus sur les directives.
Donc, ce que nous réalisons, c'est que les modèles Angular sont dynamiques, donc ils doivent être créés
à la volée, il y aura beaucoup de manipulation à faire sur le DOM.
Donc, ce que les directives nous aident, c'est de nous permettre de donner des instructions
à l'Angular sur la façon de rendre les modèles au DOM.
Donc, ils utilisent des directives pour donner des instructions
à Angular car il rend les modèles à l'écran.
Donc, en général, une directive peut être définie directement dans Angular en utilisant
une classe avec le décorateur @Directive.
Nous voyons bien un exemple de directive que nous pouvons nous-mêmes créer un peu plus tard dans ce cours.
Pour le moment, nous examinerons les directives de construction.
Et en particulier,
, nous avons déjà rencontré notre premier type de directive, qui est un élément.
Un composant est un type spécial de directive et
Angular, qui a son propre modèle associé.
Et nous avons déjà vu comment nous pouvons tirer parti d'un composant pour définir des parties
de notre mise en page pour l'écran de notre application.
Comme je l'ai mentionné, il existe deux autres types de directives dans les directives angulaires,
structurelles et attributaires.
Nous examinerons rapidement les directives structurelles dans cette leçon.
Et puis nous allons regarder les directives d'attribut un peu plus tard dans
ce cours.
Alors, qu'est-ce que les directives structurelles et comment sont-elles utiles pour nous ?
Ce que nous réalisons en utilisant des directives structurelles est,
ils nous aident à modifier la mise en page de notre contenu
en nous aidant à ajouter et supprimer des éléments du DOM.
Notons en particulier l'utilisation du terme add et
remove et remplacement des éléments dans le DOM.
Donc, vous utilisez littéralement les directives structurelles pour manipuler
votre DOM de votre page Web.
Ainsi, vous pouvez utiliser les directives structurelles en les appliquant à un élément hôte,
généralement un div ou un élément de liste dans le DOM et aussi à ses descendants.
Nous avons déjà vu l'utilisateur,
la directive structurelle ngFor, dans l'exercice précédent.
Et nous avons vu comment nous utilisons le NgFor pour parcourir une gamme de plats,
, puis mettre en page chacun d'eux pour construire le menu de notre restaurant.
Ici, je vais brièvement mentionner quelques-unes des directives structurelles communes que vous rencontrerez
lorsque vous écrivez votre partition angulaire.
L'une des directives structurelles les plus courantes que vous verrez est la directive nGiF
.
Lorsque vous l'utilisez dans la syntaxe de votre modèle, vous l'écrirez en tant que *nGIF,
donc c'est ainsi que cette directive est utilisée dans votre DOM.
Donc, par exemple, si vous appliquez la directive NGif à un div comme
dans cet exemple, ce que vous spécifiez où est que
si le SelectedDish n'est pas nul, alors cette div sera ajoutée au DOM.
Si ce SelectedDish est nul, alors ce div,
ce qui est contenu dans ce div ne sera pas ajouté au DOM, donc
vous supprimez littéralement ceci du DOM si la valeur s'avère fausse.
S'il s'avère vrai, alors il est ajouté dans le vidage.
De même, nous avons vu l'utilisation de la directive ngFor.
Donc, où nous avons défini, par exemple, pour le md-list-item dans l'exercice
précédent, nous avons dit *ngFor et dit, laissez plat de plats.
Cela nous permet donc d'itérer sur le tableau de plats
qui sont définis dans notre couche de script de type.
Une autre directive structurelle qui pourrait trouver une utilisation courante est la directive ngSwitch.
Bien que je n'ai pas d'exemple en ce moment,
plus tard dans ce cours, nous rencontrerons l'utilisation de la directive ngSwitch.
Cela vous permet d'ajouter sélectivement certains éléments au DOM
en spécifiant une condition, selon ce que la condition évalue,
alors vous utiliserez l'un de ces éléments dans la liste.
Si vous êtes familier avec l'instruction switch de C ++ ou Java,
le ngSwitch vous semble très familier.
Donc, il agira de la même manière que l'instruction switch à laquelle vous
êtes habitué à partir de Java ou C ++.
Avec la brève discussion sur les directives structurelles,
passons au prochain exercice où nous continuerons d'examiner les composantes.
[MUSIQUE]