1
00:00:03,950 --> 00:00:06,915
Dans l'exercice précédent,

2
00:00:06,915 --> 00:00:12,510
nous avons échafaudé notre première application Angular de base.

3
00:00:12,510 --> 00:00:16,430
Comme je l'ai mentionné, nous allons travailler sur cette application Angular et la développer encore

4
00:00:16,430 --> 00:00:20,350
tout au long du reste de ce cours.

5
00:00:20,350 --> 00:00:24,230
Maintenant, avant de commencer à travailler sur notre application Angular,

6
00:00:24,230 --> 00:00:29,509
configurons notre application Angular pour utiliser quelques modules supplémentaires,

7
00:00:29,509 --> 00:00:34,035
qui nous permettent de concevoir les modèles pour notre application Angular.

8
00:00:34,035 --> 00:00:40,810
Nous allons utiliser le module de matériau angulaire pour concevoir les mises en page de l'interface utilisateur.

9
00:00:40,810 --> 00:00:47,420
Le module Angular Material nous fournit un certain nombre de composants de mise en page intéressants

10
00:00:47,420 --> 00:00:54,500
que nous pouvons utiliser dans la conception de nos modèles de composants Angular.

11
00:00:54,500 --> 00:01:01,915
De plus, nous utiliserons la disposition flex qui est basée sur la disposition flex CSS,

12
00:01:01,915 --> 00:01:08,015
qui nous permet de faire un design réactif dans notre application Angular.

13
00:01:08,015 --> 00:01:09,520
Donc, dans cet exercice,

14
00:01:09,520 --> 00:01:11,330
, nous allons faire ces configurations.

15
00:01:11,330 --> 00:01:17,460
En cours de route, nous apprendrons notre première brève connaissance des composants,

16
00:01:17,460 --> 00:01:23,980
avant même d'examiner les composants plus en détail dans la prochaine leçon.

17
00:01:23,980 --> 00:01:31,810
Pour commencer, commençons notre voyage par une visite rapide au fichier app.component.ts.

18
00:01:31,810 --> 00:01:33,769
C'est le fichier desservant

19
00:01:33,769 --> 00:01:38,390
le composant racine qui fait partie de notre application Angular.

20
00:01:38,390 --> 00:01:40,765
Maintenant, en regardant ce composant racine,

21
00:01:40,765 --> 00:01:45,090
il y a quelques choses qui deviendront très claires pour vous même sans beaucoup d'explications.

22
00:01:45,090 --> 00:01:49,715
La première chose sur laquelle je voudrais attirer votre attention est cette déclaration d'importation.

23
00:01:49,715 --> 00:01:56,300
Comme vous pouvez le voir, il s'agit d'importer la classe de composant à partir de la bibliothèque de noyau angulaire.

24
00:01:56,300 --> 00:02:01,185
Ensuite, nous préparons notre classe AppComponent ici,

25
00:02:01,185 --> 00:02:03,280
et exportons cette classe.

26
00:02:03,280 --> 00:02:07,160
Donc, dans cette classe AppComponent que nous avons déclarée,

27
00:02:07,160 --> 00:02:12,080
nous avons une variable que nous avons déclarée ici appelée title,

28
00:02:12,080 --> 00:02:15,330
qui est actuellement assignée à être une chaîne.

29
00:02:15,330 --> 00:02:17,910
Maintenant, en regardant rapidement cette variable,

30
00:02:17,910 --> 00:02:20,360
vous commencez immédiatement à vous demander,

31
00:02:20,360 --> 00:02:24,740
comment est-ce lié à ce que nous avons vu dans le navigateur,

32
00:02:24,740 --> 00:02:29,585
quand vous avez vu notre application Angular affichée dans le navigateur,

33
00:02:29,585 --> 00:02:33,740
l'application Angular affichait exactement ces mots dans le navigateur.

34
00:02:33,740 --> 00:02:38,630
En effet, cette variable joue un rôle important dans

35
00:02:38,630 --> 00:02:44,250
à venir avec la vue que vous avez vue dans notre navigateur.

36
00:02:44,250 --> 00:02:46,730
Maintenant, en plus, vous voyez aussi que

37
00:02:46,730 --> 00:02:53,790
cette classe de composant est ajoutée avec un décorateur ici.

38
00:02:53,790 --> 00:02:58,395
Encore une fois, c'est un autre décorateur que vous rencontrerez dans Angular.

39
00:02:58,395 --> 00:03:01,590
Donc, ceci comme nous le voyons est un décorateur de composants.

40
00:03:01,590 --> 00:03:08,240
Le décorateur de composant prend en interne un objet JavaScript comme paramètre ici,

41
00:03:08,240 --> 00:03:14,700
et la première propriété que vous voyez ici appelée selector : app-root.

42
00:03:14,700 --> 00:03:19,100
Maintenant, si vous vous souvenez quand nous avons regardé le fichier Index.html,

43
00:03:19,100 --> 00:03:23,275
nous avons vu que nous y avons inclus un élément appelé app-root.

44
00:03:23,275 --> 00:03:26,865
Maintenant, vous commencez à voir d'où provient cette racine d'application.

45
00:03:26,865 --> 00:03:31,250
Donc, c'est le sélecteur pour le composant que nous déclarons ici,

46
00:03:31,250 --> 00:03:36,020
qui est utilisé dans notre classe de modèle pour spécifier où

47
00:03:36,020 --> 00:03:41,960
la vue correspondant à ce composant doit être affichée dans le navigateur.

48
00:03:41,960 --> 00:03:47,845
La deuxième propriété que vous définissez ici est TemplateURL.

49
00:03:47,845 --> 00:03:50,890
Cela pointe vers un fichier,

50
00:03:50,890 --> 00:03:53,030
un fichier HTML comme vous pouvez le voir,

51
00:03:53,030 --> 00:03:57,945
qui contient le modèle correspondant à ce composant particulier.

52
00:03:57,945 --> 00:04:02,335
Modèle qui définit la vue de ce composant.

53
00:04:02,335 --> 00:04:07,565
La troisième propriété que vous définissez ici comme vous pouvez le voir, dit, StyleURL,

54
00:04:07,565 --> 00:04:14,450
qui, comme vous le remarquez ici, est affectée au fichier app.component.scss.

55
00:04:14,450 --> 00:04:19,130
Donc, ce fichier devrait contenir tout le code scss qui peut être

56
00:04:19,130 --> 00:04:24,310
utilisé pour le style CSS pour notre modèle de composants.

57
00:04:24,310 --> 00:04:29,260
Donc, il s'agit d'une visite rapide au fichier app.component.ts.

58
00:04:29,260 --> 00:04:33,365
Maintenant, allons au fichier app.component.html,

59
00:04:33,365 --> 00:04:36,905
et jetez un coup d'œil au modèle.

60
00:04:36,905 --> 00:04:40,480
Allez dans le fichier App.component.html,

61
00:04:40,480 --> 00:04:43,635
vous voyez que ce fichier app.component,

62
00:04:43,635 --> 00:04:51,384
le code HTML contient ici juste une balise h1 avec quelque chose ici avec une double accolades.

63
00:04:51,384 --> 00:04:58,310
Maintenant, évidemment, ce n'est pas quelque chose auquel vous êtes habitué à partir de vos connaissances du HTML,

64
00:04:58,310 --> 00:05:01,755
, CSS ou JavaScript que vous avez vu auparavant.

65
00:05:01,755 --> 00:05:04,325
Ceci est la syntaxe angulaire.

66
00:05:04,325 --> 00:05:07,055
C'est ce que nous appelons l'interpolation.

67
00:05:07,055 --> 00:05:12,350
Ceci utilise la liaison de données unidirectionnelle de l'Angular.

68
00:05:12,350 --> 00:05:16,775
Je vous jette quelques termes en ce moment.

69
00:05:16,775 --> 00:05:20,690
Tenez ces termes, nous reviendrons à les examiner en

70
00:05:20,690 --> 00:05:25,185
plus en détail dans les leçons restantes de ce cours.

71
00:05:25,185 --> 00:05:28,140
La première chose comme je l'ai mentionné est l'interpolation,

72
00:05:28,140 --> 00:05:33,290
la seconde que j'ai mentionnée est la liaison de données unidirectionnelle.

73
00:05:33,680 --> 00:05:42,200
Aussi, vous voyez immédiatement qu'il s'agit de la variable que vous avez vue dans le compagnon, le fichier

74
00:05:42,200 --> 00:05:48,560
TypeScript, qui définit le code TypeScript correspondant au composant App.

75
00:05:48,560 --> 00:05:51,640
Donc, une fois que vous spécifiez quelque chose comme ceci ici,

76
00:05:51,640 --> 00:05:58,970
l'implication est que quelle que soit la valeur de ce titre sera substituée en place

77
00:05:58,970 --> 00:06:08,170
ici et sera utilisée comme code HTML interne pour cette balise h1 ici.

78
00:06:08,170 --> 00:06:11,600
C'est le but de l'inclure ici.

79
00:06:11,600 --> 00:06:15,140
Nous allons maintenant installer quelques uns des

80
00:06:15,140 --> 00:06:22,410
autres modules de relation angulaire qui nous permettront de concevoir des modèles.

81
00:06:22,410 --> 00:06:25,985
Ensuite, nous reviendrons à ce fichier App.component.html.

82
00:06:25,985 --> 00:06:31,375
Puis redessinez ce modèle un peu plus tard dans cet exercice.

83
00:06:31,375 --> 00:06:38,330
Afin de nous aider à concevoir des vues réactives dans notre application Angular,

84
00:06:38,330 --> 00:06:40,340
, nous allons prendre l'aide de quelques modules associés

85
00:06:40,340 --> 00:06:45,360
pour Angular appelés module de matériau angulaire.

86
00:06:45,360 --> 00:06:49,705
Le module Matériaux angulaires nous fournit un certain nombre de composants.

87
00:06:49,705 --> 00:06:53,795
Composants Layout que nous pouvons utiliser dans la conception

88
00:06:53,795 --> 00:06:59,595
de nos nouveaux modèles pour nos composants Angular.

89
00:06:59,595 --> 00:07:06,290
Le module Matériel angulaire si vous voulez comparer cela est un peu comme ce que Bootstrap

90
00:07:06,290 --> 00:07:14,055
nous a fourni pour la conception de nos pages Web que nous avons examinées dans le cours précédent.

91
00:07:14,055 --> 00:07:19,850
Aussi, j'utiliserai un autre module appelé comme module de disposition flexible angulaire.

92
00:07:19,850 --> 00:07:26,195
Le module Flex Layout fournit un support pour l'utilisation de CSS

93
00:07:26,195 --> 00:07:33,440
Flex layout dans nos modèles Angular pour nos composants Angular.

94
00:07:33,440 --> 00:07:36,620
Maintenant, ces deux modules doivent être explicitement installés

95
00:07:36,620 --> 00:07:40,195
puis importés dans notre application Angular,

96
00:07:40,195 --> 00:07:43,530
c'est ce que nous allons faire à l'étape suivante.

97
00:07:43,530 --> 00:07:45,645
Mais avant d'aller de l'avant,

98
00:07:45,645 --> 00:07:48,910
une question que vous pourriez vous demander est,

99
00:07:48,910 --> 00:07:58,350
pourquoi ne pas utiliser Bootstrap pour faire la conception des modèles pour notre application Angular ?

100
00:07:58,350 --> 00:08:05,220
En effet, vous pouvez également utiliser Bootstrap pour concevoir les modèles de notre application Angular.

101
00:08:05,220 --> 00:08:07,310
Mais vous ne pouvez utiliser

102
00:08:07,310 --> 00:08:12,850
que la partie des composants CSS de Bootstrap dans votre application Angular.

103
00:08:12,850 --> 00:08:16,800
Les composants basés sur jQuery.

104
00:08:16,800 --> 00:08:21,709
Les composants JavaScript ne peuvent pas être explicitement utilisés, il peut y avoir des conflits

105
00:08:21,709 --> 00:08:27,870
entre les composants basés sur jQuery de Bootstrap et le code Angular lui-même.

106
00:08:27,870 --> 00:08:33,800
Donc, il est préférable d'éviter d'utiliser les composants JavaScript de Bootstrap

107
00:08:33,800 --> 00:08:40,925
au cas où vous choisiriez d'utiliser Bootstrap comme moyen de concevoir vos modèles Angular.

108
00:08:40,925 --> 00:08:42,980
Mais d'un autre côté,

109
00:08:42,980 --> 00:08:47,000
J'ai aussi pensé que cela nous fournirait une bonne occasion d'apprendre à obtenir

110
00:08:47,000 --> 00:08:54,350
un autre cadre de mise en page de l'interface utilisateur qui est le cadre matériel angulaire.

111
00:08:54,350 --> 00:08:58,640
Donc, c'est la raison pour laquelle j'ai choisi d'utiliser le framework de matériau Angular

112
00:08:58,640 --> 00:09:03,745
et la mise en page Angular flex dans ce cours particulier.

113
00:09:03,745 --> 00:09:07,540
Maintenant, en passant par le reste de ce cours,

114
00:09:07,540 --> 00:09:10,450
, je n'expliquerai pas explicitement comment utiliser

115
00:09:10,450 --> 00:09:14,980
les composants de matériau angulaire ou comment utiliser le Flex-Layout angulaire.

116
00:09:14,980 --> 00:09:20,615
Au lieu de cela, nous allons les apprendre en regardant des exemples.

117
00:09:20,615 --> 00:09:22,620
Nous allons utiliser ces deux,

118
00:09:22,620 --> 00:09:29,135
à la fois les meilleurs composants de matériau angulaire et le support angulaire Flex-Layout,

119
00:09:29,135 --> 00:09:36,715
lorsque nous concevons nos modèles pour nos composants angulaires dans ce cours particulier.

120
00:09:36,715 --> 00:09:41,495
Donc, par le processus d'utilisation de ces composants,

121
00:09:41,495 --> 00:09:44,025
vous apprendrez également en cours de route,

122
00:09:44,025 --> 00:09:47,650
à utiliser à la fois le matériau angulaire et

123
00:09:47,650 --> 00:09:51,495
Flex-Layout angulaire dans votre application angulaire.

124
00:09:51,495 --> 00:09:54,685
Je pensais qu'en faisant les exercices,

125
00:09:54,685 --> 00:09:57,060
vous apprendriez beaucoup plus sur le Matériel Angulaire.

126
00:09:57,060 --> 00:10:01,505
Maintenant, pour expliquer les aspects conceptuels de la raison pour laquelle les composants de matériau angulaire

127
00:10:01,505 --> 00:10:07,440
fonctionnent comme ils le font ou comment Grid fonctionne par exemple,

128
00:10:07,440 --> 00:10:09,915
ou comment une conception réactive fonctionne,

129
00:10:09,915 --> 00:10:14,150
nous avons déjà examiné certains de ceux dans le cours précédent sur Bootstrap.

130
00:10:14,150 --> 00:10:17,935
Ainsi, les mêmes concepts viendront aussi à notre secours.

131
00:10:17,935 --> 00:10:23,260
Au lieu de cela, nous examinerons la mécanique de l'utilisation à la fois du matériau angulaire et

132
00:10:23,260 --> 00:10:30,385
de la flex-mise en page angulaire dans notre application angulaire dans ce cours particulier.

133
00:10:30,385 --> 00:10:33,005
Pour commencer à utiliser un matériau angulaire,

134
00:10:33,005 --> 00:10:37,655
bien sûr, la première chose que vous devez faire est d'installer le module matériau angulaire.

135
00:10:37,655 --> 00:10:46,230
Donc, à l'invite tapez npm install —save @angular /material.

136
00:10:48,950 --> 00:10:51,240
Donc, comme vous pouvez le voir,

137
00:10:51,240 --> 00:10:55,390
nous spécifions tous les modules de relation angulaire avec le @angular,

138
00:10:55,390 --> 00:10:58,650
donc vous verrez aussi la même chose pour le Flex-Layout.

139
00:10:58,650 --> 00:11:03,980
Nous installons la version 6.4.7 du module de matériau angulaire.

140
00:11:03,980 --> 00:11:09,440
De plus, le module matériel nécessite l'installation de CDK.

141
00:11:09,440 --> 00:11:12,730
Donc, nous allons également installer cela en faisant

142
00:11:12,730 --> 00:11:21,100
npm installer @angular /cdk @6 .4.7 —enregistrer,

143
00:11:21,100 --> 00:11:25,035
et installer cela avec Angular Material.

144
00:11:25,035 --> 00:11:31,495
Donc, Angular Material utilise le cdk angulaire pour ses composants.

145
00:11:31,495 --> 00:11:35,595
De plus, lorsque vous utilisez le matériau angulaire,

146
00:11:35,595 --> 00:11:43,035
vous devez également importer le module d'animations angulaires dans votre application angulaire.

147
00:11:43,035 --> 00:11:46,445
A partir de la version 4 Angular,

148
00:11:46,445 --> 00:11:49,740
le support de l'animation Angular a été extrait

149
00:11:49,740 --> 00:11:53,695
des modules de base dans son propre module séparé.

150
00:11:53,695 --> 00:11:56,130
Donc, ce qui signifie que si vous devez

151
00:11:56,130 --> 00:11:58,900
faire usage d'animations dans votre application Angular,

152
00:11:58,900 --> 00:12:04,370
vous devez installer explicitement le module Angular animations.

153
00:12:04,370 --> 00:12:07,275
Alors, allons de l'avant et installons ça aussi.

154
00:12:07,275 --> 00:12:08,325
Donc, vous direz

155
00:12:08,325 --> 00:12:18,940
npm install —save @angular /animations @6 .1.7.

156
00:12:20,040 --> 00:12:23,290
Aussi, un autre module que j'installerai

157
00:12:23,290 --> 00:12:33,130
ensemble s'appelle HammerJS.

158
00:12:33,130 --> 00:12:36,940
Le module HammerJS est utilisé par Angular

159
00:12:36,940 --> 00:12:40,700
pour supporter certains gestes dans votre application Angular.

160
00:12:40,700 --> 00:12:45,750
Donc, c'est la raison pour laquelle nous installons HammerJS aussi dans notre application,

161
00:12:45,750 --> 00:12:51,830
et la version actuelle de HammerJS que nous utilisons est 2.0.8.

162
00:12:51,830 --> 00:12:56,050
Maintenant, nous avons installé tout ce dont nous avons besoin

163
00:12:56,050 --> 00:13:01,185
pour le module de matériau angulaire à utiliser dans notre application Angular.

164
00:13:01,185 --> 00:13:04,605
Ensuite, je vais passer à installer

165
00:13:04,605 --> 00:13:09,415
l'Angular Flex-Layout dans mon application Angular.

166
00:13:09,415 --> 00:13:11,460
Donc, pour ce faire, je pad l'invite

167
00:13:11,460 --> 00:13:19,000
npm install —save @angular/flex-layout

168
00:13:19,000 --> 00:13:22,970
et nous allons installer la dernière version de cela.

169
00:13:24,760 --> 00:13:31,720
Donc, maintenant que nous avons toutes les pièces dont nous avons besoin pour notre application Angular installée,

170
00:13:31,720 --> 00:13:36,290
allons de l'avant et ensuite configurer notre application Angular pour faire

171
00:13:36,290 --> 00:13:41,025
usage de ces nouveaux modules que nous avons installés dans notre application Angular.

172
00:13:41,025 --> 00:13:46,205
La première chose que nous allons faire est d'aller dans le fichier index.html,

173
00:13:46,205 --> 00:13:51,975
et ensuite nous allons configurer le fichier index.html pour utiliser les icônes de matériau angulaire.

174
00:13:51,975 --> 00:13:55,800
Donc, pour inclure les icônes de matériau angulaire afin qu'elles puissent être utilisées

175
00:13:55,800 --> 00:13:59,580
dans les modèles de votre application angulaire, donc,

176
00:13:59,580 --> 00:14:04,020
laissez-moi y aller dans la tête d'index.html,

177
00:14:04,020 --> 00:14:11,905
, puis créer un nouveau lien avec

178
00:14:11,905 --> 00:14:47,075
href= » https://fonts.googleapis.com/icon?family=Material+Icons "et ceci est un feuille de style.

179
00:14:47,075 --> 00:14:52,110
Donc, avec cela, je peux maintenant utiliser les icônes de matériau angulaire dans

180
00:14:52,110 --> 00:14:58,865
mon application angulaire partout où je choisis de le faire dans les modèles.

181
00:14:58,865 --> 00:15:04,530
L'étape suivante consiste à passer à l'app module.ts et

182
00:15:04,530 --> 00:15:09,825
puis à importer les trois modules que nous venons d'installer.

183
00:15:09,825 --> 00:15:14,345
Donc, le premier que je vais importer est appelé

184
00:15:14,345 --> 00:15:29,460
le BrowserAnimationsModule que je vais importer à partir de

185
00:15:38,170 --> 00:15:47,230
@angular /platform-browser/animations. Donc, maintenant le prochain

186
00:15:47,230 --> 00:15:54,115
que je vais importer est le MaterialToolBarModule.

187
00:15:54,115 --> 00:16:00,370
Donc, cela importe le module @angular /material/toolbar

188
00:16:00,370 --> 00:16:06,100
qui peut être utilisé dans nos modèles d'applications Angular.

189
00:16:06,100 --> 00:16:14,305
Donc, Angular Material, et aussi importer

190
00:16:14,305 --> 00:16:26,720
le FlexLayoutModule de @angular /flex-layout.

191
00:16:27,470 --> 00:16:34,050
Donc, une fois que nous avons tous ces modules importés, un changement supplémentaire que je dois faire

192
00:16:34,050 --> 00:16:40,035
est- oh laissez-moi aussi importer Hammer.js tant que je suis là.

193
00:16:40,035 --> 00:16:43,100
Alors, laissez-moi importer

194
00:16:45,260 --> 00:16:51,585
Hammer.js dans mon application.

195
00:16:51,585 --> 00:16:53,830
Et une fois que j'y suis,

196
00:16:53,830 --> 00:16:58,400
l'autre changement que je dois faire est d'inclure également

197
00:16:58,400 --> 00:17:04,165
ces modules dans les entrées du décorateur de module NG ici.

198
00:17:04,165 --> 00:17:06,845
Donc, je vais y aller et dire module navigateur,

199
00:17:06,845 --> 00:17:13,440
module animations navigateur là et puis après le module HTTP,

200
00:17:13,440 --> 00:17:21,009
Je vais importer le module de barre d'outils matériel et aussi le module de mise en page flex

201
00:17:21,009 --> 00:17:29,350
dans le cadre des entrées à l'intérieur du décorateur de module NG pour mon module application.

202
00:17:29,350 --> 00:17:36,215
Donc, avec cela toutes mes configurations pour utiliser le module de la barre d'outils matérielle et

203
00:17:36,215 --> 00:17:38,975
le module de disposition flexible angulaire et avec

204
00:17:38,975 --> 00:17:44,680
le module d'animations en angulaire est terminé.

205
00:17:44,680 --> 00:17:50,270
Maintenant, nous allons entrer dans le modèle de composants et utiliser

206
00:17:50,270 --> 00:17:54,570
notre premier composant de matériau angulaire dans la conception de la mise en page

207
00:17:54,570 --> 00:18:00,110
pour notre composant d'application applications.

208
00:18:00,750 --> 00:18:06,020
Aller au fichier de modèle de composants d'application,

209
00:18:06,020 --> 00:18:09,460
Je vais le remplacer maintenant par

210
00:18:09,460 --> 00:18:17,895
un composant matériel angulaire

211
00:18:17,895 --> 00:18:21,480
appelé mat-toolbar.

212
00:18:21,480 --> 00:18:24,645
Donc, le mat-toolbar me permet de concevoir

213
00:18:24,645 --> 00:18:29,410
une barre d'outils que je peux utiliser dans mon application angulaire.

214
00:18:29,410 --> 00:18:35,805
Barre d'outils généralement affichée en haut de votre page dans votre application.

215
00:18:35,805 --> 00:18:41,395
Donc, pour cette barre d'outils, je vais spécifier la couleur comme primaire.

216
00:18:41,395 --> 00:18:44,145
Nous verrons ce que cela signifie dans un court laps de temps.

217
00:18:44,145 --> 00:18:50,245
Et nous fermerons aussi cette barre d'outils MD ici.

218
00:18:50,245 --> 00:18:56,230
Maintenant à l'intérieur de ceci, je vais utiliser un span avec

219
00:18:56,230 --> 00:19:05,790
le nom de mon restaurant pour lequel je conçois ce site web.

220
00:19:05,790 --> 00:19:08,150
Donc, Ristorante Con Fusion.

221
00:19:08,150 --> 00:19:12,650
Maintenant, vous voyez pourquoi j'ai nommé ce dossier comme Confusion.

222
00:19:12,650 --> 00:19:19,765
Alors, quelle est la mise à jour que nous devons faire pour le fichier HTML du composant de l'application.

223
00:19:19,765 --> 00:19:29,315
Pendant que nous y sommes, nous allons également inclure quelques mises à jour SCSS de mon fichier Styles.scss.

224
00:19:29,315 --> 00:19:32,470
Donc, si vous allez dans votre code ici,

225
00:19:32,470 --> 00:19:37,000
vous trouverez ce fichier Styles.scss ici.

226
00:19:37,000 --> 00:19:40,450
Donc, c'est là que vous pouvez inclure tous les styles globaux dans

227
00:19:40,450 --> 00:19:44,810
ce fichier et cela sera disponible pour tous les composants à utiliser.

228
00:19:44,810 --> 00:19:51,970
Chaque composant a ses propres fichiers SCSS où vous pouvez inclure le composantPersonnalisation de niveau

229
00:19:51,970 --> 00:19:54,620
ou code SCSS de niveau

230
00:19:54,620 --> 00:20:00,280
du composant à utiliser dans ce composant spécifique.

231
00:20:00,280 --> 00:20:03,090
Nous utiliserons les deux approches dans

232
00:20:03,090 --> 00:20:07,980
cette application angulaire que nous développons dans ce cours.

233
00:20:07,980 --> 00:20:13,530
Mais en ce moment, je vais mettre à jour le fichier principal Styles.scss

234
00:20:13,530 --> 00:20:20,270
avec du code qui sera utile pour toute mon application angulaire.

235
00:20:20,270 --> 00:20:22,185
La première chose que je vais faire,

236
00:20:22,185 --> 00:20:28,160
est d'importer un thème préconstruit qui est disponible via le matériel angulaire.

237
00:20:28,160 --> 00:20:33,380
Ce thème préconstruit en matériau angulaire nous fournit un moyen de spécifier

238
00:20:33,380 --> 00:20:36,000
certaines couleurs et la façon dont certaines choses sont disposées

239
00:20:36,000 --> 00:20:39,265
dans mes composants de matériau angulaire.

240
00:20:39,265 --> 00:20:44,800
Les couleurs qui seront disponibles via le cadre préconstruit notre couleur principale,

241
00:20:44,800 --> 00:20:49,050
la couleur d'accent, et la couleur d'avertissement.

242
00:20:49,050 --> 00:20:53,000
Maintenant, le thème spécifique que je vais utiliser est appelé violet profond.

243
00:20:53,000 --> 00:20:56,870
Donc, dans ce cas, la couleur primaire sera violet profond.

244
00:20:56,870 --> 00:21:01,860
La couleur d'accentuation sera ambre et la couleur d'avertissement sera rouge dans ce cas.

245
00:21:01,860 --> 00:21:07,880
Maintenant, vous pouvez construire vos propres thèmes matériels angulaires que

246
00:21:07,880 --> 00:21:10,970
vous pouvez utiliser dans votre application, mais je vais

247
00:21:10,970 --> 00:21:14,385
laisser cela comme un exercice pour vous d'explorer vous-même.

248
00:21:14,385 --> 00:21:17,930
En ce moment, dans mon application angulaire, je vais utiliser un

249
00:21:17,930 --> 00:21:21,510
des choses préconstruites appelées ambre violet profond.

250
00:21:21,510 --> 00:21:25,575
Donc, pour le faire en allant dans le fichier Styles.scss,

251
00:21:25,575 --> 00:21:28,870
, je vais importer

252
00:21:32,190 --> 00:21:38,080
matériau angulaire

253
00:21:38,080 --> 00:21:48,640
thèmes préconstruits violet profond amber.css.

254
00:21:48,640 --> 00:21:54,015
Donc, ce thème préconstruit que je vais utiliser dans mon application angulaire.

255
00:21:54,015 --> 00:21:58,335
Vous verrez bientôt comment ce thème préconstruit fonctionne dans

256
00:21:58,335 --> 00:22:03,060
l'application angulaire dans les modèles que nous avons conçus pour notre application angulaire.

257
00:22:03,060 --> 00:22:08,360
De plus, je vais configurer certaines propriétés pour

258
00:22:08,360 --> 00:22:16,530
mon corps de la page index.html donc je vais spécifier le remplissage comme zéro,

259
00:22:16,530 --> 00:22:30,360
marge comme zéro, puis la famille de polices que j'utiliserai est rubato ou sans empattement dans mon application.

260
00:22:30,360 --> 00:22:34,320
Vous pouvez choisir d'utiliser ce que vous voulez dans vos applications angulaires.

261
00:22:34,320 --> 00:22:38,095
J'ai choisi d'utiliser ces deux dans mon application angulaire.

262
00:22:38,095 --> 00:22:40,130
Sauvegardons les changements,

263
00:22:40,130 --> 00:22:46,495
et allons-y jeter un coup d'œil à notre application angulaire dans le navigateur.

264
00:22:46,495 --> 00:22:48,040
Avant de faire cela,

265
00:22:48,040 --> 00:22:53,080
assurez-vous que votre service NG fonctionne dans

266
00:22:53,080 --> 00:22:58,940
une des fenêtres de terminal de votre ordinateur.

267
00:22:58,940 --> 00:23:04,870
Le serveur de développement doit fonctionner en continu afin qu'il fasse automatiquement la décompilation

268
00:23:04,870 --> 00:23:07,040
et charge

269
00:23:07,040 --> 00:23:11,975
la version mise à jour de l'application angulaire dans la fenêtre du navigateur.

270
00:23:11,975 --> 00:23:14,290
En allant dans le navigateur,

271
00:23:14,290 --> 00:23:17,925
vous voyez maintenant les changements que nous avons apportés à

272
00:23:17,925 --> 00:23:24,090
l'application angulaire reflétée dans la vue dans

273
00:23:24,090 --> 00:23:30,085
mon navigateur afin que vous puissiez voir que nous avons maintenant une barre d'outils en haut avec

274
00:23:30,085 --> 00:23:37,095
les libellés que nous avons inclus dans le fichier de modèle de composants d'application là-bas.

275
00:23:37,095 --> 00:23:41,290
Et vous pouvez voir la couleur qui a été appliquée à la barre d'outils.

276
00:23:41,290 --> 00:23:42,580
Donc la couleur, couleur primaire,

277
00:23:42,580 --> 00:23:46,180
donc c'est la couleur pourpre profonde qui est appliquée à la barre d'outils.

278
00:23:46,180 --> 00:23:52,000
Maintenant, le thème que nous avons défini ajoutera soit une couleur pourpre profond ou ambre,

279
00:23:52,000 --> 00:23:56,590
selon ce qui est utilisé par les composants de matériau angulaire spécifiques

280
00:23:56,590 --> 00:24:01,750
que nous utilisons dans nos modèles d'applications angulaires.

281
00:24:01,750 --> 00:24:05,285
Avec cela, nous terminons cet exercice.

282
00:24:05,285 --> 00:24:09,470
Dans cet exercice, nous avons configuré notre application angulaire pour utiliser

283
00:24:09,470 --> 00:24:13,880
le matériau angulaire et la disposition angulaire flex.

284
00:24:13,880 --> 00:24:16,410
Nous avons également utilisé

285
00:24:16,410 --> 00:24:22,150
notre premier composant matériel angulaire dans le fichier modèle de composants d'application.

286
00:24:22,150 --> 00:24:29,605
Et nous avons utilisé le thème intégré du matériau angulaire pour notre application angulaire.

287
00:24:29,605 --> 00:24:34,530
Sauvegardez toutes les modifications et alors c'est le bon moment pour vous

288
00:24:34,530 --> 00:24:39,880
de faire un commit git avec le message configurant angulaire.