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

2
00:00:04,599 --> 00:00:09,853
Nous venons de créer notre première application Angular dans l'exercice précédent.

3
00:00:09,853 --> 00:00:13,758
Vous devez vous demander, à quoi ressemble une application Angular typique ?

4
00:00:13,758 --> 00:00:16,345
Quelle est sa structure et son architecture, et

5
00:00:16,345 --> 00:00:18,669
comment construire une application Angular ?

6
00:00:19,800 --> 00:00:25,560
Parlons pas à pas de ces choses, en commençant par cette conférence.

7
00:00:27,390 --> 00:00:34,280
Jetez un coup d'œil au dossier de l'application, dans un éditeur.

8
00:00:34,280 --> 00:00:39,469
Vous remarquez immédiatement que l'Angular CLI a créé tout un tas de fichiers

9
00:00:40,530 --> 00:00:45,820
dans différents dossiers de notre application.

10
00:00:47,260 --> 00:00:50,240
Que contiennent ces fichiers ?

11
00:00:50,240 --> 00:00:53,930
Comment constituent-ils une application Angular ?

12
00:00:53,930 --> 00:00:58,832
Examinons-les étape par étape pour comprendre l'architecture typique de

13
00:00:58,832 --> 00:01:00,556
une application Angular.

14
00:01:00,556 --> 00:01:03,688
Comme nous l'avons déjà réalisé,

15
00:01:03,688 --> 00:01:08,828
applications angulaires sont construites comme une combinaison

16
00:01:08,828 --> 00:01:13,727
de HTML et soit TypeScript ou JavaScript.

17
00:01:13,727 --> 00:01:18,735
Dans ce cours, nous allons utiliser TypeScript comme langue de choix pour

18
00:01:18,735 --> 00:01:21,169
construire notre application Angular.

19
00:01:21,169 --> 00:01:25,146
Angular lui-même se compose de plusieurs bibliothèques,

20
00:01:25,146 --> 00:01:30,585
certaines d'entre elles appelées bibliothèques et d'autres sont des bibliothèques optionnelles.

21
00:01:30,585 --> 00:01:35,389
Selon le type d'application Angular que vous essayez de construire,

22
00:01:35,389 --> 00:01:38,910
vous en inclurez quelques-unes dans votre application.

23
00:01:38,910 --> 00:01:44,510
Comme nous l'avons déjà appris, Angular est un framework JavaScript et

24
00:01:44,510 --> 00:01:48,610
nous allons tirer parti de cela pour construire notre application.

25
00:01:49,715 --> 00:01:56,800
Pour résumer, l'application Angular est modulaire dans sa nature et se compose de

26
00:01:56,800 --> 00:02:03,160
plusieurs composants, ainsi que leurs modèles, qui composent l'application.

27
00:02:03,160 --> 00:02:09,090
Non seulement cela, ces composants, et d'autres parties de l'application Angular, comme les services

28
00:02:09,090 --> 00:02:13,060
, seront organisés en modules.

29
00:02:13,060 --> 00:02:18,892
Et ces modules, à leur tour, seront utilisés par des modules de niveau supérieur.

30
00:02:18,892 --> 00:02:23,889
Ainsi, vous pouvez regarder une application Angular étant une architecture

31
00:02:23,889 --> 00:02:27,822
modulaire avec un module racine en haut,

32
00:02:27,822 --> 00:02:34,966
qui prend l'aide d'autres modules organisés dans votre hiérarchie de modélisation.

33
00:02:34,966 --> 00:02:41,170
Examinons notre application pour comprendre comment cela est créé.

34
00:02:41,170 --> 00:02:45,550
Avant de procéder, le module racine par défaut

35
00:02:45,550 --> 00:02:50,810
dans Angular est généralement nommé le module d'application.

36
00:02:50,810 --> 00:02:55,970
En allant à notre code, commençons notre voyage et index.html.

37
00:02:55,970 --> 00:03:03,519
Donc, dans ce fichier index.html, vous pouvez voir que nous avons le code html typique ici,

38
00:03:03,519 --> 00:03:09,079
avec cette ligne particulière qui dit app-root.

39
00:03:09,079 --> 00:03:15,270
Vous les reconnaissez immédiatement cela ne ressemble pas à une balise HTML typique.

40
00:03:15,270 --> 00:03:20,130
Alors commençons par nous poser la question, qu'est-ce que cela signifie, et

41
00:03:20,130 --> 00:03:25,970
pourquoi cela est-il inclus dans la page index.html ?

42
00:03:25,970 --> 00:03:31,090
Comme nous l'avons déjà vu, une application Angular typique

43
00:03:31,090 --> 00:03:35,490
est une hiérarchie de modules avec un module racine.

44
00:03:35,490 --> 00:03:40,660
Votre application Angular est amorcée en amorçant le module racine

45
00:03:40,660 --> 00:03:42,520
pour démarrer votre application.

46
00:03:42,520 --> 00:03:46,430
Alors, comment bootstrap une application Angular ?

47
00:03:46,430 --> 00:03:53,566
Nous avons déjà vu la page index.html, et vous y avez vu un élément appelé app-root.

48
00:03:53,566 --> 00:03:58,306
Alors posons-nous encore quelques questions.

49
00:03:58,306 --> 00:04:03,102
Un compagnon de la page index.html est le fichier main.ts.

50
00:04:03,102 --> 00:04:07,602
Si vous ouvrez ce fichier, vous verrez qu'il contient un ensemble

51
00:04:07,602 --> 00:04:12,790
d'instructions d'importation dans TypeScript, comme écrit ici.

52
00:04:12,790 --> 00:04:16,460
Ne nous plonçons pas trop dans les détails, mais

53
00:04:16,460 --> 00:04:20,160
Je reviendrai expliquer cela dans un court moment.

54
00:04:20,160 --> 00:04:21,652
Mais en particulier,

55
00:04:21,652 --> 00:04:27,017
permettez-moi d'attirer votre attention sur cette ligne particulière dans le fichier main.ts.

56
00:04:27,017 --> 00:04:31,600
Qui dit PlatformBrowserDynamic () .bootstrapModule

57
00:04:31,600 --> 00:04:36,277
, puis notez le paramètre ici, qui dit (AppModule).

58
00:04:36,277 --> 00:04:41,075
Donc, comme je l'ai mentionné, plus tôt le module d'application est le nom

59
00:04:41,075 --> 00:04:45,985
typique donné au module racine dans une application Angular.

60
00:04:45,985 --> 00:04:48,643
Si vous regardez la hiérarchie des fichiers,

61
00:04:48,643 --> 00:04:52,867
vous voyez déjà un fichier appelé app_module.ts.

62
00:04:52,867 --> 00:04:57,131
Nous allons visiter ce fichier dans un court moment pour voir ce qu'il contient.

63
00:04:57,131 --> 00:04:59,877
Maintenant, revenant à ces importations,

64
00:04:59,877 --> 00:05:05,250
vous pouvez voir que prenons l'exemple de la première importation ici.

65
00:05:05,250 --> 00:05:10,330
Il est dit d'importer EnableProdMode à partir de '@angular /core'.

66
00:05:10,330 --> 00:05:15,740
Donc, ce que cela spécifie est que nous allons importer ce module

67
00:05:15,740 --> 00:05:19,970
particulier de la bibliothèque angulaire.

68
00:05:19,970 --> 00:05:24,820
Et de même, vous voyez le second disant importer PlatformBrowserDynamic

69
00:05:24,820 --> 00:05:28,040
de '@angular /platform-browser-dynamic'.

70
00:05:28,040 --> 00:05:32,500
Donc, à partir de cette bibliothèque, vous importez ce module en place.

71
00:05:32,500 --> 00:05:37,896
Maintenant, le module PlatformBrowserDynamic vous permet de bootstrap

72
00:05:37,896 --> 00:05:44,100
votre application Angular en prenant votre module racine comme paramètre.

73
00:05:44,100 --> 00:05:51,237
Évidemment, il y a beaucoup d'autres fichiers dans ce dossier et les sous-dossiers là-bas.

74
00:05:51,237 --> 00:05:55,534
Ne nous préoccupons pas trop d'eux pour le moment.

75
00:05:55,534 --> 00:05:59,900
Nous allons en apprendre davantage sur certains au cours de ce cours.

76
00:05:59,900 --> 00:06:05,868
Maintenant, Angular CLI aide à créer cette hiérarchie de dossiers et de fichiers

77
00:06:05,868 --> 00:06:09,848
, avec les paramètres nécessaires pour

78
00:06:09,848 --> 00:06:16,768
, vous pouvez démarrer votre application angulaire et commencer.

79
00:06:16,768 --> 00:06:20,233
Faire cela à la main est une tâche un peu fastidieuse.

80
00:06:20,233 --> 00:06:24,811
Ainsi, l'Angular CLI simplifie la préparation

81
00:06:24,811 --> 00:06:29,460
du dossier pour votre application Angular.

82
00:06:29,460 --> 00:06:36,210
Encore une fois, allez dans le fichier app_module.ts.

83
00:06:36,210 --> 00:06:41,820
Comme je l'ai mentionné, c'est le module racine pour votre application Angular.

84
00:06:41,820 --> 00:06:47,912
Maintenant typiquement, le module racine serait nommé comme fichier app.module,

85
00:06:47,912 --> 00:06:51,915
mais ce n'est qu'un nom suggéré dans Angular.

86
00:06:51,915 --> 00:06:57,627
Vous verrez que beaucoup de fichiers qui constituent une application Angular,

87
00:06:57,627 --> 00:07:01,297
il y a des façons suggérées de nommer ces fichiers.

88
00:07:01,297 --> 00:07:05,889
Au cours du cours, nous apprendrons spécifiquement sur chacun de ces fichiers

89
00:07:05,889 --> 00:07:06,720
.

90
00:07:06,720 --> 00:07:11,032
Donc, en regardant le contenu de app_module.ts,

91
00:07:11,032 --> 00:07:15,790
à l'intérieur, vous voyez un ensemble d'instructions d'importation là-bas.

92
00:07:15,790 --> 00:07:19,213
En les regardant rapidement, il est dit d'importer {browserModule} à partir de

93
00:07:19,213 --> 00:07:21,740
'@angular -platform-browser'.

94
00:07:21,740 --> 00:07:25,039
Importer {ngModule} depuis '@angular /core'.

95
00:07:25,039 --> 00:07:29,550
Et ngModule est un module angulaire.

96
00:07:29,550 --> 00:07:34,070
Nous en apprendrons un peu plus tard.

97
00:07:34,070 --> 00:07:38,532
De plus, vous voyez ici une autre instruction import,

98
00:07:38,532 --> 00:07:44,159
qui dit import {appComponent} from './app.component '.

99
00:07:44,159 --> 00:07:47,309
Et en regardant les fichiers ici,

100
00:07:47,309 --> 00:07:52,141
vous voyez déjà un app.component.tsfileware, et

101
00:07:52,141 --> 00:07:58,863
puis plusieurs autres fichiers ici, y compris une app.component card.html,

102
00:07:58,863 --> 00:08:02,972
un app.component.acss, et d'autres fichiers.

103
00:08:02,972 --> 00:08:10,939
Maintenant, cette instruction spécifie que ce module racine inclura ce composant,

104
00:08:10,939 --> 00:08:17,640
et formera le compliment racine de votre application Angular.

105
00:08:17,640 --> 00:08:22,450
Une application Angular typique, comme nous l'avons vu, se compose d'un certain nombre de modules

106
00:08:22,450 --> 00:08:27,330
avec le module racine comme module primaire,

107
00:08:27,330 --> 00:08:31,360
qui vous aide à bootstrap votre application Angular.

108
00:08:31,360 --> 00:08:38,970
Le module racine est un module angulaire avec une entité, ou est une classe.

109
00:08:38,970 --> 00:08:44,690
C'est donc là que vous voyez l'utilisation d'une classe TypeScript ici,

110
00:08:44,690 --> 00:08:49,380
donc si vous descendez dans le module rouge ci-dessous, vous verrez

111
00:08:49,380 --> 00:08:53,485
cette instruction appelée classe d'exportation AppModule.

112
00:08:53,485 --> 00:08:59,550
TypeScript ajoute des classes à votre code JavaScript typique.

113
00:08:59,550 --> 00:09:03,085
Si vous êtes familier avec seulement ES-5 JavaScript,

114
00:09:03,085 --> 00:09:06,873
alors les classes n'y ont pas encore été introduites, mais

115
00:09:06,873 --> 00:09:11,942
les nouvelles versions de JavaScript introduiront le support des classes.

116
00:09:11,942 --> 00:09:14,971
TypeScript prend également en charge les classes.

117
00:09:14,971 --> 00:09:18,651
Donc, si vous avez de l'expérience avec la programmation orientée objet,

118
00:09:18,651 --> 00:09:21,139
vous êtes déjà familier avec les classes.

119
00:09:21,139 --> 00:09:27,106
Donc, ce genre d'approche est introduit dans JavaScript avec l'introduction

120
00:09:27,106 --> 00:09:31,750
des classes dans TypeScript et les futures versions de JavaScript.

121
00:09:31,750 --> 00:09:37,028
De plus, vous remarquerez que cette classe a

122
00:09:37,028 --> 00:09:42,314
un décorateur Ngmodule associé à cela.

123
00:09:42,314 --> 00:09:47,312
Donc, un décorateur est, encore une fois, une fonction de

124
00:09:47,312 --> 00:09:51,874
qui modifie les classes JavaScript.

125
00:09:51,874 --> 00:09:59,254
Nous verrons l'utilisation de décorateurs dans de nombreux endroits dans notre application Angular.

126
00:09:59,254 --> 00:10:00,980
Ceci est un Ngmodule.

127
00:10:00,980 --> 00:10:05,850
Le décorateur de cela vous permet de spécifier quelques détails sur ce module d'application

128
00:10:05,850 --> 00:10:06,797
.

129
00:10:06,797 --> 00:10:12,398
Donc, cette fonction de décorateur prend un certain ensemble

130
00:10:12,398 --> 00:10:18,295
de métadonnées pour vous aider à décrire ce module.

131
00:10:18,295 --> 00:10:23,232
Donc, cet objet de métadonnées contient ici, comme vous pouvez le voir, des déclarations

132
00:10:23,232 --> 00:10:28,430
, des importations, des fournisseurs, des bootstrap.

133
00:10:28,430 --> 00:10:33,080
Et contiendra également des exportations si ce module exporte quelque chose qui peut être

134
00:10:33,080 --> 00:10:35,110
utilisé par un autre module.

135
00:10:35,110 --> 00:10:41,734
Comme il se trouve que c'est le module racine, nous n'avons pas d'exportation à partir de ce module.

136
00:10:41,734 --> 00:10:47,418
Donc, au lieu de cela, nous n'avons que des déclarations, des importations, des fournisseurs et des bootstrap.

137
00:10:47,418 --> 00:10:52,243
Donc ici celui-ci est assez simple à comprendre.

138
00:10:52,243 --> 00:10:57,280
Il spécifie que pour bootstrap cette application Angular,

139
00:10:57,280 --> 00:11:00,713
nous devons bootstrap le AppComponent.

140
00:11:00,713 --> 00:11:07,008
Donc, AppComponent est le composant racine de notre application Angular.

141
00:11:07,008 --> 00:11:13,595
De plus, la partie import spécifie les propriétés,

142
00:11:13,595 --> 00:11:22,040
voyant tous ces modules doivent être importés pour être utilisés avec ce module app.

143
00:11:22,040 --> 00:11:25,770
Donc, ce module d'application dépend maintenant de ces autres modules.

144
00:11:25,770 --> 00:11:30,917
Donc ce sont les modules qui vont être importés dans le module d'application en tant que partie

145
00:11:30,917 --> 00:11:36,494
de la hiérarchie, d'où la raison pour laquelle nous avons importé ces modules ici.

146
00:11:36,494 --> 00:11:38,451
Donc, lorsque vous importez les modules,

147
00:11:38,451 --> 00:11:43,324
vous spécifiez ici que le module d'application utilisera ce module.

148
00:11:43,324 --> 00:11:48,462
Donc, la propriété import spécifie les modules qui doivent être importés ou

149
00:11:48,462 --> 00:11:53,040
les modules dont ce module particulier dépend.

150
00:11:53,040 --> 00:11:58,398
Les déclarations ici, la propriété des déclarations,

151
00:11:58,398 --> 00:12:02,940
est la propriété qui déclare les classes de vue

152
00:12:02,940 --> 00:12:06,910
qui appartiennent à ce module particulier.

153
00:12:06,910 --> 00:12:10,584
Ainsi, les classes de vue dans le cas d'un module Angular seraient

154
00:12:10,584 --> 00:12:15,018
sous la forme de composants, de directives et de tuyaux.

155
00:12:15,018 --> 00:12:20,789
Nous allons parler de directives et de tuyaux un peu plus tard dans ce cours,

156
00:12:20,789 --> 00:12:24,416
nous parlerons des composants dans la prochaine leçon.

157
00:12:24,416 --> 00:12:28,590
Les fournisseurs spécifient tous les services dont ce module

158
00:12:28,590 --> 00:12:31,753
fera usage.

159
00:12:31,753 --> 00:12:36,592
Services dont nous parlerons un peu plus en détail dans

160
00:12:36,592 --> 00:12:39,235
le module de la semaine prochaine.

161
00:12:39,235 --> 00:12:42,510
Nous parlerons plus de détails sur les services, comment nous les créons,

162
00:12:42,510 --> 00:12:46,810
et comment nous pouvons les utiliser avec notre application Angular.

163
00:12:46,810 --> 00:12:52,091
Pour résumer ce que nous avons appris jusqu'à présent, nous réalisons qu'un module

164
00:12:52,091 --> 00:12:57,373
dans une application Angular pourrait consister en un ensemble de composants et

165
00:12:57,373 --> 00:13:02,671
services qui seront requis de ce module en les important.

166
00:13:02,671 --> 00:13:09,461
Et ceux-ci seront déclarés en utilisant la propriété de déclarations

167
00:13:09,461 --> 00:13:15,220
du décorateur Ngmodule dans notre module d'application.

168
00:13:15,220 --> 00:13:19,845
Maintenant, ces composants eux-mêmes peuvent dépendre de

169
00:13:19,845 --> 00:13:24,178
d'autres composants, ou services, ou directives, ou des pipes

170
00:13:24,178 --> 00:13:29,115
, comme nous le verrons dans le reste de ce cours particulier.

171
00:13:29,115 --> 00:13:37,212
Donc, avec cela, nous avons une idée approximative de la façon dont une application Angular typique est structurée.

172
00:13:37,212 --> 00:13:42,247
En revenant à notre code, il est maintenant temps d'examiner

173
00:13:42,247 --> 00:13:48,691
ce fichier app.component.ts, et le fichier app.component.html.

174
00:13:48,691 --> 00:13:53,502
qui déclare le modèle pour notre composant,

175
00:13:53,502 --> 00:13:57,022
et le fichier app.component.ts,

176
00:13:57,022 --> 00:14:02,547
qui spécifie la partie TypeScript de notre composant.

177
00:14:02,547 --> 00:14:08,157
Maintenant, nous allons le faire dans la prochaine leçon, où nous allons traiter des composants et

178
00:14:08,157 --> 00:14:13,436
comment nous pouvons créer de nouveaux composants et les ajouter à notre application Angular.

179
00:14:13,436 --> 00:14:16,815
[MUSIQUE]