1
00:00:04,070 --> 00:00:07,050
Ok, ok, je t'entends dire.

2
00:00:07,050 --> 00:00:08,280
Allons-y,

3
00:00:08,280 --> 00:00:09,835
montrez-moi du code.

4
00:00:09,835 --> 00:00:13,440
En effet, nous allons commencer à créer

5
00:00:13,440 --> 00:00:17,770
notre application Angular dans ce tout premier exercice.

6
00:00:17,770 --> 00:00:21,145
Nous allons utiliser l'interface de ligne de commande Angular,

7
00:00:21,145 --> 00:00:28,020
l'interface de ligne de commande Angular pour échafaudage de notre application Angular dans cet exercice.

8
00:00:28,020 --> 00:00:31,690
Ensuite, en passant par le reste des exercices dans ce cours,

9
00:00:31,690 --> 00:00:36,180
, nous construirons notre application Angular étape par étape.

10
00:00:36,180 --> 00:00:44,195
L'Angular CLI est un moyen très pratique de créer une application Angular.

11
00:00:44,195 --> 00:00:48,620
L'application Angular créée par l'interface de ligne de commande Angular suit les guides de style

12
00:00:48,620 --> 00:00:53,290
suggérés par les développeurs de framework Angular.

13
00:00:53,290 --> 00:00:56,405
Nous pouvons utiliser l'Angular CLI pour échafauder

14
00:00:56,405 --> 00:01:00,980
de nombreuses parties de notre application Angular, y compris les composants,

15
00:01:00,980 --> 00:01:04,275
les services de notre application Angular.

16
00:01:04,275 --> 00:01:08,480
L'Angular CLI est également livré avec son propre serveur intégré,

17
00:01:08,480 --> 00:01:14,405
que nous pouvons utiliser pour servir l'application Angular alors que nous la construisons,

18
00:01:14,405 --> 00:01:17,930
et ensuite voir notre application Angular dans

19
00:01:17,930 --> 00:01:22,870
le navigateur comme un aperçu en direct de notre application.

20
00:01:22,870 --> 00:01:24,805
Comme lorsque nous effectuons des modifications,

21
00:01:24,805 --> 00:01:28,940
les modifications seront immédiatement répercutées sur le navigateur.

22
00:01:28,940 --> 00:01:33,650
C'est la raison pour laquelle j'ai choisi d'utiliser l'interface de ligne de commande Angular comme

23
00:01:33,650 --> 00:01:39,365
l'approche pour construire notre application Angular dans ce cours.

24
00:01:39,365 --> 00:01:43,100
Pour commencer, allez à un emplacement pratique sur

25
00:01:43,100 --> 00:01:46,490
votre ordinateur et créez un dossier nommé Angular.

26
00:01:46,490 --> 00:01:52,065
Alors, je vais commencer à déménager dans mon dossier de documents Coursera.

27
00:01:52,065 --> 00:01:58,260
C'est là que je stocke tous mes fichiers pour mon cours Coursera,

28
00:01:58,260 --> 00:02:03,230
et puis je vais créer un dossier

29
00:02:03,230 --> 00:02:08,955
nommé Angular, puis un déplacement dans le dossier Angular.

30
00:02:08,955 --> 00:02:15,505
Maintenant, nous allons créer notre application Angular dans ce dossier.

31
00:02:15,505 --> 00:02:21,080
La première étape que nous faisons dans cet exercice est d'installer l'interface de ligne de commande angulaire.

32
00:02:21,080 --> 00:02:22,525
Donc, à l'invite,

33
00:02:22,525 --> 00:02:32,700
tapez npm install -g @angular /cli @ 6.2.1.

34
00:02:32,700 --> 00:02:35,430
Maintenant, chaque fois que j'installe un module NPM,

35
00:02:35,430 --> 00:02:39,725
, je vais également spécifier la version exacte du module NPM que j'installe.

36
00:02:39,725 --> 00:02:41,720
Je vous exhorte fortement à installer

37
00:02:41,720 --> 00:02:44,930
la même version du module NPM afin que vous puissiez passer par

38
00:02:44,930 --> 00:02:50,680
le reste des exercices sans avoir aucun problème avec les exercices.

39
00:02:50,680 --> 00:02:55,700
Donc, dans ce cas, j'installe la version 6.2.1 de l'Angular CLI.

40
00:02:55,700 --> 00:02:58,310
Maintenant, si vous faites cela sur un Mac ou Linux,

41
00:02:58,310 --> 00:03:02,565
n'oubliez pas le sudo devant l'installation de npm.

42
00:03:02,565 --> 00:03:05,095
L'installation prendra un certain temps.

43
00:03:05,095 --> 00:03:08,095
Donc, une fois l'installation terminée,

44
00:03:08,095 --> 00:03:13,655
alors l'interface de ligne de commande Angular sera disponible sur votre ligne de commande.

45
00:03:13,655 --> 00:03:15,750
Une fois l'installation terminée,

46
00:03:15,750 --> 00:03:18,885
vous pouvez vérifier et voir que l'interface de ligne de commande angulaire est installée.

47
00:03:18,885 --> 00:03:20,295
Une fois installé,

48
00:03:20,295 --> 00:03:25,190
, vous devrez peut-être redémarrer votre terminal pour

49
00:03:25,190 --> 00:03:30,835
pour que les outils CLI Angular soient disponibles à l'invite.

50
00:03:30,835 --> 00:03:35,390
L'interface de ligne de commande angulaire est disponible en tapant ng à

51
00:03:35,390 --> 00:03:39,910
l'invite suivie d'un ensemble d'instructions supplémentaires.

52
00:03:39,910 --> 00:03:46,105
Donc, la première commande que nous allons essayer est ng help,

53
00:03:46,105 --> 00:03:49,820
et ceci listera un ensemble de toutes les autres commandes

54
00:03:49,820 --> 00:03:53,855
que l'Angular CLI nous permet d'exécuter.

55
00:03:53,855 --> 00:03:56,720
Ng comme vous le voyez sera le préfixe de

56
00:03:56,720 --> 00:04:02,040
toutes les commandes de l'interface de ligne de commande angulaire que vous utiliserez dans ce cours.

57
00:04:02,840 --> 00:04:09,685
Ceci énumérera un ensemble de toutes les options que l'interface de ligne de commande Angular nous fournit.

58
00:04:09,685 --> 00:04:15,895
Nous allons apprendre beaucoup de ces commandes pendant que nous allons suivre le reste de ce cours.

59
00:04:15,895 --> 00:04:18,930
Pour créer une nouvelle application Angular,

60
00:04:18,930 --> 00:04:21,545
Je vais créer cette application dans

61
00:04:21,545 --> 00:04:25,660
le dossier Angular dans un sous-dossier nommé Confusion.

62
00:04:25,660 --> 00:04:29,210
Si vous avez suivi le cours précédent sur Bootstrap quatre,

63
00:04:29,210 --> 00:04:33,500
vous comprendrez pourquoi je nomme cette application comme Confusion.

64
00:04:33,500 --> 00:04:35,000
Donc, à l'invite,

65
00:04:35,000 --> 00:04:40,905
tapez ng new Confusion,

66
00:04:40,905 --> 00:04:45,945
et puis j'utiliserais sass comme

67
00:04:45,945 --> 00:04:53,080
le framework de style CSS pour mon application Angular.

68
00:04:53,080 --> 00:04:58,015
Donc, je spécifie moins style égal à SCSS,

69
00:04:58,015 --> 00:05:01,610
et appuyez sur le Retour et cela prendra un certain temps pour

70
00:05:01,610 --> 00:05:05,750
l'application Angular pour être créée dans le dossier courant.

71
00:05:05,750 --> 00:05:08,330
Une fois votre application installée,

72
00:05:08,330 --> 00:05:10,850
utilisons le serveur intégré de

73
00:05:10,850 --> 00:05:16,100
l'Angular CLI pour compiler notre application Angular et commencer à la servir.

74
00:05:16,100 --> 00:05:18,650
Passez au dossier Confusion,

75
00:05:18,650 --> 00:05:22,495
et à l'invite, tapez ng serve,

76
00:05:22,495 --> 00:05:27,470
et attendez que le serveur Angular Live Development démarre

77
00:05:27,470 --> 00:05:33,115
et construise notre application Angular et commence à servir l'application.

78
00:05:33,115 --> 00:05:35,175
Une fois terminé,

79
00:05:35,175 --> 00:05:39,920
alors vous remarquerez que cette application sera disponible en tapant

80
00:05:39,920 --> 00:05:50,425
a http://localhost:4200 dans la barre d'adresse de notre navigateur.

81
00:05:50,425 --> 00:05:53,975
Vous pouvez laisser le serveur de développement fonctionner en continu.

82
00:05:53,975 --> 00:05:57,020
Lorsque vous apportez des modifications à votre application Angular,

83
00:05:57,020 --> 00:06:01,520
le serveur recompilera automatiquement les modifications, puis

84
00:06:01,520 --> 00:06:06,320
commencera à servir l'application Angular mise à jour dans votre navigateur.

85
00:06:06,320 --> 00:06:13,370
Donc, ce serait une très bonne façon de regarder en direct les changements que vous faites

86
00:06:13,370 --> 00:06:16,760
dans votre application Angular étant immédiatement reflétée

87
00:06:16,760 --> 00:06:21,265
dans le navigateur où vous affichez votre application Angular.

88
00:06:21,265 --> 00:06:28,610
Si vous allez dans le navigateur et accédez à l'application Angular à localhost : 4200,

89
00:06:28,610 --> 00:06:31,135
, vous voyez que l'application commence à fonctionner,

90
00:06:31,135 --> 00:06:36,835
et elle servira cet ensemble de mots dans notre navigateur.

91
00:06:36,835 --> 00:06:42,140
Donc, c'est une application très simple que l'application angulaire bare-bones à

92
00:06:42,140 --> 00:06:47,490
vous aide à développer votre application Angular.

93
00:06:47,490 --> 00:06:52,460
Nous allons construire au-dessus de cette application échafaudée par Angular CLI,

94
00:06:52,460 --> 00:06:57,420
en implémentant diverses fonctionnalités dans le cadre de ce cours.

95
00:06:57,420 --> 00:07:01,710
Si vous prévoyez d'utiliser Git pour votre application Angular pour le versionnement,

96
00:07:01,710 --> 00:07:03,680
alors à ce stade,

97
00:07:03,680 --> 00:07:06,980
il peut être une bonne idée d'initialiser votre dépôt Git.

98
00:07:06,980 --> 00:07:12,620
L'Angular CLI effectue automatiquement l'initialisation de votre dépôt Git,

99
00:07:12,620 --> 00:07:18,765
et donc le premier commit avec le message commit initial dans le dépôt Git.

100
00:07:18,765 --> 00:07:23,610
Vérifions l'état de notre dépôt Git.

101
00:07:23,610 --> 00:07:28,310
Permet de vérifier en tapant git log

102
00:07:28,310 --> 00:07:29,600
une ligne et vous verrez que

103
00:07:29,600 --> 00:07:33,020
la configuration initiale a été engagée dans notre dépôt Git.

104
00:07:33,020 --> 00:07:36,920
Maintenant, nous pouvons commencer à travailler sur notre application Angular que nous

105
00:07:36,920 --> 00:07:41,020
avons échafaudé dans ce dossier ici.

106
00:07:41,020 --> 00:07:46,800
Si vous choisissez de synchroniser votre référentiel Git avec un référentiel en ligne,

107
00:07:46,800 --> 00:07:52,160
, assurez-vous que votre référentiel en ligne est un référentiel privé.

108
00:07:52,160 --> 00:07:56,835
Bitbucket vous permet de créer des dépôts privés gratuits.

109
00:07:56,835 --> 00:08:01,580
Alors, allez-y et configurez votre dépôt Git sur Bitbucket.

110
00:08:01,580 --> 00:08:04,350
Avec cela, nous terminons notre exercice.

111
00:08:04,350 --> 00:08:06,395
Dans ce premier exercice,

112
00:08:06,395 --> 00:08:08,635
nous avons installé l'Angular CLI.

113
00:08:08,635 --> 00:08:14,060
Ensuite, nous avons échafaudé notre application Angular sur laquelle nous allons travailler

114
00:08:14,060 --> 00:08:22,150
pour développer davantage dans le cadre du reste des exercices de ce cours.