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

2
00:00:04,792 --> 00:00:10,490
Bienvenue à ce cours sur Front-End JavaScript Frameworks : Angular.

3
00:00:10,490 --> 00:00:16,178
C'est le deuxième cours de spécialisation sur le web full stack et les applications mobiles multi-plateformes

4
00:00:16,178 --> 00:00:19,840
.

5
00:00:19,840 --> 00:00:25,830
Ce cours traite des frameworks JavaScript, Angular en particulier.

6
00:00:25,830 --> 00:00:30,070
Vous devez vous demander, est-ce Angular deux, ou est-ce Angular ?

7
00:00:30,070 --> 00:00:34,940
Nous allons clarifier cela dans la toute première leçon sur l'introduction à Angular

8
00:00:34,940 --> 00:00:35,740
dans ce cours.

9
00:00:36,940 --> 00:00:39,390
Je suis content que vous ayez décidé de participer à ce cours.

10
00:00:39,390 --> 00:00:43,141
Et j'espère que vous aurez du plaisir à suivre ce cours.

11
00:00:44,766 --> 00:00:47,181
Avant de vous lancer dans ce cours,

12
00:00:47,181 --> 00:00:52,650
Je veux m'assurer que vous avez suffisamment de connaissances en HTML et CSS.

13
00:00:52,650 --> 00:00:59,448
Et aussi une bonne connaissance de travail de JavaScript, en particulier ES 5 JavaScript.

14
00:00:59,448 --> 00:01:04,526
Maintenant, ce cours nous allons utiliser Typescript comme langue pour

15
00:01:04,526 --> 00:01:07,880
écrire nos applications Angular.

16
00:01:07,880 --> 00:01:11,463
Maintenant, si vous vous demandez devrais-je connaître Typescript et

17
00:01:11,463 --> 00:01:15,870
devrais-je connaître ES 2015+, la nouvelle version de JavaScript ?

18
00:01:15,870 --> 00:01:18,710
Eh bien, votre kilométrage peut varier.

19
00:01:18,710 --> 00:01:23,050
Mon approche pour apprendre ces nouvelles langues est de les utiliser et

20
00:01:23,050 --> 00:01:24,900
puis d'apprendre en cours de route.

21
00:01:24,900 --> 00:01:27,230
C'est donc ce que nous ferons dans ce cours.

22
00:01:27,230 --> 00:01:32,208
Je ne vais pas vous présenter explicitement à Typescript spécifiquement dans ce cours.

23
00:01:32,208 --> 00:01:36,884
Mais au lieu de cela en écrivant le code, je vais illustrer diverses fonctionnalités

24
00:01:36,884 --> 00:01:41,842
de Typescript dans le contexte d'Angular que vous développez

25
00:01:41,842 --> 00:01:47,190
l'application Angular, dans les exercices dans le cadre de ce cours.

26
00:01:48,330 --> 00:01:52,630
Un autre point que je voudrais fortement clarifier à ce stade

27
00:01:52,630 --> 00:01:57,600
est que je considère le développement web et le design en deux parties.

28
00:01:57,600 --> 00:02:01,241
La première partie est le Web Design lui-même, l'User Experience ou

29
00:02:01,241 --> 00:02:05,705
User Inferface Design, le Visual Design, le Prototypage, les couleurs,

30
00:02:05,705 --> 00:02:07,232
graphiques et animation.

31
00:02:07,232 --> 00:02:10,477
Et tous ces aspects de la façon dont un site Web ou

32
00:02:10,477 --> 00:02:15,170
même une application mobile doivent être conçus.

33
00:02:15,170 --> 00:02:18,367
Maintenant, il y a l'autre aspect qui est la construction et le déploiement

34
00:02:18,367 --> 00:02:22,183
des applications web et des applications mobiles.

35
00:02:22,183 --> 00:02:25,633
Maintenant, dans ce cours, nous allons nous concentrer davantage sur la construction et le déploiement

36
00:02:25,633 --> 00:02:27,464
d'applications web.

37
00:02:27,464 --> 00:02:32,450
Si vous êtes à la recherche de l'aspect design de la conception et du développement web,

38
00:02:32,450 --> 00:02:36,285
alors ce n'est pas la bonne voie pour vous.

39
00:02:36,285 --> 00:02:39,940
Quand je parle de ce déploiement, de la construction et du développement

40
00:02:39,940 --> 00:02:44,440
d'applications web, nous parlons de compétences d'apprentissage

41
00:02:44,440 --> 00:02:50,020
qui sont essentielles pour traduire un design en code de travail.

42
00:02:50,020 --> 00:02:55,310
Donc ici, dans cette spécialisation, nous avons déjà appris sur Bootstrap 4.

43
00:02:55,310 --> 00:02:57,500
Dans ce cours, nous allons en apprendre davantage sur Angular.

44
00:02:57,500 --> 00:03:01,350
Ensuite, nous en apprendrons plus sur Ionic et NativeScript.

45
00:03:01,350 --> 00:03:06,780
Et puis aussi le développement côté serveur en utilisant l'écosystème Node et Node.

46
00:03:06,780 --> 00:03:10,240
C'est donc la concentration de ce cours particulier.

47
00:03:10,240 --> 00:03:16,320
Donc, nous parlons de codage réel, plutôt que de conception de site Web.

48
00:03:16,320 --> 00:03:20,310
L'autre question qui se posera dans votre esprit est ce qui est exactement le développement web de la pile

49
00:03:20,310 --> 00:03:21,700
?

50
00:03:21,700 --> 00:03:23,750
Si vous avez déjà suivi le cours précédent,

51
00:03:23,750 --> 00:03:26,540
Je vous ai présenté le développement web de pile complète.

52
00:03:26,540 --> 00:03:29,930
Si vous ne l'avez pas fait, la toute première leçon de ce cours

53
00:03:29,930 --> 00:03:34,430
serait une introduction rapide au développement web de pile complète.

54
00:03:34,430 --> 00:03:39,900
Et nous allons placer ce cours dans le contexte du développement web de pile complète.

55
00:03:39,900 --> 00:03:42,830
C'est pourquoi, dans le premier cours, nous avons couvert Bootstrap 4,

56
00:03:42,830 --> 00:03:46,470
dans ce cours, nous allons nous concentrer sur Angular.

57
00:03:46,470 --> 00:03:50,710
Ensuite, dans le cours suivant, nous allons regarder Ionic et Cordova pour

58
00:03:50,710 --> 00:03:54,590
faire multiplié pour le développement mobile.

59
00:03:54,590 --> 00:03:57,350
Ensuite, nous allons regarder NativeScript dans le quatrième cours.

60
00:03:57,350 --> 00:04:00,335
Et enfin, nous allons examiner le développement côté serveur,

61
00:04:00,335 --> 00:04:05,745
y compris en faisant la couche logique métier en utilisant l'écosystème Node.

62
00:04:05,745 --> 00:04:13,935
Et la couche de stockage de données utilisant MongoDB dans cette spécialisation.

63
00:04:13,935 --> 00:04:18,265
Ce cours spécifique, comme vous vous attendez, se concentre sur Angular.

64
00:04:18,265 --> 00:04:23,391
Vous serez présenté aux différents aspects du framework angulaire à travers

65
00:04:23,391 --> 00:04:27,520
un ensemble d'exercices qui se construisent les uns sur les autres.

66
00:04:27,520 --> 00:04:32,131
C'est donc une séquence d'exercices où je vais introduire divers concepts angulaires.

67
00:04:32,131 --> 00:04:37,772
Et puis vous montrer immédiatement comment nous appliquons ces concepts dans le contexte

68
00:04:37,772 --> 00:04:43,519
d'une application Angular que nous allons développer tout au long de ce cours.

69
00:04:43,519 --> 00:04:47,985
Maintenant, quand nous avons conçu les vues d'Angular,

70
00:04:47,985 --> 00:04:54,551
, nous allons utiliser le matériau Angular, pour faire l'interface utilisateur de nos composants Angular.

71
00:04:54,551 --> 00:05:00,962
Et nous allons faire des mises en page en utilisant le Flex-Layout angulaire dans ce cours.

72
00:05:00,962 --> 00:05:06,280
L'alternative serait d'utiliser Bootstrap 4 que nous avons appris plus tôt.

73
00:05:06,280 --> 00:05:15,060
Mais je me suis dit que ce cours vous donnera également l'occasion d'apprendre encore un autre framework d'interface utilisateur frontale.

74
00:05:15,060 --> 00:05:18,230
C'est un matériau angulaire et angulaire Flex-Layout pour

75
00:05:18,230 --> 00:05:22,110
faisant exactement les mêmes choses que nous avons faites avec Bootstrap 4.

76
00:05:22,110 --> 00:05:28,430
Ainsi, vous apprenez deux façons différentes d'aborder la conception de l'interface utilisateur

77
00:05:28,430 --> 00:05:35,300
en utilisant Bootstrap 4 ou en utilisant Angular Material plus Angular Flex-Layout.

78
00:05:35,300 --> 00:05:37,880
Nous allons également vous présenter les bases de TypeScript

79
00:05:37,880 --> 00:05:42,650
à travers les exercices alors que nous doublons notre application Angular.

80
00:05:42,650 --> 00:05:47,346
Le cours lui-même sera organisé en quatre modules.

81
00:05:47,346 --> 00:05:52,680
Les quatre modules sont conçus pour correspondre à quatre semaines de ce cours.

82
00:05:52,680 --> 00:05:55,450
Mais bien sûr, permettez-moi de vous souligner

83
00:05:55,450 --> 00:05:59,760
que vous n'avez pas besoin d'être pressé par les délais que nous avons dans ce cours.

84
00:05:59,760 --> 00:06:03,030
Vous pouvez prendre votre temps pour suivre le cours.

85
00:06:03,030 --> 00:06:07,900
Il est plus important de comprendre chaque aspect d'Angular.

86
00:06:07,900 --> 00:06:14,800
Si vous avez besoin de temps supplémentaire, n'hésitez pas à passer à la prochaine session de ce cours.

87
00:06:14,800 --> 00:06:16,450
Et puis continuez.

88
00:06:16,450 --> 00:06:19,950
Tous les travaux que vous avez terminés en une session seront automatiquement reportés

89
00:06:19,950 --> 00:06:22,010
à la prochaine session du cours.

90
00:06:22,010 --> 00:06:27,340
Alors ne laissez pas les délais vous presser de terminer ce cours.

91
00:06:27,340 --> 00:06:30,290
Maintenant, ayant donné cette idée générale,

92
00:06:30,290 --> 00:06:35,810
regardons ce que chacun des quatre modules couvrira dans ce cours.

93
00:06:35,810 --> 00:06:40,130
Le tout premier module vous présentera Full Stack Web Development,

94
00:06:40,130 --> 00:06:43,842
l'idée générale et la vue d'ensemble.

95
00:06:43,842 --> 00:06:50,230
Juste après, nous allons regarder un bref aperçu de Git et Node.

96
00:06:50,230 --> 00:06:53,250
Si vous avez fait le cours précédent Bootstrap 4,

97
00:06:53,250 --> 00:06:56,020
alors vous auriez déjà couvert ces deux cours dans le cours précédent.

98
00:06:56,020 --> 00:06:59,310
Alors vous pouvez rapidement passer à

99
00:06:59,310 --> 00:07:03,750
la première leçon qui vous présente Angular, l'introduction à Angular.

100
00:07:04,970 --> 00:07:10,020
Après l'introduction au framework Angular, puis la configuration de notre application Angular

101
00:07:10,020 --> 00:07:15,060
en utilisant le matériau Angular et Angular Flex-Layout.

102
00:07:15,060 --> 00:07:18,910
Ensuite, nous allons continuer à étudier plus sur les composants angulaires.

103
00:07:18,910 --> 00:07:23,880
Quel est le rôle des composants Angular dans la conception d'une application Angular et

104
00:07:23,880 --> 00:07:27,530
dans la conception des différentes vues qui seront prises en charge dans votre application Angular.

105
00:07:28,610 --> 00:07:32,990
Cela devrait vous mener jusqu'à la toute première affectation de ce cours.

106
00:07:32,990 --> 00:07:38,570
Le deuxième module se concentre sur les services angulaires, le routage

107
00:07:38,570 --> 00:07:41,110
et les applications d'une seule page.

108
00:07:41,110 --> 00:07:46,220
Nous examinons comment le feedback Angular prend en charge l'accès aux données et

109
00:07:46,220 --> 00:07:50,210
comment nous pouvons utiliser les services pour accéder aux données.

110
00:07:50,210 --> 00:07:54,160
De plus, comment utiliser les données pour concevoir

111
00:07:55,420 --> 00:08:00,040
nos vues pour nos différents composants Angular.

112
00:08:00,040 --> 00:08:04,240
C'est donc là que l'aspect de liaison de données entre dans l'image.

113
00:08:04,240 --> 00:08:06,920
Ensuite, nous allons regarder le routage angulaire et

114
00:08:06,920 --> 00:08:11,200
comment nous pouvons implémenter des applications d'une seule page dans Angular.

115
00:08:11,200 --> 00:08:13,920
Je vais vous expliquer ce qu'est une application d'une seule page et

116
00:08:13,920 --> 00:08:18,930
alors nous allons regarder comment nous pouvons en concevoir une en utilisant le framework Angular.

117
00:08:18,930 --> 00:08:24,060
Et cela vous mènera jusqu'à la deuxième affectation de ce cours.

118
00:08:24,060 --> 00:08:29,120
Le troisième module se concentre sur les formes angulaires.

119
00:08:29,120 --> 00:08:32,517
Ensuite, nous allons regarder Angular Reactive Forms et

120
00:08:32,517 --> 00:08:36,883
aussi comment la programmation Angular et Reactive fonctionnent ensemble.

121
00:08:36,883 --> 00:08:40,236
Et comment Angular tire parti de la programmation réactive pour

122
00:08:40,236 --> 00:08:45,470
implémentant diverses formes de support au sein de l'application Angular.

123
00:08:45,470 --> 00:08:50,324
Donc, nous allons regarder les formulaires pilotés par modèle, puis nous allons regarder les formes réactives angulaires,

124
00:08:50,324 --> 00:08:53,262
puis nous allons regarder comment Angular prend en charge les promesses.

125
00:08:53,262 --> 00:08:59,621
Et puis jetez également un bref coup d'oeil à la programmation réactive dans RxJS dans le contexte

126
00:08:59,621 --> 00:09:07,565
de la façon dont Angular exploite RxJS pour prendre en charge diverses fonctionnalités dans le cadre.

127
00:09:07,565 --> 00:09:12,130
Cela vous mènera jusqu'à la troisième mission de ce cours.

128
00:09:12,130 --> 00:09:15,980
Le dernier module examine la communication client-serveur.

129
00:09:15,980 --> 00:09:20,060
Comment votre application Angular peut communiquer avec un serveur

130
00:09:20,060 --> 00:09:24,220
qui fournit des données qui peuvent être récupérées du côté serveur et

131
00:09:24,220 --> 00:09:29,120
puis utilisées pour rendre les vues dans votre application Angular.

132
00:09:29,120 --> 00:09:33,370
En conséquence, nous allons également examiner comment toutes les modifications que vous souhaitez apporter aux données peuvent être reflétées sur le serveur,

133
00:09:33,370 --> 00:09:40,340
à partir de votre application Angular.

134
00:09:40,340 --> 00:09:44,670
Nous allons regarder Angular et le module HTTP dans Angular.

135
00:09:44,670 --> 00:09:48,731
Nous allons regarder comment l'API REST est exploitée pour

136
00:09:48,731 --> 00:09:52,171
concevoir votre application Angular,

137
00:09:52,171 --> 00:09:57,398
nous allons également regarder Animations et Directives dans Angular.

138
00:09:57,398 --> 00:10:00,040
En particulier, les directives d'attribut dans Angular.

139
00:10:00,040 --> 00:10:04,558
Nous allons examiner les directives de structure dans le tout premier module.

140
00:10:04,558 --> 00:10:10,140
Nous allons examiner brièvement les tests des applications Angular, puis enfin

141
00:10:10,140 --> 00:10:16,040
regarder comment nous allons construire et déployer notre application Angular sur un serveur.

142
00:10:16,040 --> 00:10:22,030
Et cela devrait vous mener jusqu'à la dernière affectation de ce cours.

143
00:10:22,030 --> 00:10:27,758
En cours de route, nous avons également une piste d'honneurs intégrée dans ce parcours.

144
00:10:27,758 --> 00:10:32,440
Si vous voulez travailler sur votre propre projet en utilisant Angular,

145
00:10:32,440 --> 00:10:37,950
alors la piste honors vous offre la possibilité de travailler

146
00:10:37,950 --> 00:10:43,470
sur votre propre projet dans ce cours particulier.

147
00:10:43,470 --> 00:10:48,840
Alors jetez un oeil à la piste des honneurs, et si cela vous intéresse, vous pouvez aussi poursuivre

148
00:10:48,840 --> 00:10:53,150
en développant votre propre projet Angular dans le contexte de ce cours.

149
00:10:54,190 --> 00:10:58,175
J'espère que vous apprécierez de suivre ce cours et d'apprendre Angular.

150
00:10:59,500 --> 00:11:04,550
Le dernier mot avec lequel je vais vous laisser est d'être patient.

151
00:11:04,550 --> 00:11:07,990
Angular nécessite beaucoup de patience pour apprendre.

152
00:11:07,990 --> 00:11:11,020
Il y aura beaucoup de concepts et de technologies

153
00:11:11,020 --> 00:11:15,740
que vous rencontrerez au cours de ce cours.

154
00:11:15,740 --> 00:11:19,620
S'il vous plaît ne vous dépêchez pas juste pour terminer le cours.

155
00:11:19,620 --> 00:11:26,716
Prenez votre temps pour comprendre chaque étape avant de terminer ce cours.

156
00:11:26,716 --> 00:11:29,987
J'espère que vous apprécierez ce cours.

157
00:11:29,987 --> 00:11:33,049
[MUSIQUE]