1
00:00:03,920 --> 00:00:10,619
Avant d'aller de l'avant avec le reste des exercices et les affectations de ce cours,

2
00:00:10,619 --> 00:00:13,245
J'ai pensé que ce serait un bon moment pour moi de

3
00:00:13,245 --> 00:00:16,450
donner à mon application angulaire une belle structure.

4
00:00:16,450 --> 00:00:19,660
Donc, c'est là que je vais ajouter dans l'en-tête et le pied de page

5
00:00:19,660 --> 00:00:22,875
pour mon application angulaire afin que la façon dont

6
00:00:22,875 --> 00:00:29,635
l'interface utilisateur est rendue soit beaucoup plus attrayante que ce qu'elle a été jusqu'à présent.

7
00:00:29,635 --> 00:00:34,010
Alors, voyons comment nous pouvons construire plusieurs composants pour

8
00:00:34,010 --> 00:00:38,150
occuper différentes parties de l'écran dans notre application angulaire.

9
00:00:38,150 --> 00:00:43,445
Donc, ici, vous verrez que mon application angulaire va maintenant se composer d'un en-tête,

10
00:00:43,445 --> 00:00:46,830
qui est un composant séparé, le pied de page,

11
00:00:46,830 --> 00:00:48,400
qui est un autre composant,

12
00:00:48,400 --> 00:00:50,145
et ensuite entre les deux,

13
00:00:50,145 --> 00:00:54,860
j'aurai la partie de mon application angulaire qui va

14
00:00:54,860 --> 00:01:00,080
sera contrôlée plus tard par en utilisant le routeur angulaire.

15
00:01:00,080 --> 00:01:06,740
Alors, voyez-vous, je prépare la scène pour ce qui va arriver plus tard dans ce cours.

16
00:01:06,740 --> 00:01:08,840
Donc, en cours de route,

17
00:01:08,840 --> 00:01:14,195
, nous allons également utiliser les icônes Font Awesome dans notre application angulaire.

18
00:01:14,195 --> 00:01:16,540
Je suis juste friand des icônes impressionnantes Font,

19
00:01:16,540 --> 00:01:18,890
donc j'ai pensé que ce serait un bon endroit pour

20
00:01:18,890 --> 00:01:23,005
introduire ces icônes dans mon application angulaire.

21
00:01:23,005 --> 00:01:28,715
Pour aller de l'avant, installons la police géniale dans notre application angulaire.

22
00:01:28,715 --> 00:01:31,920
Donc, pour ce faire, je vais utiliser NPM pour aller,

23
00:01:31,920 --> 00:01:34,320
et chercher font-awesome pour moi,

24
00:01:34,320 --> 00:01:41,475
donc NPM installer font-awesome 4.7.0, et enregistrer.

25
00:01:41,475 --> 00:01:44,055
Ensuite, laissez font-awesome être installé.

26
00:01:44,055 --> 00:01:48,435
Donc, une fois font-awesome entré dans notre application angulaire,

27
00:01:48,435 --> 00:01:50,570
et devient alors partie des modules de noeud

28
00:01:50,570 --> 00:01:53,055
qui sont inclus dans notre application angulaire,

29
00:01:53,055 --> 00:01:58,465
l'étape suivante consiste à le rendre disponible pour notre application angulaire.

30
00:01:58,465 --> 00:02:03,355
Nous devons intégrer font-awesome dans notre application angulaire.

31
00:02:03,355 --> 00:02:04,710
Donc, pour ce faire,

32
00:02:04,710 --> 00:02:06,510
allez dans le dossier source,

33
00:02:06,510 --> 00:02:14,280
, puis créez un fichier nommé _Variables.scss dans le dossier source.

34
00:02:14,280 --> 00:02:18,400
Dans le fichier Variables.scss,

35
00:02:18,400 --> 00:02:27,860
ajoutez $fa-font-path : et

36
00:02:27,860 --> 00:02:33,810
puis entre guillemets, mettez../node_modules/font-awesome/fonts.

37
00:02:38,510 --> 00:02:45,080
Donc, nous spécifions le chemin de police pour nos fichiers de police impressionnants ici.

38
00:02:45,330 --> 00:02:51,245
Ensuite, ouvrez le fichier Styles.scss,

39
00:02:51,245 --> 00:02:53,995
, puis dans le fichier Styles.scss,

40
00:02:53,995 --> 00:02:56,720
nous allons ajouter quelques lignes là.

41
00:02:56,720 --> 00:03:05,335
Tout d'abord, nous allons importer les variables que nous venons de déclarer en disant @import,

42
00:03:05,335 --> 00:03:08,550
et entre guillemets variables,

43
00:03:08,550 --> 00:03:14,025
puis nous allons importer les fichiers font-génial là-bas,

44
00:03:14,025 --> 00:03:15,790
alors nous dirons

45
00:03:16,040 --> 00:03:30,020
@import../node_modules/font-awesome/scss/font-awesome. Nous importons la version SCSS

46
00:03:30,020 --> 00:03:36,540
parce que nous utilisons SCSS dans notre application angulaire.

47
00:03:36,670 --> 00:03:41,850
Une fois que nous avons modifié les styles pour le fichier CSS,

48
00:03:41,850 --> 00:03:43,680
enregistrons les modifications.

49
00:03:43,680 --> 00:03:46,580
À ce stade, nous pourrions avoir besoin de redémarrer

50
00:03:46,580 --> 00:03:50,840
notre serveur qui servait notre application angulaire.

51
00:03:50,840 --> 00:03:53,590
Donc, lorsque vous avez tapé le service NG,

52
00:03:53,590 --> 00:03:58,010
vous pouvez arrêter le serveur qui sert votre application angulaire et

53
00:03:58,010 --> 00:04:03,135
le redémarrer afin qu'il inclue ces nouvelles modifications qui ont été apportées.

54
00:04:03,135 --> 00:04:05,280
Alors, en allant sur mon terminal,

55
00:04:05,280 --> 00:04:09,110
Je vais arrêter mon serveur,

56
00:04:09,110 --> 00:04:15,095
puis redémarrer le serveur afin qu'il tienne compte du changement que j'ai fait.

57
00:04:15,095 --> 00:04:18,530
Vous verrez l'état actuel de

58
00:04:18,530 --> 00:04:21,770
notre application angulaire en la regardant dans le navigateur.

59
00:04:21,770 --> 00:04:25,040
Donc, c'est ce que nous avons dans notre application angulaire.

60
00:04:25,040 --> 00:04:28,160
Je veux pouvoir ajouter un en-tête et un pied de page à

61
00:04:28,160 --> 00:04:33,320
cette vue afin que je puisse utiliser à la fois l'en-tête et le pied de page,

62
00:04:33,320 --> 00:04:36,680
et ensuite le contenu réel entre l'en-tête

63
00:04:36,680 --> 00:04:40,550
et le pied de page de la façon dont je construis mon application angulaire.

64
00:04:40,550 --> 00:04:41,690
Donc, pour ce faire,

65
00:04:41,690 --> 00:04:46,135
Je vais créer deux nouveaux composants appelés en-tête et pied de page,

66
00:04:46,135 --> 00:04:51,510
et les laisser gérer leur partie de l'écran qui leur est allouée.

67
00:04:51,510 --> 00:04:56,290
En allant à l'invite, permettez-moi de générer un nouveau composant d'en-tête.

68
00:04:56,290 --> 00:04:58,950
Je peux même dire ng g,

69
00:04:58,950 --> 00:05:06,190
qui est suffisant pour que la CLI angulaire reconnaisse qu'elle veut générer un composant.

70
00:05:06,190 --> 00:05:11,310
Donc, je dis ng g en-tête de composant,

71
00:05:11,760 --> 00:05:17,370
et aussi ng g pied de page de composant.

72
00:05:17,370 --> 00:05:20,900
Donc, maintenant, j'ai deux composants qui sont disponibles pour moi

73
00:05:20,900 --> 00:05:25,030
pour utiliser dans mon application angulaire.

74
00:05:25,030 --> 00:05:28,445
Comment vais-je utiliser ces deux composants ?

75
00:05:28,445 --> 00:05:31,665
Passons au fichier App component.html,

76
00:05:31,665 --> 00:05:35,360
, puis utilisons ces deux composants dans la façon dont nous

77
00:05:35,360 --> 00:05:40,340
composons l'écran entier pour notre application angulaire.

78
00:05:40,340 --> 00:05:43,185
En revenant à notre application,

79
00:05:43,185 --> 00:05:48,620
nous voyons que le fichier app module.ts

80
00:05:48,620 --> 00:05:51,680
inclut déjà l'en-tête et le composant de pied de page

81
00:05:51,680 --> 00:05:54,965
et ils ont déjà été inclus dans les déclarations ici.

82
00:05:54,965 --> 00:05:58,075
C'est donc l'avantage d'utiliser la CLI angulaire,

83
00:05:58,075 --> 00:06:01,610
il prend soin de tout ce travail de base pour

84
00:06:01,610 --> 00:06:05,825
vous afin que vous puissiez vous concentrer sur la construction de votre application angulaire.

85
00:06:05,825 --> 00:06:09,340
Donc, c'est la raison pour laquelle j'aime la CLI angulaire

86
00:06:09,340 --> 00:06:13,490
comme une approche pour construire mon application angulaire.

87
00:06:13,490 --> 00:06:20,640
Alors maintenant, allons au fichier HTML des composants de l'application.

88
00:06:20,640 --> 00:06:24,530
Donc, ici, vous voyez que nous avons inclus le menu de l'application là-bas.

89
00:06:24,530 --> 00:06:29,430
Je vais supprimer cette barre d'outils de mon fichier HTML de composants d'application.

90
00:06:29,430 --> 00:06:37,650
Cette barre d'outils fera partie du modèle d'en-tête de mon composant d'en-tête.

91
00:06:37,650 --> 00:06:45,500
Donc, à la place mon fichier

92
00:06:45,500 --> 00:06:54,310
de composants d'application ne contiendra que l'en-tête et le pied de page en bas.

93
00:06:56,450 --> 00:06:59,065
Donc, vous voyez que maintenant,

94
00:06:59,065 --> 00:07:02,480
nous avons les vues des trois composantes.

95
00:07:02,480 --> 00:07:04,370
L'en-tête, le menu,

96
00:07:04,370 --> 00:07:07,160
et le pied de page occupant tout l'écran.

97
00:07:07,160 --> 00:07:10,940
Donc, ces trois composants obtiennent ces parties de l'écran pour eux-mêmes.

98
00:07:10,940 --> 00:07:16,970
Sauvegardons les modifications et jetez un coup d'œil à notre application dans le navigateur.

99
00:07:16,970 --> 00:07:19,855
Aller à l'application dans le navigateur,

100
00:07:19,855 --> 00:07:22,895
vous voyez maintenant que l'en-tête a déjà occupé il est

101
00:07:22,895 --> 00:07:26,090
partie de l'écran là-haut, et évidemment,

102
00:07:26,090 --> 00:07:28,400
depuis que nous venons de préparer le composant,

103
00:07:28,400 --> 00:07:30,245
il dit juste en-tête fonctionne,

104
00:07:30,245 --> 00:07:31,879
et puis en bas ici,

105
00:07:31,879 --> 00:07:36,180
le pied de page a également pris sa place dans la page de l'écran.

106
00:07:36,180 --> 00:07:41,630
Maintenant, nous allons maintenant aller de l'avant et mettre à jour les modèles pour l'en-tête et le pied de page

107
00:07:41,630 --> 00:07:47,625
afin que nous puissions bien définir notre interface utilisateur pour notre application angulaire.

108
00:07:47,625 --> 00:07:50,735
Commençons le travail sur notre pied de page.

109
00:07:50,735 --> 00:07:53,180
Donc, pour commencer sur le pied de page,

110
00:07:53,180 --> 00:07:55,780
allons dans le fichier de modèle du pied de page,

111
00:07:55,780 --> 00:08:02,355
et ensuite nous allons le remplacer par le nouveau modèle du pied de page.

112
00:08:02,355 --> 00:08:03,920
Maintenant, pour votre commodité,

113
00:08:03,920 --> 00:08:07,030
J'ai fourni le code pour vous dans les instructions.

114
00:08:07,030 --> 00:08:10,690
Il sera sage de copier le code entier à partir de là,

115
00:08:10,690 --> 00:08:12,155
et ensuite de le coller ici.

116
00:08:12,155 --> 00:08:15,715
Ensuite, examinez ce que fait ce pied de page.

117
00:08:15,715 --> 00:08:20,830
Donc ici, vous voyez que j'ai collé dans le code pour mon modèle de pied de page.

118
00:08:20,830 --> 00:08:24,130
Maintenant, je vais revenir à ce code un peu plus tard.

119
00:08:24,130 --> 00:08:28,045
Si vous avez fait le cours précédent sur Bootstrap,

120
00:08:28,045 --> 00:08:33,580
vous verrez que c'est la manière matérielle angulaire d'implémenter

121
00:08:33,580 --> 00:08:40,185
le même type de structure pour le pied de page que nous avons fait dans le cours Bootstrap.

122
00:08:40,185 --> 00:08:43,965
Certaines de ces choses seront déjà reconnaissables pour vous,

123
00:08:43,965 --> 00:08:48,260
mais laissez-moi terminer la mise à jour du modèle de pied de page,

124
00:08:48,260 --> 00:08:57,085
et ensuite nous ajouterons quelques codes SCSS dans mon fichier de pied de page Component.SCSS,

125
00:08:57,085 --> 00:09:02,100
et ensuite jeter un oeil à la façon dont le pied de page se forme maintenant.

126
00:09:02,100 --> 00:09:05,675
Donc ici, j'ai de nouveau collé dans le code

127
00:09:05,675 --> 00:09:09,585
des instructions d'exercice qui suivent cette vidéo,

128
00:09:09,585 --> 00:09:18,880
pour montrer les différentes classes SCSS que j'ai ajoutées dans mon pied de page.

129
00:09:18,880 --> 00:09:23,320
Donc, j'ai quelques classes que j'ai définies ici,

130
00:09:23,320 --> 00:09:27,380
Je vais les utiliser pour définir une partie de mon pied de page,

131
00:09:27,380 --> 00:09:29,570
et puis de même classe de pied de page ici,

132
00:09:29,570 --> 00:09:32,765
et j'ai un mélange SCSS ici,

133
00:09:32,765 --> 00:09:37,165
et quelques variables ici qui

134
00:09:37,165 --> 00:09:41,450
définissent différentes couleurs que je vais utiliser dans mon angulaire application.

135
00:09:41,450 --> 00:09:44,145
Alors, sauvegardons les modifications que nous avons apportées.

136
00:09:44,145 --> 00:09:49,755
Jetons un coup d'oeil au pied de page dans son incarnation actuelle,

137
00:09:49,755 --> 00:09:55,740
et puis nous reviendrons visiter rapidement le code que j'ai inclus à la fois

138
00:09:55,740 --> 00:10:02,345
dans le fichier de modèle de composants de pied de page et le code SCSS ici.

139
00:10:02,345 --> 00:10:06,835
En allant à notre application angulaire dans le navigateur, wallah,

140
00:10:06,835 --> 00:10:11,545
là vous avez le nouveau pied de page pour notre application angulaire.

141
00:10:11,545 --> 00:10:14,295
Donc, vous pouvez voir que j'ai quelques choses ici.

142
00:10:14,295 --> 00:10:19,840
Ceux-ci sur le bord gauche sont les différents liens

143
00:10:19,840 --> 00:10:25,975
vers diverses pages qui vont faire partie de mon application Angular.

144
00:10:25,975 --> 00:10:30,620
Nous allons voir comment nous le faisons dans le cadre des prochains exercices.

145
00:10:30,620 --> 00:10:35,110
Maintenant, ici, je fais usage du composant bouton que

146
00:10:35,110 --> 00:10:39,795
fait partie du matériel angulaire pour définir ces liens ici,

147
00:10:39,795 --> 00:10:41,870
puis j'ai l'adresse ici,

148
00:10:41,870 --> 00:10:46,810
et puis j'utilise aussi à nouveau des boutons pour définir cette séquence

149
00:10:46,810 --> 00:10:52,110
de boutons pour les différents liens de médias sociaux pour mon restaurant ici.

150
00:10:52,110 --> 00:10:55,515
Donc, vous pouvez voir que j'ai tout ça.

151
00:10:55,515 --> 00:10:57,470
Pour les créer, j'utilise

152
00:10:57,470 --> 00:11:01,820
le support matériel angulaire pour les petits boutons d'action flottants ici,

153
00:11:01,820 --> 00:11:05,155
et cela donne une belle structure pour cela.

154
00:11:05,155 --> 00:11:07,860
Si vous avez vu la version Bootstrap de ceci,

155
00:11:07,860 --> 00:11:14,205
Je l'aime beaucoup mieux que la version Bootstrap que j'ai créée dans le cours précédent.

156
00:11:14,205 --> 00:11:19,730
Donc, notre pied de page est maintenant bien en place.

157
00:11:19,730 --> 00:11:22,695
Regardons rapidement une partie du code dans le pied de page.

158
00:11:22,695 --> 00:11:27,890
Maintenant, je ne vais pas expliquer cela dans beaucoup de détails parce que c'est à

159
00:11:27,890 --> 00:11:33,665
traiter plus avec le matériau angulaire que Angular lui-même,

160
00:11:33,665 --> 00:11:36,780
mais en chemin en regardant simplement la structure du code,

161
00:11:36,780 --> 00:11:39,045
vous commencerez à voir comment

162
00:11:39,045 --> 00:11:45,095
ces composants angulaires peuvent être utilisés pour définir quelque chose comme ça.

163
00:11:45,095 --> 00:11:47,060
En allant au composant de pied de page,

164
00:11:47,060 --> 00:11:55,795
vous voyez que j'ai un div externe ici pour lequel j'ai spécifié une disposition angulaire,

165
00:11:55,795 --> 00:11:59,280
attributs de disposition flex ici,

166
00:11:59,280 --> 00:12:01,895
donc je dis que la ligne FxLayout,

167
00:12:01,895 --> 00:12:06,075
, puis FxLayout sm et xs à être colonne.

168
00:12:06,075 --> 00:12:10,160
Donc, pour les petites et extra petites tailles d'écran,

169
00:12:10,160 --> 00:12:14,380
va positionner tout le contenu comme des colonnes,

170
00:12:14,380 --> 00:12:16,990
mais pour les tailles d'écran plus grandes,

171
00:12:16,990 --> 00:12:18,300
il va les positionner comme ligne.

172
00:12:18,300 --> 00:12:21,545
Donc, c'est ce qui me donne la belle structure pour mon pied de page.

173
00:12:21,545 --> 00:12:24,790
Comme vous le voyez dans la div de l'interface utilisateur,

174
00:12:24,790 --> 00:12:28,810
Je positionne tout le centre de contenu ici,

175
00:12:28,810 --> 00:12:31,495
et ci-dessous ici,

176
00:12:31,495 --> 00:12:33,380
Je définit le premier.

177
00:12:33,380 --> 00:12:40,415
Donc, cette torsion mathématique ici que j'utilise définit mes liens ici.

178
00:12:40,415 --> 00:12:46,235
Donc, dans ce, j'utilise mat comme composant de matériau angulaire,

179
00:12:46,235 --> 00:12:49,425
et à l'intérieur, j'utilise le a avec

180
00:12:49,425 --> 00:12:58,990
l'attribut de composant de bouton mat attribué à a pour créer ces boutons ici.

181
00:12:58,990 --> 00:13:02,255
Plus tard, je vais revenir et ajouter

182
00:13:02,255 --> 00:13:07,665
le code réel pour ces liens dans les exercices suivants ici.

183
00:13:07,665 --> 00:13:12,940
C'est ce qui m'aide à créer la liste des liens sur le côté gauche.

184
00:13:12,940 --> 00:13:14,920
C'est l'adresse que vous voyez,

185
00:13:14,920 --> 00:13:17,420
c'est assez simple à regarder.

186
00:13:17,420 --> 00:13:22,080
Donc, c'est un div pour lequel j'utilise FxFlex avec 50,

187
00:13:22,080 --> 00:13:24,490
et l'autre avec FxFlex avec 40.

188
00:13:24,490 --> 00:13:29,230
Donc, 40 signifie 40 pour cent et 50 pour cent,

189
00:13:29,230 --> 00:13:33,150
et ici j'utilise FxFlex offset 20 pixels.

190
00:13:33,150 --> 00:13:37,410
Donc, il déplace ce contenu à droite de 20 pixels.

191
00:13:37,410 --> 00:13:41,830
Donc, il me reste un espace de 20 pixels sur le côté gauche pour

192
00:13:41,830 --> 00:13:47,660
cette div particulière contenant ces liens ici.

193
00:13:47,660 --> 00:13:49,400
Puis enfin ci-dessous,

194
00:13:49,400 --> 00:13:55,850
J'ai cet ensemble de liens que je fais pour

195
00:13:55,850 --> 00:14:02,340
créer la barre avec tous les liens de médias sociaux là-bas.

196
00:14:02,340 --> 00:14:06,330
Donc, j'utilise un avec le bouton icône mat ici.

197
00:14:06,330 --> 00:14:14,850
Donc, c'est ce qui crée les boutons arrondis que vous voyez dans le pied de page là-bas.

198
00:14:14,850 --> 00:14:16,150
Maintenant, pour chacun de ces éléments,

199
00:14:16,150 --> 00:14:18,640
J'applique la classe correspondante ici.

200
00:14:18,640 --> 00:14:21,745
Donc, vous pouvez remarquer que le bouton Google Plus, bouton Facebook,

201
00:14:21,745 --> 00:14:27,590
toutes ces classes sont définies dans mon fichier SCSS là-bas,

202
00:14:27,590 --> 00:14:31,540
où j'ai spécifié les couleurs pour l'arrière-plan et ainsi de suite pour cela,

203
00:14:31,540 --> 00:14:38,025
de sorte qu'il corresponde au schéma de couleurs typique que ces sites de médias sociaux utilisent.

204
00:14:38,025 --> 00:14:43,380
Alors, passez un peu de temps à regarder ce code ici,

205
00:14:43,380 --> 00:14:49,435
et puis vous aurez rapidement une idée de la façon dont le pied de page a été conçu.

206
00:14:49,435 --> 00:14:54,520
De même, aller aux composants du pied de page code Sass ici,

207
00:14:54,520 --> 00:14:57,460
afin que vous puissiez voir que j'ai défini différentes couleurs ici.

208
00:14:57,460 --> 00:15:00,970
J'utilise un mélange avec la marge mise en place ici,

209
00:15:00,970 --> 00:15:02,045
et puis pour mon pied de page,

210
00:15:02,045 --> 00:15:04,695
je définit la couleur de fond de manière appropriée,

211
00:15:04,695 --> 00:15:10,150
et remarque les différentes classes que je définit ici

212
00:15:10,150 --> 00:15:12,910
un bouton Facebook pour lequel la couleur et

213
00:15:12,910 --> 00:15:15,910
la couleur de fond que j'ai définie pour chacun d'eux.

214
00:15:15,910 --> 00:15:18,300
Donc, que la couleur correspondante de

215
00:15:18,300 --> 00:15:22,835
ce site de médias sociaux est utilisée comme couleur d'arrière-plan pour chacun de ces sites.

216
00:15:22,835 --> 00:15:25,255
Maintenant, dans le cours Bootstrap plus tôt,

217
00:15:25,255 --> 00:15:31,200
J'avais utilisé le Bootstrap Social pour réaliser la même chose.

218
00:15:31,200 --> 00:15:34,920
Cela ne fonctionne pas très bien avec le matériau Angular,

219
00:15:34,920 --> 00:15:41,170
donc c'est pourquoi je viens de créer mon propre ensemble de lunettes Sass ici,

220
00:15:41,170 --> 00:15:46,380
et puis ajouter le code que j'ai besoin pour créer ces boutons là.

221
00:15:46,380 --> 00:15:48,840
Si vous avez besoin d'ajouter plus de boutons,

222
00:15:48,840 --> 00:15:51,490
alors créez simplement plus de classes comme celles-ci correspond à

223
00:15:51,490 --> 00:15:54,695
les boutons que vous voulez ajouter dans votre application.

224
00:15:54,695 --> 00:15:57,355
Donc, cela construit notre pied de page.

225
00:15:57,355 --> 00:16:01,995
Maintenant, l'en-tête est la prochaine partie que nous allons cibler.

226
00:16:01,995 --> 00:16:04,770
Aller à l'en-tête, va ouvrir le fichier de modèle de composants d'en-tête

227
00:16:04,770 --> 00:16:09,320
et vous voyez ce qu'il contient.

228
00:16:09,320 --> 00:16:11,565
Nous allons remplacer ceci par

229
00:16:11,565 --> 00:16:16,115
le modèle que j'ai donné pour vous dans les instructions qui suivent ici.

230
00:16:16,115 --> 00:16:19,495
Alors, allez-y et coupez et collez ce code ici,

231
00:16:19,495 --> 00:16:22,730
parce que cela n'a rien à voir avec angulaire.

232
00:16:22,730 --> 00:16:26,620
Donc, c'est pourquoi je vous permet juste de couper et coller le code directement à partir de là,

233
00:16:26,620 --> 00:16:29,060
nous fait gagner du temps.

234
00:16:29,060 --> 00:16:35,300
Vous pouvez voir que j'ai maintenant remplacé le modèle d'en-têtes par du code ici.

235
00:16:35,300 --> 00:16:37,230
De même, pendant que nous y sommes,

236
00:16:37,230 --> 00:16:43,100
, nous allons également ajouter du code SCSS pour mon fichier Header.components.scss ici,

237
00:16:43,100 --> 00:16:46,550
juste aller et copier le code des instructions.

238
00:16:46,550 --> 00:16:48,845
De même, pendant que nous y sommes,

239
00:16:48,845 --> 00:16:55,810
nous ajouterons quelques classes SCSS à mon fichier principal Styles.scss.

240
00:16:55,810 --> 00:16:58,480
Donc, dans ce fichier principal Styles.scss,

241
00:16:58,480 --> 00:17:03,850
, je vais ajouter des sous-couleurs et quelques classes supplémentaires dans ce fichier.

242
00:17:03,850 --> 00:17:09,650
Alors, collons le code des instructions que je vous ai données.

243
00:17:09,650 --> 00:17:14,425
Donc, la mise à jour du fichier Styles.scss est maintenant terminée,

244
00:17:14,425 --> 00:17:18,165
donc j'ai ajouté quelques couleurs ici et mélangé là,

245
00:17:18,165 --> 00:17:23,230
et puis en bas j'ai ajouté quelques classes supplémentaires ici qui

246
00:17:23,230 --> 00:17:28,975
m'aide quand je conçois mes modèles pour mon application angulaire.

247
00:17:28,975 --> 00:17:30,680
Donc, tous ces changements,

248
00:17:30,680 --> 00:17:32,120
sauvegardons les changements,

249
00:17:32,120 --> 00:17:36,435
jetez un coup d'œil à mon en-tête maintenant dans l'application,

250
00:17:36,435 --> 00:17:41,735
et ensuite nous reviendrons et revisiterons rapidement le code que nous venons d'inclure ici.

251
00:17:41,735 --> 00:17:45,775
En revenant à mon application Angular dans le navigateur,

252
00:17:45,775 --> 00:17:51,820
vous voyez maintenant la barre d'outils réapparaît dans l'en-tête ici,

253
00:17:51,820 --> 00:17:56,980
avec quelques liens dans

254
00:17:56,980 --> 00:18:03,260
là, puis une image représentant le logo de mon restaurant,

255
00:18:03,260 --> 00:18:12,095
et puis ici, vous avez quelque chose que nous utilisons le fichier jumbotron dans le précédent Bien sûr.

256
00:18:12,095 --> 00:18:15,890
Je vais juste utiliser une classe appelée jumbotron pour créer ce

257
00:18:15,890 --> 00:18:20,015
dans l'application Angular aussi,

258
00:18:20,015 --> 00:18:24,545
donc ici sur le côté gauche j'ai les informations de mon restaurant et

259
00:18:24,545 --> 00:18:30,280
le logo du restaurant et m'ai laissé un peu d'espace ici pour ajouter quelque chose à l'avenir.

260
00:18:30,280 --> 00:18:36,610
Donc, ici, vous voyez mon application prendre forme avec un en-tête,

261
00:18:36,610 --> 00:18:38,745
avec quelques liens là-dedans.

262
00:18:38,745 --> 00:18:41,070
Maintenant, nous allons utiliser ces liens dans

263
00:18:41,070 --> 00:18:46,145
les prochains exercices pour configurer mon application Angular,

264
00:18:46,145 --> 00:18:52,220
puis le menu assis entre et puis en bas ici mon pied de page.

265
00:18:52,220 --> 00:18:55,100
En allant à mon fichier de modèle de composants d'en-tête,

266
00:18:55,100 --> 00:19:00,830
vous pouvez maintenant voir comment j'ai créé la barre d'outils avec les boutons supplémentaires ici.

267
00:19:00,830 --> 00:19:03,740
Donc, vous vous souvenez que nous avions la barre d'outils

268
00:19:03,740 --> 00:19:08,035
déjà utilisée dans le fichier de modèle de composants d'application,

269
00:19:08,035 --> 00:19:16,845
Je l'ai coupé à partir de là et utilisez plutôt la barre d'outils dans le modèle d'en-têtes ici.

270
00:19:16,845 --> 00:19:18,915
Maintenant, à l'intérieur de cette barre d'outils,

271
00:19:18,915 --> 00:19:26,260
J'ai inclus quelques liens avec la classe de boutons qui lui est appliquée et c'est ce que

272
00:19:26,260 --> 00:19:34,745
me permet de créer ces liens dans la barre d'outils comme un menu pour mon application web.

273
00:19:34,745 --> 00:19:40,855
Ci-dessous, j'ai créé un div avec le conteneur de classe et jumbotron.

274
00:19:40,855 --> 00:19:46,650
C'est la raison pour laquelle j'ai ajouté le conteneur et les classes jumbotron dans mon fichier SCSS,

275
00:19:46,650 --> 00:19:50,480
afin que je puisse les utiliser dans mes modèles ici.

276
00:19:50,480 --> 00:19:51,910
Donc, pour lequel encore une fois,

277
00:19:51,910 --> 00:20:01,025
j'applique et quelques attributs de mise en page flex ici pour m'aider à concevoir l'écran là.

278
00:20:01,025 --> 00:20:06,500
Ensuite, vous pouvez voir comment j'ai utilisé quelques divs ici avec

279
00:20:06,500 --> 00:20:13,815
l'attribut FxFlex appliqué en conséquence pour créer l'interface utilisateur,

280
00:20:13,815 --> 00:20:16,385
pour mon application ici.

281
00:20:16,385 --> 00:20:22,400
Alors, passez un peu de temps ici pour jeter un coup d'oeil à ce code ici pour

282
00:20:22,400 --> 00:20:29,130
comprendre rapidement comment ma mise en page pour mon modèle d'en-tête a été créée.

283
00:20:29,130 --> 00:20:30,620
Ce n'est pas si compliqué,

284
00:20:30,620 --> 00:20:32,825
une fois que vous avez terminé le cours Bootstrap,

285
00:20:32,825 --> 00:20:35,619
ce n'est pas si difficile à comprendre.

286
00:20:35,619 --> 00:20:39,520
En chemin, vous apprenez également la disposition du flex angulaire, puis

287
00:20:39,520 --> 00:20:44,105
aussi les composants du matériau angulaire ici.

288
00:20:44,105 --> 00:20:48,619
En allant au fichier SCSS pour le composant d'en-tête,

289
00:20:48,619 --> 00:20:52,300
vous pouvez voir que j'ai ajouté quelques couleurs ici, puis un mix

290
00:20:52,300 --> 00:20:56,100
dans et ensuite ajouté dans une classe jumbotron ici.

291
00:20:56,100 --> 00:20:58,275
Maintenant, la classe de conteneur n'est pas ici,

292
00:20:58,275 --> 00:21:01,315
la classe de conteneur est dans le fichier de styles principaux.

293
00:21:01,315 --> 00:21:03,600
Parce que la classe de conteneur est quelque chose que je vais utiliser

294
00:21:03,600 --> 00:21:06,010
pour beaucoup de modèles là-bas.

295
00:21:06,010 --> 00:21:11,800
Donc, c'est pourquoi, j'ai ajouté dans la classe conteneur au fichier Styles.scss

296
00:21:11,800 --> 00:21:18,020
qui est le fichier commun pour toute mon application angulaire.

297
00:21:18,020 --> 00:21:21,375
Donc, là, j'ai ajouté quelques couleurs supplémentaires ici,

298
00:21:21,375 --> 00:21:24,670
et aussi j'ai créé un mélange ici,

299
00:21:24,670 --> 00:21:26,759
puis ajouté dans le conteneur,

300
00:21:26,759 --> 00:21:29,980
le fond primaire, et les couleurs d'accent de fond,

301
00:21:29,980 --> 00:21:33,640
et puis j'utilise également une autre classe appelée flexes spacer,

302
00:21:33,640 --> 00:21:37,575
que je vais utiliser dans l'un des exercices ultérieurs.

303
00:21:37,575 --> 00:21:41,400
Toutes ces étapes sont en préparation pour ce qui va à

304
00:21:41,400 --> 00:21:45,150
venir dans les prochains exercices.

305
00:21:45,150 --> 00:21:51,920
Mon application Angular a maintenant pris une bonne forme en termes de la façon dont l'interface utilisateur est disposée,

306
00:21:51,920 --> 00:21:58,155
afin que je puisse maintenant commencer à introduire beaucoup plus de nouvelles fonctionnalités pour angulaire.

307
00:21:58,155 --> 00:22:02,005
En payant une visite de plus à mon application Angular dans le navigateur,

308
00:22:02,005 --> 00:22:08,450
me laisse voir à quoi ressemble cette application dans différentes tailles d'écran.

309
00:22:08,450 --> 00:22:11,430
Donc, c'est la taille standard de l'écran de bureau,

310
00:22:11,430 --> 00:22:17,020
donc passons à une taille d'écran plus petite et voyons à quoi ressemble l'application.

311
00:22:17,020 --> 00:22:21,690
Donc, il s'agit d'une taille d'écran iPhone 6 Plus,

312
00:22:21,690 --> 00:22:28,865
afin que vous puissiez voir comment la disposition est différente pour la taille d'écran plus petite.

313
00:22:28,865 --> 00:22:35,115
Donc, mon en-tête est juste en haut et mon menu en bas et le pied de page ici,

314
00:22:35,115 --> 00:22:38,955
remarque comment les différentes parties du pied de page ont été

315
00:22:38,955 --> 00:22:43,485
disposées différemment pour la taille de l'écran extra petite.

316
00:22:43,485 --> 00:22:49,950
C'est la même application en mode paysage ou un iPhone 6 Plus,

317
00:22:49,950 --> 00:22:58,205
afin que vous puissiez voir que mon en-tête est aménagé comme ça et le menu là-bas et le pied de page.

318
00:22:58,205 --> 00:23:04,230
Donc, cela vous montre que j'ai tiré parti de la disposition de flex angulaire

319
00:23:04,230 --> 00:23:10,510
pour pouvoir créer différentes mises en page pour différentes tailles d'écran.

320
00:23:10,510 --> 00:23:14,395
Donc, encore une fois, si vous avez suivi le cours Bootstrap plus tôt,

321
00:23:14,395 --> 00:23:19,420
vous commencerez à voir comment le design réactif avec

322
00:23:19,420 --> 00:23:25,950
la disposition de flex angulaire peut également être utilisé pour obtenir des résultats similaires.

323
00:23:25,950 --> 00:23:29,790
Donc, avec cela, nous terminons cet exercice.

324
00:23:29,790 --> 00:23:40,645
Dans cet exercice, nous avons préparé notre application Angular et l'avons préparé pour le reste des exercices de ce cours.

325
00:23:40,645 --> 00:23:47,300
C'est aussi le bon moment pour vous de faire un commit git avec l'en-tête et les pieds de page du message.