Partie 1 : Découvrir Angular
Partie 2 : Acquérir les bases sur Angular
Partie 3 : Aller plus loin avec Angular
1 de 2

7. 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. 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 est là dans le projet. Je vous propose donc de voir à quoi correspondent tous ces éléments :

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. On retrouve dans ce dossier notre premier composant Angular, app.component.ts, et notre premier module, app.module.ts. On aura l’occasion de revenir là-dessus très prochainement.
  • Le dossier assets : C’est le dossier qui est censé contenir 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 sur votre ordinateur local, serveur de production, etc. Nous n’allons pas vraiment avoir besoin de ce dossier pour la suite.
  • 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 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.css : 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.
  • Le fichier tsconfig.app.json : La configuration du compilateur TypeScript pour notre application Angular.
  • Le fichier gitignore : Les fichiers à ignorer pour le versioning avec Git. Si vous n’utilisez pas Git ou que vous ne savez pas à quoi sert cet outil, 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.

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 de votre application. C’est grandement suffisant pour commencer avec Angular !