Retourner à : Angular 18 pour débutants
Pour ce deuxième chapitre de notre cours consacré à Angular, on va regarder comment créer un nouveau projet Angular à partir de rien, et puis on passera le reste de la vidéo à expliquer chaque fichier qu’Angular nous générera. Pour rappel, cette série de posts s’inscrit dans une longue lignée de posts dont le fil rouge est la création d’une application de visualisation et de gestion de cartes à collectionner de type Pokémon, Magic, Yu-Gi-Oh! ou autres.
Pour rappel dans le premier chapitre, nous avons vu comment installer Angular et VSCode, et donc, je pars du principe que vous avez un environnement de travail prêt à être utilisé. Passons donc tout de suite aux choses sérieuses. On va commencer par ouvrir un terminal. On va naviguer vers le dossier où on veut créer notre projet. Donc pour moi, ce sera le dossier Development:
cd developmentEt maintenant, on peut créer un nouveau projet Angular. Pour cela, il nous faut un nom de projet. Etant donné que nous allons créer une application de gestion de cartes à jouer, on va l’appeler « playing-cards ». Pour créer ce projet, on va taper:
ng new playing-cardsMaintenant, angular-cli va vous poser quelques questions:
Pour commencer, on nous demande quel format de stylesheet on veut utiliser. Ici, vous pouvez choisir l’option que vous préférez, si vous ne connaissez pas SCSS, Sass ou Less, vous pouvez garder l’option par défaut qui consiste à utiliser du CSS standard. Pour ma part, je vais sélectionner l’option CSS pour ce cours.
Maintenant, on nous demande si on veut activer le Servier-Side Rendering (en français: rendu côté serveur), qui consiste comme son nom l’indique, à effectuer le rendu initial des pages HTML côté serveur. Quand cette option est désactivée, votre navigateur reçoit une page HTML vide et doit exécuter le code Javascript fourni pour créer le rendu de la page.
Comme vous pouvez l’imaginer, l’option Server-Side Rendering peut grandement accélerer le premier affichage de votre page, mais elle nécessite de faire tourner des outils, qui vont exécuter votre code javascript côté serveur (e.g. pm2). Donc pour ce premier projet, on ne va pas utiliser le Server-Side Rendering. On tape donc un “N” dans la console, puis on valide avec “Entrer”.
Si la création et le déploiement d’une application avec du Server-Side Rendering vous intéresse, ne vous en faites pas, à la fin de ce cours, il y aura un chapitre dédié au sujet.
Ouvrons maintenant ce projet dans VSCode. Pour cela, on va naviguer dans le dossier qui vient d’être créé:
cd palying-cardset puis on tape:
vscode .Cette commande va lancer VSCode et ouvrir le dossier dans lequel vous vous trouvez. Bien sûr, vous pouvez aussi ouvrir VSCode normalement et ouvrir le dossier en question à travers le menu de VSCode.
Lorsque vous ouvrez le dossier pour la première fois, VSCode vous demande si vous voulez faire confiance à l’auteur des fichiers que vous venez d’ouvrir. Donc ici, on va appuyer sur “Yes, I trust the authors”.
Maintenant que notre projet est ouvert et avant de regarder un par un chaque dossier et fichier afin de comprendre à quoi ils servent, je vous propose de lancer notre projet Angular afin de voir à quoi le résultat ressemble! Pour cela, on va ouvrir un terminal dans VSCode en allant dans le menu “Terminal”, puis en cliquant sur “New Terminal”:
Et si tout s’est bien passé, vous avez un terminal en bas de vos écrans qui s’est ouvert dans le bon dossier et qui ressemble à ça:
Et là, pour lancer notre serveur de développement Angular, il suffit de taper:
ng serveNormalement, vous devriez voir que le serveur a été lancé sans erreur, ainsi que l’adresse à laquelle le serveur est joignable, donc ici http://localhost:4200/
Maintenant, vous pouvez ouvrir votre navigateur préféré à l’adresse http://localhost:4200/ pour visiter votre premier programme Angular:
Passons aux choses sérieuses et regardons les fichier qu’Angular a généré pour arriver à ce résultat. Pour commencer, attardons-nous sur les dossiers suivants:
- .angular: ce dossier est utilisé par Angular pour le caching des fichiers généré pendant le génération de l’application afin d’accélérer le temps de génération.
- .vscode: le dossier où vscode va stocker ses fichiers de configuration et de préférences. Si vous n’êtes pas sous VSCode, vous n’aurez pas ce dossier.
- node_modules: contient toutes les dépendances nécessaires à notre projet. On verra dans un autre chapitre comment ajouter de nouvelles bibliothèques à notre projet, et comme vous le verrez, ces bibliothèques seront elles aussi automatiquement installées dans ce dossier.
- public: va contenir vos images et les autres ressources statiques que vous souhaitez utiliser dans votre projet.
- src: va contenir notre code Angular à proprement parler, et nous allons nous attarder plus longtemps dessus, mais pour l’instant, on va l’ignorer et passer les autres fichiers en revue.
Ensuite, nous retrouvons quelques fichiers de configuration:
- .editorconfig: contient des configurations à l’attention de votre éditeur de code. Vous trouverez, par exemple, un paramètre qui indique la largeur des indentations. VSCode ne considère pas ce fichier par défaut et vous pouvez l’ignorer, mais si vous voulez vraiment l’utiliser, vous pouvez installer l’extension “EditorConfig for VS Code” et faire un « npm install editorconfig ».
- .gitignore: permet de définir les fichiers et dossiers qui ne doivent pas être poussés vers votre repo git. Si le terme « git » ne vous dit rien, vous pouvez ignorer ce fichier.
- angular.json: va contenir la configuration du projet Angular, c’est là qu’on trouvera les options de compilation, les chemins vers les fichiers sources, et autre.
- Package.json: un fichier pour npm qui indique toutes les dépendances du projet.
- Package-lock.json: très similaire à package.json à la différence près que ce fichier va contenir les versions exactes de chaque dépendance, le but étant de pouvoir utiliser ce fichier pour installer exactement les versions de chaque librairie sur une autre machine afin de s’assurer que chaque déploiement de l’application tourne dans les mêmes conditions.
- README.md: contient par défaut des instructions concernant Angular, et en général, vous allez supprimer tout ce contenu et le remplacer par des informations spécifiques à votre projet.
- tsconfig.json: contient des configurations qui sont utilisées lors de la compilation de Typescript en Javascript.
- tsconfig.app.json: hérite du fichier tsconfig.json et y ajouter les configurations spécifiques à la compilation de l’application angular
- tsconfig.spec.json: hérite également du fichier tsconfig.json et va lui ajouter les configurations spécifiques à la compilation des tests de l’application.
Bon, on a fait le tour des fichier de configuration. Maintenant attaquons-nous au dossier source.
Du bas vers le haut, nous avons les fichiers:
- styles.css: va contenir les styles css globaux de l’application
- main.ts: est le point d’entrée de l’application et va lancer l’affichage du module principale de l’application
- index.html: c’est dans ce fichier html que votre application sera affichée. Angular se chargera d’y injecter les balises script et link nécessaires à faire tourner votre projet lors de la compilation, et si vous avez des tags meta ou autre que vous souhaitez rajouter au header de votre page, vous pouvez le faire dans ce fichier.
- favicon.ico: l’icône de l’application, que vous pouvez remplacer par l’icône de votre choix.
- dossier app: contient le code principal de l’application. C’est là que vous allez passer la majorité de votre temps à coder.
Pour finir, regardons les fichiers qui se trouvent dans le dossier « app ». Tout d’abord, on a les fichiers « app.component », qui sont les fichiers qui définissent le composant principal de l’application, et qui sont composé de 4 fichiers:
- le fichier « css »: contient les styles spécifiques à ce composant
- le fichier « html »: va contenir le rendu du composant
- le fichier « ts »: va définir le comportement du composant
- le fichier « spec.ts »: contient les tests associés à ce composant.
Je ne vais pas parler plus en détails de ces 4 fichiers, car on en reparlera dans le prochain chapitre où on créera nos propres composants. Ensuite, nous avons encore les fichiers:
- app.config.ts: c’est ici qu’on pourra configurer nos dépendances externes.
- app.routes.ts: ici on va pouvoir définir des URL qu’on va mapper sur des composants, donc concrètement, c’est ici qu’on va définir ce qui sera affiché à l’écran selon l’adresse accédée.
Et voilà, on a fait le tour de tous les fichiers générés par Angular. Je sais que ce n’est pas le sujet le plus glamour, mais je pense qu’il est indispensable de connaître un minimum les fonctionnalités des fichiers générées automatiquement par nos frameworks préférés afin de ne pas se sentir submergé par l’environnement dans lequel on travaille.
Dans le prochain chapitre, on va voir plus en détail ce que sont les composants, et on va créer notre premier composant.
Quiz
Répondez au quiz ci-dessous afin de vérifier que vous avez bien compris le contenu de cette leçon. Les quiz sont uniquement disponibles pour les abonnés Standard et Premium.