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

En tant que développeur, j'apprécie la structure des applications Angular et les nombreuses options que la CLI Angular propose pour les configurer. Les composants fournissent un moyen étonnant 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. . Cependant, en ce qui concerne les modèles, seules deux options sont disponibles: HTML et SVG. Ceci en dépit 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 Angular, pouvez utiliser Pug pour écrire de meilleurs modèles plus efficacement. . Vous apprendrez à installer Pug dans vos applications angulaires et à faire la transition des applications existantes qui utilisent HTML pour utiliser Pug.

Pug (anciennement 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 en fonctions qui prennent des données et rendent des documents HTML.

En plus de fournir un moyen plus rationalisé d'écrire des modèles il offre un certain nombre de

Bien que 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 les 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 vais vous expliquer comment utiliser Pug dans vos modèles de composants angulaires.

Pourquoi utiliser Pug

Le 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 sèche. Non seulement vous devez écrire plus avec HTML, mais vous devez également lire plus. Avec Pug, il n'y a pas de supports d'angle d'ouverture et de fermeture et pas de balises de fermeture. Vous écrivez et lisez donc beaucoup moins de code.

Par exemple, voici un tableau HTML:

   

       

           
 Pays 
           
 Capitale 
           
 Population 
           
 Monnaie 
       
   
   

       

           
 Canada 
           
 Ottawa 
           
 37,59 millions 
           
 Dollar canadien 
       
       

           
 Afrique du Sud 
           
 Le Cap, Pretoria, Bloemfontein 
           
 57,78 millions 
           
 Rand sud-africain 
       
       

           
 Royaume-Uni 
           
 Londres 
           
 66,65 millions 
           
 Livre sterling 
       
   

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

 table
 la tête
   tr
     e pays
     e Capital (s)
     e population
     e monnaie
 tbody
   tr
     td Canada
     td Ottawa
     37,59 millions de dinars
     td Dollar canadien
   tr
     td Afrique du Sud
     td Le Cap, Pretoria, Bloemfontein
     57,78 millions de dinars
     td Rand sud-africain
   tr
     td Royaume-Uni
     td Londres
     66,65 millions de dinars
     td Livre sterling

En comparant les deux versions du tableau, 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 la table Pug que dans la table HTML. Lorsque vous créez plus de modèles au fil du temps pour un projet, vous finissez par écrire cumulativement 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 les problèmes plus simplement, contrairement à l'écriture de composants séparés entiers ou à l'importation de dépendances et à la définition de directives pour répondre à une exigence. [19659012] Certaines fonctionnalités de Pug

Pug offre une large gamme de fonctionnalités, mais les fonctionnalités que vous pouvez utiliser dépendent de la façon dont vous intégrez Pug dans votre projet. Voici quelques fonctionnalités qui pourraient vous être utiles.

1. L'ajout de fichiers Pug externes à un modèle à l'aide de inclut .

   Disons, par exemple, que vous aimeriez avoir un modèle plus succinct mais ne ressentent 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 page d'accueil, la section «À propos» et «Services» sont dans des fichiers externes et sont inclus dans le composant de la page d'accueil.

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

    // - about.partial.pug
   h2 À propos de notre entreprise
   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 conséquat. 

    // - services.partial.pug
   h2 Services que nous offrons
   P Nos services comprennent:
   ul
       Li Headshots
       li Corporate Event Photography 

   

2. Réutilisation de blocs de code à l'aide de mixins .

   Pour Par exemple, supposons que vous vouliez réutiliser un bloc de code pour créer des boutons. Vous réutilisez ce bloc de code à l'aide d'un mixin.

    bouton de menu mixin (texte, action)
       button.btn.btn-sm.m-1 (‘(click)’ = action) & attributes (attributes) = texte
   
   + bouton de menu ('Enregistrer', 'saveItem ()') (class = "btn-outline-success")
   + bouton de menu ('Update', 'updateItem ()') (class = "btn-outline-primary")
   + bouton de menu ('Supprimer', 'deleteItem ()') (class = "btn-outline-danger")
   

   

3. Les conditions permettent d'afficher facilement les blocs de code et les commentaires si une condition est remplie ou non.

    - var day = (new Date ()). getDay ()
   
   si jour == 0
      p Nous sommes fermés le dimanche
   sinon si jour == 6
      p Nous sommes ouverts de 9h à 13h
   autre
      p Nous sommes ouverts de 9 h à 17 h 

   

4. Itérateurs tels que chacun et tandis que fournit une fonctionnalité d'itération .

    ul
    chaque élément dans ['Eggs', 'Milk', 'Cheese']
      li = article
   
   ul
    tandis que n 

   

   

5. L'interpolation est possible et s'étend aux balises et aux attributs.

    - var name = 'Charles'
   p Salut! Je suis # {name}.
   
   p Je suis un # [strong web developer].
   
   a (href = 'https: //about.me/$ {name}') Apprenez à me connaître 

   

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 au-dessus, vous besoin d'installer ng-cli-pug-loader . Il s'agit d'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. Modifiez l'extension du fichier HTML, .html à 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 ({
      sélecteur: '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 la html2pug CLI outil . 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 [Pug file path]

   Puisque nous travaillons avec Modèles HTML et fichiers HTML incomplets, nous devons passer le -f pour indiquer à html2pug qu'il ne doit pas encapsuler les modèles qu'il génère dans html et corps tags. L'indicateur -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 cela est important ci-dessous.

4. Modifiez l'extension du modèle en .pug dans le décorateur de composants, 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 de HTML vers des modèles 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. Tous les modèles existants doivent donc ê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'attribut liés en angulaire soient placés entre 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âche ou 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 disposez de quelques modèles et que vous souhaitez effectuer une conversion incrémentielle, il serait préférable de convertir un seul fichier à la fois.

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

Pour la plupart, syntaxe du langage de modèle angulaire reste inchangé 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 car () [] et [()] interfèrent avec la compilation de modèles Pug. Voici quelques exemples:

 // - [src]une liaison d'attribut et [style.border]une liaison de style sont séparées à l'aide d'une virgule. Utilisez cette approche lorsque vous avez plusieurs attributs pour l'élément, où un ou plusieurs utilisent la liaison.
img ([src] = 'itemImageUrl', [style.border] = 'imageBorder')

// - (cliquez), une liaison d'événement doit être placée entre guillemets simples ou doubles. Utilisez cette approche pour les éléments avec un seul attribut.
button ('(click)' = 'onSave ($ event)') Save 

Les directives d'attribut comme ngClass ngStyle et ngModel doivent être mises entre guillemets. Les directives structurelles comme * ngIf * ngFor * ngSwitchCase et * ngSwitchDefault doivent également être mises entre guillemets ou utilisées avec des virgules . Les variables de référence du 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, il y a quelques inconvénients à l'utiliser et certains compromis qui doivent être pris en compte lors de l'utilisation de ng-cli-pug-loader .

Les fichiers ne peuvent pas être inclus dans les modèles à l'aide de incluent sauf s'ils se terminent en .partial.pug ou .include.pug ou sont appelés 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 ne sont pas possibles malgré le fait qu'il s'agit d'une fonctionnalité Pug utile. [19659005] Les fichiers Pug doivent être créés manuellement car la CLI angulaire 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 changer l'extension du fichier HTML, puis changer le templateUrl dans le décorateur de composants. Bien que cela puisse être automatisé à l'aide d'un script, d'un schéma ou d'un exécuteur de tâches, vous devez implémenter la solution.

Dans les projets angulaires préexistants plus importants, 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'intégrer dans un projet. Pug n'est pas seulement HTML sans crochets et balises fermantes et implique une courbe d'apprentissage.

Lors de l'écriture de Pug et de l'utilisation de ses fonctionnalités dans des modèles angulaires ng-cli-pug-loader ne donne pas accès aux modèles Pug pour les propriétés du composant. Par conséquent, ces propriétés ne peuvent pas être utilisées comme variables, dans des conditions, dans des itérateurs et dans du 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 des variables Pug:

 // - app.component.pug
- var shoppingList = ['Eggs', 'Milk', 'Flour']

//- marchera
ul
   chaque article dans shoppingList
       li = article

// - ne fonctionnera pas car shoppingList est une variable Pug
ul
   li (* ngFor = "let item of shoppingList") {{item}} 

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

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

 // - app.component.pug

// - ne fonctionnera pas car shoppingList est une propriété de composant et non une variable Pug
ul
   chaque article dans shoppingList
       li = article

// - fonctionnera car shoppingList est une propriété du composant
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 cela en charge.

Conclusion

Le roquet peut être une ressource incroyable à utiliser dans les applications angulaires, mais il nécessite un certain investissement pour apprendre et s'intégrer dans une nouvelle ou projet 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 certaines régions. Pour adapter le fonctionnement de Pug à votre projet, envisagez de créer un schéma angulaire qui répondra aux exigences de votre projet.

(ra, yk, il)