Partie 1 : Démarrer un projet sur de bonnes bases
Partie 2 : Construire un espace membre sécurisé avec JWT
Partie 3 : Implémenter des fonctionnalités métiers
Partie 4 : Bonus

3. Présentation du socle généré par Angular CLI

Jusqu’à maintenant, tout ce que nous avons fait avait l’air… « magique ». Exécuter une simple commande, et hop, on obtient un socle prêt pour notre application Angular. Pourtant, il n’y a rien de magique. Je vous invite donc à ouvrir votre éditeur de texte favori, et à ouvrir le socle que Angular-CLI a généré pour nous, dans le dossier “awesome-list ». Et là, c’est la panique.

Mais… Qu’est-ce que tous ces fichiers font là ? Une application devrait pouvoir fonctionner avec moins de fichiers non, pourquoi ce superflu ?

Angular CLI a généré beaucoup de fichiers pour nous !

Je vous propose de vous expliquer à quoi correspondent tous ces fichiers générés. Une fois que vous aurez compris, vous saurez pourquoi chaque fichier a sa place dans le projet. Je vous propose donc de voir à quoi correspondent tous ces éléments :

Le dossier git : Angular CLI est livré avec le système de versioning Git par défaut. Vous pouvez donc vous en servir pour versionner votre projet. Si vous n’avez jamais entendu parler de Git, ou que vous ne l’aviez jamais utilisé, vous pouvez supprimer ce dossier. Votre application continuera à fonctionner parfaitement, promis !

Le dossier e2e : Ce dossier contient les tests end-2-end de votre application. Il s’agit de tests qui permettent de simuler des parcours dans votre application du point de vue de l’utilisateur, et s’assurer que tout fonctionne correctement. Par exemple, « l’utilisateur se connecte », « l’utilisateur modifie ses identifiants », etc. Si vous n’avez jamais entendu parler de ce genre de tests, vous pouvez ignorer ce dossier pour l’instant. Conservez-le quand même, car nous développerons des tests plus tard pour notre application.

Le dossier node_modules : Il s’agit du dossier qui contient toutes les dépendances dont notre application a besoin pour fonctionner. Angular CLI a déjà installé ces dépendances pour nous.

Le dossier src : C’est dans ce dossier que se trouve l’essentiel du code source de notre projet. C’est donc ici que vous allez passer la plupart de votre temps en tant que développeur. Tous nos composants Angular, nos templates, nos styles, et tous les autres éléments de notre application se trouveront dans ce dossier. Tous les fichiers en dehors de ce dossier sont destinés à soutenir la création de votre application. Vous retrouvez dans ce dossier plusieurs éléments :

  • Le dossier app : Il s’agit du dossier qui contient le code source de notre application, comme mentionné ci-dessus.
  • Le dossier assets : C’est le dossier qui contient les images de votre application. Vous pouvez également ajouter d’autres fichiers dont vous pourrez avoir besoin. Un fichier PDF à télécharger pour vos utilisateurs par exemple.
  • Le dossier environments : Ce dossier contient un fichier de configuration pour chacun de vos environnements de destination : développement, production, etc. Vous pouvez définir des variables d’environnements pour chaque environnement, comme une URL de destination pour vos appels HTTP, qui sera certainement différente entre votre machine de développement et le serveur de production. Les fichiers seront remplacés à la volée lorsqu’on générera une archive de notre application.
  • Le fichier browserlist : C’est un fichier de configuration utilisé par Angular CLI pour paramétrer certains outils en fonction de tel ou tel navigateur.
  • Le fichier favicon.ico : Il s’agit de la fameuse icône qui s’affiche dans l’onglet de votre navigateur lorsque vous lancez votre application. Par défaut, il s’agit du logo d’Angular.
  • Le fichier index.html : C’est l’unique page HTML de notre application ! C’est elle qui contiendra l’ensemble de notre application.
  • Le fichier karma.conf.js : C’est le fichier de configuration de Karma, qui est un outil permettant d’exécuter des tests unitaires dans votre application.
  • Le fichier main.ts : C’est le point d’entrée principale de notre application. Il s’occupe de compiler notre application, et lance le module racine de celle-ci.
  • Le fichier polyfill.ts : Les différents navigateurs existants n’ont pas le même niveau de prise en charge des normes du Web. Les polyfills servent à lisser ces différences en uniformisant le comportement de votre code entre tous les navigateurs.
  • Le fichier style.scss : Le fichier qui contient le style global de votre application. La plupart du temps, vous aurez besoin que vos styles soient attachés à un composant. Cependant, pour une maintenance plus facile, les règles de style qui affectent toutes votre application doivent être centralisées. Vous pouvez bien sûr ajouter du code CSS classique dans ce fichier si vous ne souhaitez pas utiliser de code SASS.
  • Le fichier test.ts : C’est le point d’entrée principal pour vos tests unitaires.
  • Le fichier tsconfig.app.json : La configuration du compilateur TypeScript pour notre application Angular.
  • Le fichier tsconfig.spec.json : La configuration du compilateur TypeScript aussi, mais pour les tests unitaires cette fois.
  • Le fichier tslint.json : C’est un fichier de configuration qui définit une syntaxe de code commune à notre projet, et nous aide ainsi à garder un style de code cohérent lors de nos développements.
  • Le fichier editorconfig : Ce fichier permet de préciser quelques éléments pour votre éditeur de texte, comme le nombre d’espaces pour les tabulations. L’éternel débat (2 ou 4 espaces) n’est donc pas fini ! Je recommande deux indentations personnellement, et il s’agit du format généré par défaut par Angular CLI. Vous n’avez donc rien à changer dans ce fichier.
  • Le fichier gitignore : Les fichiers à ignorer pour le versioning avec Git. Si vous n’utilisez pas Git, vous pouvez supprimer ce fichier. Sinon gardez-le, il est déjà préconfiguré pour le projet.
  • Le fichier angular.json : La configuration d’Angular CLI. Vous pouvez définir plusieurs valeurs par défaut et configurer également les fichiers inclus lors de la création de votre projet. Par exemple, c’est dans ce fichier que se trouve le préfixe que l’on a défini précédemment en ligne de commande.
  • Le fichier package-lock.json : Il s’agit d’un fichier propre au fonctionnement du Node Package Manager, qui a à voir avec les dépendances de vos dépendances. En effet, vous déclarez vos dépendances dans le fichier package.json, mais vos dépendances peuvent elles-mêmes avoir des dépendances qui sont en conflit. Je ne rentre pas plus dans les détails, car normalement, vous n’aurez jamais à modifier ce fichier. Dites-vous simplement que vous n’avez pas à vous en occuper.
  • Le fichier package.json : Le fichier bien connu qui vous permet de déclarer toutes les dépendances de votre projet. Vous pouvez également ajouter vos propres scripts personnalisés dans ce fichier, en plus de ceux d’Angular CLI.
  • Le fichier README.md : Un fichier vous permettant de renseigner des informations pour démarrer et développer votre projet. Si vous êtes motivés, vous pourrez essayer de modifier ce fichier, afin d’indiquer à toute personne récupérant votre projet comment démarrer l’application sur sa machine !
  • Le fichier tsconfig.json : C’est le fichier principal de la configuration de TypeScript, celui que j’ai mentionné au-dessus est simplement une configuration supplémentaire qui étend celle-ci.
  • Le fichier tslint.json : C’est également un fichier de configuration qui définit une syntaxe de code commune au projet, comme le fichier du même nom que nous avons abordés précédemment. Cependant, il s’agit du fichier principal de configuration, l’autre ne fait qu’étendre celui-ci.

Bon, j’espère ne pas vous avoir endormis avec mes explications. Même si vous n’avez pas compris précisément le rôle de chacun des fichiers, retenez simplement que les fichiers sources sont dans le dossier “src”, et que le reste concerne la configuration et les tests de votre application. C’est grandement suffisant pour commencer avec Angular CLI !

Avant de terminer, j’aimerais également vous présenter quelques commandes mises à disposition par Angular CLI, en plus de celles que nous venons de voir.