Ok, ok, je t'entends dire.
Allons-y,
montrez-moi du code.
En effet, nous allons commencer à créer
notre application Angular dans ce tout premier exercice.
Nous allons utiliser l'interface de ligne de commande Angular,
l'interface de ligne de commande Angular pour échafaudage de notre application Angular dans cet exercice.
Ensuite, en passant par le reste des exercices dans ce cours,
, nous construirons notre application Angular étape par étape.
L'Angular CLI est un moyen très pratique de créer une application Angular.
L'application Angular créée par l'interface de ligne de commande Angular suit les guides de style
suggérés par les développeurs de framework Angular.
Nous pouvons utiliser l'Angular CLI pour échafauder
de nombreuses parties de notre application Angular, y compris les composants,
les services de notre application Angular.
L'Angular CLI est également livré avec son propre serveur intégré,
que nous pouvons utiliser pour servir l'application Angular alors que nous la construisons,
et ensuite voir notre application Angular dans
le navigateur comme un aperçu en direct de notre application.
Comme lorsque nous effectuons des modifications,
les modifications seront immédiatement répercutées sur le navigateur.
C'est la raison pour laquelle j'ai choisi d'utiliser l'interface de ligne de commande Angular comme
l'approche pour construire notre application Angular dans ce cours.
Pour commencer, allez à un emplacement pratique sur
votre ordinateur et créez un dossier nommé Angular.
Alors, je vais commencer à déménager dans mon dossier de documents Coursera.
C'est là que je stocke tous mes fichiers pour mon cours Coursera,
et puis je vais créer un dossier
nommé Angular, puis un déplacement dans le dossier Angular.
Maintenant, nous allons créer notre application Angular dans ce dossier.
La première étape que nous faisons dans cet exercice est d'installer l'interface de ligne de commande angulaire.
Donc, à l'invite,
tapez npm install -g @angular /cli @ 6.2.1.
Maintenant, chaque fois que j'installe un module NPM,
, je vais également spécifier la version exacte du module NPM que j'installe.
Je vous exhorte fortement à installer
la même version du module NPM afin que vous puissiez passer par
le reste des exercices sans avoir aucun problème avec les exercices.
Donc, dans ce cas, j'installe la version 6.2.1 de l'Angular CLI.
Maintenant, si vous faites cela sur un Mac ou Linux,
n'oubliez pas le sudo devant l'installation de npm.
L'installation prendra un certain temps.
Donc, une fois l'installation terminée,
alors l'interface de ligne de commande Angular sera disponible sur votre ligne de commande.
Une fois l'installation terminée,
vous pouvez vérifier et voir que l'interface de ligne de commande angulaire est installée.
Une fois installé,
, vous devrez peut-être redémarrer votre terminal pour
pour que les outils CLI Angular soient disponibles à l'invite.
L'interface de ligne de commande angulaire est disponible en tapant ng à
l'invite suivie d'un ensemble d'instructions supplémentaires.
Donc, la première commande que nous allons essayer est ng help,
et ceci listera un ensemble de toutes les autres commandes
que l'Angular CLI nous permet d'exécuter.
Ng comme vous le voyez sera le préfixe de
toutes les commandes de l'interface de ligne de commande angulaire que vous utiliserez dans ce cours.
Ceci énumérera un ensemble de toutes les options que l'interface de ligne de commande Angular nous fournit.
Nous allons apprendre beaucoup de ces commandes pendant que nous allons suivre le reste de ce cours.
Pour créer une nouvelle application Angular,
Je vais créer cette application dans
le dossier Angular dans un sous-dossier nommé Confusion.
Si vous avez suivi le cours précédent sur Bootstrap quatre,
vous comprendrez pourquoi je nomme cette application comme Confusion.
Donc, à l'invite,
tapez ng new Confusion,
et puis j'utiliserais sass comme
le framework de style CSS pour mon application Angular.
Donc, je spécifie moins style égal à SCSS,
et appuyez sur le Retour et cela prendra un certain temps pour
l'application Angular pour être créée dans le dossier courant.
Une fois votre application installée,
utilisons le serveur intégré de
l'Angular CLI pour compiler notre application Angular et commencer à la servir.
Passez au dossier Confusion,
et à l'invite, tapez ng serve,
et attendez que le serveur Angular Live Development démarre
et construise notre application Angular et commence à servir l'application.
Une fois terminé,
alors vous remarquerez que cette application sera disponible en tapant
a http://localhost:4200 dans la barre d'adresse de notre navigateur.
Vous pouvez laisser le serveur de développement fonctionner en continu.
Lorsque vous apportez des modifications à votre application Angular,
le serveur recompilera automatiquement les modifications, puis
commencera à servir l'application Angular mise à jour dans votre navigateur.
Donc, ce serait une très bonne façon de regarder en direct les changements que vous faites
dans votre application Angular étant immédiatement reflétée
dans le navigateur où vous affichez votre application Angular.
Si vous allez dans le navigateur et accédez à l'application Angular à localhost : 4200,
, vous voyez que l'application commence à fonctionner,
et elle servira cet ensemble de mots dans notre navigateur.
Donc, c'est une application très simple que l'application angulaire bare-bones à
vous aide à développer votre application Angular.
Nous allons construire au-dessus de cette application échafaudée par Angular CLI,
en implémentant diverses fonctionnalités dans le cadre de ce cours.
Si vous prévoyez d'utiliser Git pour votre application Angular pour le versionnement,
alors à ce stade,
il peut être une bonne idée d'initialiser votre dépôt Git.
L'Angular CLI effectue automatiquement l'initialisation de votre dépôt Git,
et donc le premier commit avec le message commit initial dans le dépôt Git.
Vérifions l'état de notre dépôt Git.
Permet de vérifier en tapant git log
une ligne et vous verrez que
la configuration initiale a été engagée dans notre dépôt Git.
Maintenant, nous pouvons commencer à travailler sur notre application Angular que nous
avons échafaudé dans ce dossier ici.
Si vous choisissez de synchroniser votre référentiel Git avec un référentiel en ligne,
, assurez-vous que votre référentiel en ligne est un référentiel privé.
Bitbucket vous permet de créer des dépôts privés gratuits.
Alors, allez-y et configurez votre dépôt Git sur Bitbucket.
Avec cela, nous terminons notre exercice.
Dans ce premier exercice,
nous avons installé l'Angular CLI.
Ensuite, nous avons échafaudé notre application Angular sur laquelle nous allons travailler
pour développer davantage dans le cadre du reste des exercices de ce cours.