À Vyconsulting, nous avons développé 95% des projets de nos clients et mêmes nos projets internes avec le framework front-end ❤️Angular❤️. Il s’agit d’un framework appartenant au géant de la tech Google dont la première version fut officielle en 2016 (ne pas confondre AngularJS et Angular). La plupart des développeurs que nous côtoyons ont toujours été curieux de connaître la raison du choix de ce stack (technologie). Ils seront donc surpris aujourd’hui d’apprendre qu’il n’existe pas qu’une seule raison mais des centaines de milliards de raisons (n’exagérons pas 😁😁😁 ). So, let’s go !

The most successful men work smart, not hard

Bangambiki Habyarimana, The Great Pearl of Wisdom

Tout d’abord, il faudra que nous insistons sur le terme framework qui signifie un ensemble de librairies allant de la plus simple à la plus complexe qui permettent de simplifier la tâche au développeur à travers les modules et méthodes qu’elles offrent. Vu de cet angle, ça donne envie d’en savoir plus sur le choix de ❤️Angular❤️.
Nous allons décortiquer le framework en nous basant sur quelques fonctionnalités clés de ce dernier :

🚀 Un framework MVP(Model View Presenter | Modèle Vue Présentation) entièrement basé sur le langage TypeScript (💙TS💙):

En termes clairs, en ❤️Angular❤️, vous aurez pour chaque page web appelée component, un fichier pour coder votre logique métier ce qui fait référence au fichier .ts (Présentation) qui est en étroit lien avec la vue (Vue) c’est-à-dire le fichier .html et votre modèle qui est également une classe (Modèle) écrite en 💙TS💙. En se basant sur le💙TS💙, ❤️Angular❤️encourage le développeur à typer rigoureusement ses variables, objets et méthodes: on parle de typage fort. Ainsi, il y a une transparence, une lisibilité et une clairvoyance de votre code qui sera sans doute facile à maintenir plus tard.

🚀 Une CLI (Command Line Interface | Interface en Ligne de Commande) de rêve🥰:

Notez que ❤️Angular❤️ met à votre disposition une CLI qui génère 90% de tout ce dont vous aurez besoin dans votre projet ! Tout ce qui vous reste à faire est d’implémenter votre logique métier. Cette CLI vous permet déjà :

    ✅ de créer un projet ❤️Angular❤️ sur mesure à travers une série de questions 

    ✅ de générer une page web de votre application appelée ici component tout en précisant déjà la route pour y accéder dans l’URL

    ✅ de générer un guard (un composant qui servira de gendarme afin de décider si l’utilisateur à le droit d’accéder à cette page ou non)

    ✅ de générer un service qui n’est rien d’autre un composant qui vous permettra de mettre à disposition de toutes vos pages des méthodes qui seront répétitives à longue

    ✅ de mettre à niveau votre projet automatiquement vers une version récente du framework

    ✅ … pour ne citer que cela (en savoir plus) et tout ça juste en une ligne de commandes…like a boss😎

🚀 Le data-binding:

Il s’agit d’un concept très intéressant qui met en exergue la communication temps réel entre votre template HTML et votre fichier de présentation 💙TS💙 (où vous écrivez votre logique métier). En effet, toutes les variables globales de votre fichier 💙TS💙 sont écoutées par le fichier HTML de façon continue. Hélas ! Il ne s’agit pas que des variables ; il y a les méthodes également. Ce n’est pas bien ça ?😌

🚀 Les directives:

Ce sont des fonctions qui permettent de modifier le comportement d’un composant de votre template HTML. Par défaut, il en existe quelques-unes déjà qui sont présentes dans le noyau de votre projet. Nous pouvons citer :

    ✅ *ngIf (*ngIf…else): qui permet d’appliquer une condition surtout lorsqu’il s’agit d’afficher ou non un composant

    ✅ *ngFor: qui est la similitude de la boucle foreach ou for(let item of array)

    ✅ ngSwitch: qui est la similitude du switch…case

    ✅ … (en savoir plus). Vous pouvez aussi créer vos propres directives si vous le désirez ! Est-ce que ce n’est pas bien ça my friend ?😁

🚀 Les pipes:

Les pipes sont des fonctions qui vous permettent de formater, en étant dans votre template, l’affichage de l’information à rendre à l’utilisateur. Il en existe aussi plusieurs à savoir :

    ✅  DatePipe: permet d’appliquer des transformations sur la date 

    ✅  UpperCasePipe: permet de transformer votre texte en majuscule

    ✅  LowerCasePipe: permet de transformer votre texte en minuscule

    ✅ CurrencyPipe: permet d’afficher le montant d’un article en respectant les normes standards

    ✅ DecimalPipe: permet de formater l’affichage des nombres à virgule

    ✅ … (en savoir plus). Tout comme les directives, vous pouvez créer votre propre pipe.

Nous allons nous en arrêter là pour le moment. Rendez-vous dans le prochain chapitre pour découvrir le reste des fonctionnalités ❤️super funs❤️.
Laissez-nous en commentaires ce que vous en pensez ! Nous serions ravis de vous lire ! Stay tuned🤓