Chap 3 : Structure d’un application Angular

Nous avons vu au chapitre précédent comment générer le squelette de base d’une application sous Angular 8. Nous avons vu une multitude de fichiers crées lors de cette génération effectue par Angular/Cli.

Sont-ils tous réellement utiles ? A quoi correspondent-ils ? Je vais vous en présenter les principaux à connaître.

Il faut savoir que Angular permet de créer une multitude de brique logiciel ( composant, service, classe…  ) que l’on va assembler entre eux de façon organisé et distincte ( module ).

 

Structure globale

/e2e

Ce dossier va permettre de rédiger divers test end to end par le framework Protractor

 

/package.json

C’est un fichier json qui va contenir la description de l’ensemble des modules NPM utilisé pour notre application. Vous aurez le choix d’installer ou d’update certains packet en comparant ce fichier. Utilise aussi pour gérer les dépendances nécessaires entre packet.

 

/angular.json

Fichier de configuration qui contient certains hyper paramètres important, tel que le dossier de sortir pour les builds de production, les dossiers contenant les fichiers de styles ou encore les assets, la page HTML principal à afficher, etc.

 

/src

Ce dossier va contenir l’ensemble de nos fichiers sources de notre application

 

Module et composition

Un module est un conteneur, un building block. Il permet de créer des packages distant d’un point de vue fonctionnalité. Par exemple pour un site web simple comme le bon coin, on peut avoir un module pour la gestion des annonces, et un module pour la gestion de l’authentification des comptes.

Ces modules nous apportent une plus fine granularité au sein d’un projet. Cela permet plus tard, d’améliorer l’extensibilité et la maintenabilité du code pour l’ajout de nouvelles fonctionnalités.

Vous pouvez créer un module via la commande Cli suivante :

• ng generate module [nom du module] –routing

L’option –routing est optionnel, mais nous facilite la tâche. Nous le verrons juste après.

 

Cette commande va nous créer plusieurs fichier. On imagine que notre module s’appelle APP.

• app.module.ts : c’est le fichier centrale de notre module. On y définit l’ensemble des imports qui seront utilisé dans notre module (librairies NPM), on y définit l’ensemble des composants qui y seront déclaré, mais aussi des services.  C’est quelque peu comme les fichiers H/HPP en C/C++.
• app-routing.module.ts : c’est le fichier responsable de la navigation entre composant, et donc entre les vues.

 

Component et composition

Un composant est une entité dans angular. Il prend la forme que vous lui donnez. Cela peut très bien être une page d’accueil en entier, comme une simple barre de navigation servant de menu. C’est à vous de choisir encore une fois la granularité que vous donnez aux objets de votre application.

 

Vous pouvez créer un composant via la commande Cli suivante :

• ng generate component [nom du composant]

 

Cette commande va nous créer plusieurs fichier. On imagine que notre module s’appelle comp1.

• comp1.component.css : c’est la feuille de style de notre component
• comp1.component.html : c’est la feuille qui correspond à la partie graphique, la vue
• comp1.component.spec.ts : c’est un fichier permettant de réaliser des tests, qui seront automatisé avec Protractor
• comp1.component.ts : c’est le contrôleur de notre component. Il va nous permettre d’y ajouter des fonctionnalités entre la vue, les boutons, la base de données, etc.