Salut les dev, aujourd’hui on va parler d’angular, nous allons décomposer sa structure et comprendre un peu tenter de vous faire comprendre les entrailles du framework.
Comparé à React et vuejs, Angular est un outil imposant. La structure du code est plutôt stricte et ne permet pas forcément une grande souplesse dans la façon de réaliser des applications. Il est donc important de comprendre son architecture pour appréhender l’apprentissage de celui-ci rapidement.
La structure de base du framework
Les modules
Les modules sont le coeur d’Angular, ce sont des éléments complexes regroupant un ensemble de composants, de service et de sous modules qui vont nous permettre de découper notre application. Chaque module doit correspondre à un thème. Si nous prenons le cas d’une application de gestion d’entreprise, nous aurions un module pour gérer les contacts, un module pour gérer les factures, un module pour gérer les devis et des modules nous permettent aussi de gérer le routing ainsi que les composants partagés au sein de toute l’application.
Les composants
Comme son nom l’indique, un composant est une partie d’une application, d’une interface. Ce composant peut être soit dumb, soit smart. Les notions de Dumb et Smart components ne sont pas propres à angular, mais nous allons quand même aborder un peu mieux ce qui les différencie.
On entend par dumb component, un composant qui ne réfléchit pas, qui ne servira donc uniquement qu’à de la présentation. il recevra ses éléments depuis une configuration externe. On peut donc imaginer une liste de contact comme étant un dumb component. Le composant recevra la liste des éléments ont affiché dans le DOM et ne se chargera pas de savoir comment il les récupère
On entend par smart component, un composant qui réfléchit, il sait comment gérer les données, interagir avec les services. Ce sont généralement des composants dits conteneur. Ils servent de conteneur pour les dumb components et se chargent de récupérer et distribuer les données. Dans notre cas, la liste de contact sera entouré d’un composant qui ira faire les requêtes qui vont bien pour agréger les données.
Les services
Les services sont des classes de gestion qui vont nous permettre d’interagir avec nos composants au travers d’observable, de requêtes HTTP, ou nous permettre de manipuler les métas de notre application.
Les services sont injectés dans l’application au travers d’un conteneur d’injection de dépendance. Ce conteneur nous permet de choisir le scope de diffusion de notre service en spécifiant à quel module ou composant il appartient et donc quel module ou composant peut l’utiliser.
Les directives
Une directive est une class qui va ajouter un comportement supplémentaire ou modifie l’apparence d’un élément présent dans notre application Angular. Dans notre cas, au survol du nom d’un contact dans un CRM, nous pourrions avoir un tooltip qui permettrait par exemple d’avoir l’id du user, ce tooltip n’a pas besoin d’être un composant, nous allons donc ajouter cette fonctionnalité au travers d’une directive qui ajoutera du HTML le moment venu dans notre élément HTML.
Les pipes
Les pipes peuvent être considérées comme un flux de traitement de données, la donnée en entrée passera dans différentes fonctions. Ces fonctions peuvent effectuer toutes le traitement possible sur la donnée. Elle prend un type en entrée et en retourne un autre en sortie, on pourrait imaginer avoir une chaine de caractère en entrée, la transformer en majuscules puis par tronquer le contenu en fonction de sa taille.
RXJS
RXJS est une librairie fonctionnelle qui se base sur le pattern Observer/Observable et qui permet de mettre en place facilement le principe de programmation réactive au sein du framework. Pour faire simple, elle expose un ensemble de function qui permet de traiter la donnée comme un flux.
Nous avons donc vu là toute l’architecture de base du framework et comment il est structuré, j’espère que ça vous aurez permis de comprendre un peu mieux angular et vous permettre d’aborder un peu mieux l’apprentissage de ce framework.