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

2
00:00:04,518 --> 00:00:09,098
Dans l'exercice précédent, nous avons vu l'utilisation de notre première directive structurelle,

3
00:00:09,098 --> 00:00:09,812
le NgFor.

4
00:00:09,812 --> 00:00:15,186
Posons-nous quelques questions supplémentaires sur les directives structurelles et

5
00:00:15,186 --> 00:00:19,970
apprenons comment elles sont utiles lorsque nous écrivons nos applications Angular.

6
00:00:22,000 --> 00:00:26,110
Les directives structurelles sont une sorte de directives.

7
00:00:26,110 --> 00:00:30,628
Donc les directives est un parapluie général sous lequel vous avez des composants,

8
00:00:30,628 --> 00:00:35,847
alors vous avez des directives structurelles, puis vous avez des directives attributaires.

9
00:00:35,847 --> 00:00:39,015
Alors apprenons un peu plus sur les directives.

10
00:00:39,015 --> 00:00:43,121
Donc, ce que nous réalisons, c'est que les modèles Angular sont dynamiques, donc ils doivent être créés

11
00:00:43,121 --> 00:00:47,379
à la volée, il y aura beaucoup de manipulation à faire sur le DOM.

12
00:00:47,379 --> 00:00:52,721
Donc, ce que les directives nous aident, c'est de nous permettre de donner des instructions

13
00:00:52,721 --> 00:00:57,710
à l'Angular sur la façon de rendre les modèles au DOM.

14
00:00:57,710 --> 00:01:00,900
Donc, ils utilisent des directives pour donner des instructions

15
00:01:00,900 --> 00:01:04,880
à Angular car il rend les modèles à l'écran.

16
00:01:04,880 --> 00:01:10,120
Donc, en général, une directive peut être définie directement dans Angular en utilisant

17
00:01:10,120 --> 00:01:14,520
une classe avec le décorateur @Directive.

18
00:01:14,520 --> 00:01:22,630
Nous voyons bien un exemple de directive que nous pouvons nous-mêmes créer un peu plus tard dans ce cours.

19
00:01:22,630 --> 00:01:25,258
Pour le moment, nous examinerons les directives de construction.

20
00:01:25,258 --> 00:01:26,587
Et en particulier,

21
00:01:26,587 --> 00:01:32,650
, nous avons déjà rencontré notre premier type de directive, qui est un élément.

22
00:01:32,650 --> 00:01:35,060
Un composant est un type spécial de directive et

23
00:01:35,060 --> 00:01:39,800
Angular, qui a son propre modèle associé.

24
00:01:39,800 --> 00:01:45,700
Et nous avons déjà vu comment nous pouvons tirer parti d'un composant pour définir des parties

25
00:01:45,700 --> 00:01:50,420
de notre mise en page pour l'écran de notre application.

26
00:01:51,910 --> 00:01:57,610
Comme je l'ai mentionné, il existe deux autres types de directives dans les directives angulaires,

27
00:01:57,610 --> 00:02:00,465
structurelles et attributaires.

28
00:02:00,465 --> 00:02:05,138
Nous examinerons rapidement les directives structurelles dans cette leçon.

29
00:02:05,138 --> 00:02:09,359
Et puis nous allons regarder les directives d'attribut un peu plus tard dans

30
00:02:09,359 --> 00:02:10,290
ce cours.

31
00:02:11,400 --> 00:02:15,608
Alors, qu'est-ce que les directives structurelles et comment sont-elles utiles pour nous ?

32
00:02:15,608 --> 00:02:19,590
Ce que nous réalisons en utilisant des directives structurelles est,

33
00:02:19,590 --> 00:02:24,910
ils nous aident à modifier la mise en page de notre contenu

34
00:02:24,910 --> 00:02:30,020
en nous aidant à ajouter et supprimer des éléments du DOM.

35
00:02:30,020 --> 00:02:33,800
Notons en particulier l'utilisation du terme add et

36
00:02:33,800 --> 00:02:37,460
remove et remplacement des éléments dans le DOM.

37
00:02:37,460 --> 00:02:41,720
Donc, vous utilisez littéralement les directives structurelles pour manipuler

38
00:02:41,720 --> 00:02:44,640
votre DOM de votre page Web.

39
00:02:44,640 --> 00:02:51,124
Ainsi, vous pouvez utiliser les directives structurelles en les appliquant à un élément hôte,

40
00:02:51,124 --> 00:02:56,738
généralement un div ou un élément de liste dans le DOM et aussi à ses descendants.

41
00:02:56,738 --> 00:02:59,435
Nous avons déjà vu l'utilisateur,

42
00:02:59,435 --> 00:03:04,840
la directive structurelle ngFor, dans l'exercice précédent.

43
00:03:04,840 --> 00:03:11,650
Et nous avons vu comment nous utilisons le NgFor pour parcourir une gamme de plats,

44
00:03:11,650 --> 00:03:17,020
, puis mettre en page chacun d'eux pour construire le menu de notre restaurant.

45
00:03:18,480 --> 00:03:22,870
Ici, je vais brièvement mentionner quelques-unes des directives structurelles communes que vous rencontrerez

46
00:03:22,870 --> 00:03:27,180
lorsque vous écrivez votre partition angulaire.

47
00:03:27,180 --> 00:03:31,520
L'une des directives structurelles les plus courantes que vous verrez est la directive nGiF

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

49
00:03:32,620 --> 00:03:40,710
Lorsque vous l'utilisez dans la syntaxe de votre modèle, vous l'écrirez en tant que *nGIF,

50
00:03:40,710 --> 00:03:45,800
donc c'est ainsi que cette directive est utilisée dans votre DOM.

51
00:03:45,800 --> 00:03:50,973
Donc, par exemple, si vous appliquez la directive NGif à un div comme

52
00:03:50,973 --> 00:03:56,050
dans cet exemple, ce que vous spécifiez où est que

53
00:03:56,050 --> 00:04:01,845
si le SelectedDish n'est pas nul, alors cette div sera ajoutée au DOM.

54
00:04:01,845 --> 00:04:05,287
Si ce SelectedDish est nul, alors ce div,

55
00:04:05,287 --> 00:04:10,053
ce qui est contenu dans ce div ne sera pas ajouté au DOM, donc

56
00:04:10,053 --> 00:04:15,965
vous supprimez littéralement ceci du DOM si la valeur s'avère fausse.

57
00:04:15,965 --> 00:04:19,800
S'il s'avère vrai, alors il est ajouté dans le vidage.

58
00:04:19,800 --> 00:04:24,280
De même, nous avons vu l'utilisation de la directive ngFor.

59
00:04:24,280 --> 00:04:29,580
Donc, où nous avons défini, par exemple, pour le md-list-item dans l'exercice

60
00:04:29,580 --> 00:04:35,470
précédent, nous avons dit *ngFor et dit, laissez plat de plats.

61
00:04:35,470 --> 00:04:40,750
Cela nous permet donc d'itérer sur le tableau de plats

62
00:04:40,750 --> 00:04:46,925
qui sont définis dans notre couche de script de type.

63
00:04:46,925 --> 00:04:55,570
Une autre directive structurelle qui pourrait trouver une utilisation courante est la directive ngSwitch.

64
00:04:55,570 --> 00:04:57,840
Bien que je n'ai pas d'exemple en ce moment,

65
00:04:57,840 --> 00:05:02,940
plus tard dans ce cours, nous rencontrerons l'utilisation de la directive ngSwitch.

66
00:05:02,940 --> 00:05:07,080
Cela vous permet d'ajouter sélectivement certains éléments au DOM

67
00:05:07,080 --> 00:05:11,940
en spécifiant une condition, selon ce que la condition évalue,

68
00:05:11,940 --> 00:05:17,060
alors vous utiliserez l'un de ces éléments dans la liste.

69
00:05:17,060 --> 00:05:21,858
Si vous êtes familier avec l'instruction switch de C ++ ou Java,

70
00:05:21,858 --> 00:05:25,250
le ngSwitch vous semble très familier.

71
00:05:25,250 --> 00:05:29,710
Donc, il agira de la même manière que l'instruction switch à laquelle vous

72
00:05:29,710 --> 00:05:32,295
êtes habitué à partir de Java ou C ++.

73
00:05:32,295 --> 00:05:35,675
Avec la brève discussion sur les directives structurelles,

74
00:05:35,675 --> 00:05:40,748
passons au prochain exercice où nous continuerons d'examiner les composantes.

75
00:05:40,748 --> 00:05:47,459
[MUSIQUE]