Comment créer de meilleurs modèles angulaires avec Pug

En tant que développeur, j'apprécie la structure des applications angulaires et les nombreuses options que la CLI angulaire met à disposition pour les configurer. Les composants fournissent un moyen incroyable de structurer les vues, de faciliter la réutilisation du code, l'interpolation, la liaison de données et d'autres logiques métier pour les vues.

Angular CLI prend en charge plusieurs options de préprocesseur CSS intégrées pour le style des composants tels que Sass/SCSS, LESS et Stylus. Cependant, en ce qui concerne les modèles, seules deux options sont disponibles : HTML et SVG. Ceci malgré l'existence de nombreuses options plus efficaces telles que Pug, Slim, HAML, entre autres.

Dans cet article, je vais expliquer comment vous, en tant que développeur angulaire, pouvez utiliser Pug pour écrire de meilleurs modèles plus efficacement. Vous apprendrez à installer Pug dans vos applications Angular et à faire la transition des applications existantes qui utilisent HTML pour utiliser Pug.

Pug (anciennement connu sous le nom de Jade) est un moteur de template. Cela signifie que c'est un outil qui génère des documents à partir de modèles qui intègrent certaines données spécifiées. Dans ce cas, Pug est utilisé pour écrire des modèles qui sont compilés dans des fonctions qui prennent des données et restituent des documents HTML.

En plus de fournir un moyen plus simple d'écrire des modèles , il offre un certain nombre de fonctionnalités utiles qui vont au-delà de la simple écriture de modèles, comme les mixins qui facilitent la réutilisation du code, permettent l'intégration de code JavaScript, fournissent des itérateurs, des conditions, etc.

Bien que le HTML soit universellement utilisé par de nombreuses personnes et fonctionne correctement dans les modèles, il n'est pas DRY et peut devenir assez difficile à lire, à écrire et à entretenir, en particulier avec des modèles de composants plus volumineux. C'est là que Pug entre en jeu. Avec Pug, vos modèles deviennent plus simples à écrire et à lire et vous pouvez étendre les fonctionnalités de votre modèle en prime . Dans le reste de cet article, je vous expliquerai comment utiliser Pug dans vos modèles de composants angulaires.

Pourquoi devriez-vous utiliser Pug

HTML est fondamentalement répétitif. Pour la plupart des éléments, vous devez avoir une balise d'ouverture et de fermeture qui n'est pas DRY. Non seulement vous devez écrire plus avec HTML, mais vous devez aussi lire plus. Avec Pug, il n'y a pas de crochets d'ouverture et de fermeture ni de balises de fermeture. Vous écrivez et lisez donc beaucoup moins de code.

Par exemple, voici un tableau HTML :

 <table> <thead> <tr> <th>Country</th> <th>Capital</th> <th>Population</th> <th>Currency</th> </tr> </thead> <tbody> <tr> <td>Canada</td> <td>Ottawa</td> <td>37.59 million</td> <td>Canadian Dollar</td> </tr> <tr> <td>South Africa</td> <td>Cape Town, Pretoria, Bloemfontein</td> <td>57.78 million</td> <td>South African Rand</td> </tr> <tr> <td>United Kingdom</td> <td>London</td> <td>66.65 million</td> <td>Pound Sterling</td> </tr> </tbody> </table>

Voici à quoi ressemble cette même table dans Pug :

 table thead tr th Country th Capital(s) th Population th Currency tbody tr td Canada td Ottawa td 37.59 million td Canadian Dollar tr td South Africa td Cape Town, Pretoria, Bloemfontein td 57.78 million td South African Rand tr td United Kingdom td London td 66.65 million td Pound Sterling

En comparant les deux versions de la table, Pug semble beaucoup plus propre que HTML et a une meilleure lisibilité du code. Bien que négligeable dans ce petit exemple, vous écrivez sept lignes de moins dans le tableau Pug que dans le tableau HTML. Au fur et à mesure que vous créez plus de modèles au fil du temps pour un projet, vous finissez par écrire moins de code avec Pug .

Au-delà des fonctionnalités fournies par le langage de modèle angulaire, Pug étend ce que vous pouvez réaliser dans vos modèles. Avec des fonctionnalités (telles que les mixins, l'interpolation de texte et d'attributs, les conditions, les itérateurs, etc.), vous pouvez utiliser Pug pour résoudre des problèmes plus simplement, contrairement à l'écriture de composants entièrement séparés ou à l'importation de dépendances et à la configuration de directives pour répondre à une exigence.

Certaines caractéristiques du carlin

Pug offre un large éventail de fonctionnalités, mais les fonctionnalités que vous pouvez utiliser dépendent de la manière dont vous intégrez Pug dans votre projet. Voici quelques fonctionnalités qui pourraient vous être utiles.

1. Ajout de fichiers Pug externes à un modèle à l'aide include .
   
   Disons, par exemple, que vous aimeriez avoir un modèle plus succinct mais que vous ne ressentez pas le besoin de créer des composants supplémentaires. Vous pouvez retirer des sections d'un modèle et les placer dans des modèles partiels, puis les réintégrer dans le modèle d'origine.
   
   Par exemple, dans ce composant de la page d'accueil, les sections "À propos" et "Services" se trouvent dans des fichiers externes et sont incluses dans le composant de la page d'accueil.
   

    //- home.component.pug h1 Leone and Sons h2 Photography Studio include partials/about.partial.pug include partials/services.partial.pug

    //- about.partial.pug h2 About our business p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    //- services.partial.pug h2 Services we offer P Our services include: ul li Headshots li Corporate Event Photography

   

2. Réutiliser des blocs de code à l'aide de mixins .
   
   Par exemple, supposons que vous vouliez réutiliser un bloc de code pour créer des boutons. Vous réutiliseriez ce bloc de code en utilisant un mixin.
   

    mixin menu-button(text, action) button.btn.btn-sm.m-1('(click)'=action)&attributes(attributes)= text +menu-button('Save', 'saveItem()')(class="btn-outline-success") +menu-button('Update', 'updateItem()')(class="btn-outline-primary") +menu-button('Delete', 'deleteItem()')(class="btn-outline-danger") 

   

3. Les conditionnels facilitent l'affichage des blocs de code et des commentaires selon qu'une condition est remplie ou non.
   

    - var day = (new Date()).getDay() if day == 0 p We're closed on Sundays else if day == 6 p We're open from 9AM to 1PM else p We're open from 9AM to 5PM

   

4. Les itérateurs tels que each et while fournissent des fonctionnalités d'itération .
   

    ul each item in ['Eggs', 'Milk', 'Cheese'] li= item ul while n < 5 li= n++ + ' bottles of milk on the wall'

   

   

5. Le JavaScript en ligne peut être écrit dans des modèles Pug, comme illustré dans les exemples ci-dessus.
6. L'interpolation est possible et s'étend aux balises et aux attributs.
   

    - var name = 'Charles' p Hi! I'm #{name}. p I'm a #[strong web developer]. a(href='https://about.me/${name}') Get to Know Me

   

7. Les filtres permettent l'utilisation d'autres langues dans les modèles Pug .
   
   Par exemple, vous pouvez utiliser Markdown dans vos modèles Pug après avoir installé un module JSTransformer Markdown.
   

    :markdown-it # Charles the Web Developer ![Image of Charles](https://charles.com/profile.png) ## About Charles has been a web developer for 20 years at **Charles and Co Consulting.** 

   

Ce ne sont là que quelques fonctionnalités offertes par Pug. Vous pouvez trouver une liste plus complète de fonctionnalités dans la documentation de Pug.

Comment utiliser Pug dans une application angulaire

Pour les applications nouvelles et préexistantes utilisant Angular CLI 6 et versions ultérieures, vous devrez installer ng-cli-pug-loader . C'est un chargeur CLI angulaire pour les modèles Pug.

Pour les nouveaux composants et projets

1. Installez ng-cli-pug-loader .
   

    ng add ng-cli-pug-loader

2. Générez votre composant selon vos préférences.
   
   Par exemple, supposons que nous générons un composant de page d'accueil :
   

    ng gc home --style css -m app

3. Remplacez l'extension de fichier HTML, .html par une extension Pug, .pug . Étant donné que le fichier généré initialement contient du HTML, vous pouvez choisir de supprimer son contenu et de recommencer avec Pug à la place. Cependant, HTML peut toujours fonctionner dans les modèles Pug, vous pouvez donc le laisser tel quel.
4. Modifiez l'extension du modèle en .pug dans le décorateur de composants.
   

    @Component({ selector: 'app-component', templateUrl: './home.component.pug', styles: ['./home.component.css'] })

Pour les composants et projets existants

1. Installez ng-cli-pug-loader .
   

    ng add ng-cli-pug-loader

2. Installez l'outil CLI html2pug. Cet outil vous aidera à convertir vos modèles HTML en Pug.
   

    npm install -g html2pug

3. Pour convertir un fichier HTML en Pug, exécutez :
   

    html2pug -f -c < [HTML file path] > [Pug file path]

   Puisque nous travaillons avec des modèles HTML et non des fichiers HTML complets, nous devons passer le -f pour indiquer à html2pug qu'il ne doit pas envelopper les modèles qu'il génère dans les balises html et body . Le drapeau -c permet html2pug de savoir que les attributs des éléments doivent être séparés par des virgules lors de la conversion. Je vais expliquer pourquoi c'est important ci-dessous.
4. Remplacez l'extension du modèle par .pug dans le décorateur de composant comme décrit dans la section Pour les nouveaux composants et projets .
5. Exécutez le serveur pour vérifier qu'il n'y a aucun problème avec le rendu du modèle Pug.
   
   S'il y a des problèmes, utilisez le modèle HTML comme référence pour déterminer ce qui a pu causer le problème. Cela peut parfois être un problème d'indentation ou un attribut non cité, bien que rare. Une fois que vous êtes satisfait du rendu du modèle Pug, supprimez le fichier HTML.

Éléments à prendre en compte lors de la migration des modèles HTML vers Pug

Vous ne pourrez pas utiliser de modèles Pug en ligne avec ng-cli-pug-loader . Cela rend uniquement les fichiers Pug et ne rend pas les modèles en ligne définis dans les décorateurs de composants. Ainsi, tous les modèles existants doivent être des fichiers externes. Si vous avez des modèles HTML en ligne, créez des fichiers HTML externes pour eux et convertissez-les en Pug en utilisant html2pug .

Une fois convertis, vous devrez peut-être corriger les modèles qui utilisent des directives de liaison et d'attribut. ng-cli-pug-loader exige que les noms d'attributs liés dans Angular soient entourés de guillemets simples ou doubles ou séparés par des virgules. La façon la plus simple de procéder serait d'utiliser le drapeau -c avec html2pug . Cependant, cela ne résout que les problèmes avec les éléments qui ont plusieurs attributs. Pour les éléments avec des attributs uniques, utilisez simplement des guillemets.

Une grande partie de la configuration décrite ici peut être automatisée à l'aide d'un exécuteur de tâches, d'un script ou d'un schéma angulaire personnalisé pour les conversions à grande échelle si vous choisissez d'en créer un. Si vous avez quelques modèles et que vous souhaitez effectuer une conversion incrémentielle, il serait préférable de ne convertir qu'un seul fichier à la fois.

Syntaxe du langage de modèle angulaire dans les modèles Pug

Pour la plupart, la syntaxe du langage de modèle angulaire reste inchangée dans un modèle Pug, cependant, en ce qui concerne la liaison et certaines directives (comme décrit ci-dessus), vous devez utiliser des guillemets et des virgules puisque () , [] et [()] interfèrent avec la compilation des modèles Pug. Voici quelques exemples:

 //- [src], an attribute binding and [style.border], a style binding are separated using a comma. Use this approach when you have multiple attributes for the element, where one or more is using binding. img([src]='itemImageUrl', [style.border]='imageBorder') //- (click), an event binding needs to be enclosed in either single or double quotes. Use this approach for elements with just one attribute. button('(click)'='onSave($event)') Save

Les directives d'attribut telles que ngClass , ngStyle et ngModel doivent être placées entre guillemets. Les directives structurelles telles que *ngIf , *ngFor , *ngSwitchCase et *ngSwitchDefault doivent également être placées entre guillemets ou utilisées avec des virgules. Les variables de référence de modèle (par exemple #var ) n'interfèrent pas avec la compilation du modèle Pug et n'ont donc pas besoin de guillemets ou de virgules. Les expressions de modèle entourées de {{ }} ne sont pas affectées.

Inconvénients et compromis de l'utilisation de Pug dans les modèles angulaires

Même si Pug est pratique et améliore les flux de travail, son utilisation présente certains inconvénients et certains compromis doivent être pris en compte lors de l'utilisation ng-cli-pug-loader .

Les fichiers ne peuvent pas être inclus dans les modèles à l'aide include sauf s'ils se terminent par .partial.pug ou .include.pug ou s'appellent mixins.pug . En plus de cela, l'héritage de modèle ne fonctionne pas avec ng-cli-pug-loader et, par conséquent, l'utilisation de blocs, l'ajout et l'ajout de code Pug n'est pas possible bien qu'il s'agisse d'une fonctionnalité Pug utile.

Les fichiers Pug doivent être créés manuellement car Angular CLI ne génère que des composants avec des modèles HTML. Vous devrez supprimer le fichier HTML généré et créer un fichier Pug ou simplement modifier l'extension du fichier HTML, puis modifier le templateUrl dans le décorateur du composant. Bien que cela puisse être automatisé à l'aide d'un script, d'un schéma ou d'un Task Runner, vous devez implémenter la solution.

Dans les grands projets Angular préexistants, le passage des modèles HTML aux modèles Pug implique beaucoup de travail et de complexité dans certains cas. Faire le changement entraînera beaucoup de code de rupture qui doit être corrigé fichier par fichier ou automatiquement à l'aide d'un outil personnalisé. Les liaisons et certaines directives angulaires dans les éléments doivent être citées ou séparées par des virgules.

Les développeurs qui ne connaissent pas Pug doivent d'abord apprendre la syntaxe avant de l'incorporer dans un projet. Pug n'est pas seulement du HTML sans crochets ni balises fermantes et implique une courbe d'apprentissage.

Lors de l'écriture de Pug et de l'utilisation de ses fonctionnalités dans les modèles angulaires, ng-cli-pug-loader ne donne pas aux modèles Pug l'accès aux propriétés du composant. Par conséquent, ces propriétés ne peuvent pas être utilisées comme variables, dans les conditions, dans les itérateurs et dans le code en ligne. Les directives angulaires et les expressions de modèle n'ont pas non plus accès aux variables Pug. Par exemple, avec les variables Pug :

 //- app.component.pug - var shoppingList = ['Eggs', 'Milk', 'Flour'] //- will work ul each item in shoppingList li= item //- will not work because shoppingList is a Pug variable ul li(*ngFor="let item of shoppingList") {{item}}

Voici un exemple avec une propriété d'un composant :

 //- src/app/app.component.ts export class AppComponent{ shoppingList = ['Eggs', 'Milk', 'Flour']; }

 //- app.component.pug //- will not work because shoppingList is a component property and not a Pug variable ul each item in shoppingList li= item //- will work because shoppingList is a property of the component ul li(*ngFor="let item of shoppingList") {{item}}

Enfin, index.html ne peut pas être un modèle Pug. ng-cli-pug-loader ne prend pas en charge cela.

Conclusion

Pug peut être une ressource incroyable à utiliser dans les applications angulaires, mais il nécessite un certain investissement pour apprendre et s'intégrer dans un projet nouveau ou préexistant. Si vous êtes prêt à relever le défi, vous pouvez consulter la documentation de Pug pour en savoir plus sur sa syntaxe et l'ajouter à vos projets. Bien que ng-cli-pug-loader soit un excellent outil, il peut faire défaut dans certains domaines. Pour adapter le fonctionnement de Pug dans votre projet, envisagez de créer un schéma angulaire qui répondra aux exigences de votre projet.