Cómo crear mejores plantillas angulares con Pug

 

 

 


Índice
  1. Por qué deberías usar Pug
  2. Algunas características del Pug
  3. Cómo usar Pug en una aplicación angular
    1. Para nuevos componentes y proyectos
    2. Para componentes y proyectos existentes
    3. Cosas a considerar al migrar de HTML a plantillas Pug
  4. Sintaxis del lenguaje de plantilla angular en plantillas Pug
  5. Inconvenientes y compensaciones del uso de Pug en plantillas angulares
  6. Conclusión

Pug es un motor de plantillas que te permite escribir plantillas más limpias con menos repeticiones. En Angular, puedes usar Pug para escribir plantillas de componentes y mejorar el flujo de trabajo de desarrollo de un proyecto. En este artículo, Zara Cooper explica qué es Pug y cómo puedes usarlo en tu aplicación Angular.

 

Como desarrollador, aprecio cómo están estructuradas las aplicaciones Angular y las muchas opciones que Angular CLI pone a disposición para configurarlas. Los componentes proporcionan un medio sorprendente para estructurar vistas, facilitar la reutilización del código, la interpolación, el enlace de datos y otra lógica empresarial para las vistas.

Angular CLI admite múltiples opciones de preprocesador CSS integradas para diseñar componentes como Sass/SCSS, LESS y Stylus. Sin embargo, cuando se trata de plantillas, sólo hay dos opciones disponibles: HTML y SVG. Esto a pesar de que existen muchas opciones más eficientes como Pug, Slim, HAML, entre otras.

En este artículo, cubriré cómo usted, como desarrollador de Angular, puede usar Pug para escribir mejores plantillas de manera más eficiente. Aprenderá cómo instalar Pug en sus aplicaciones Angular y realizar la transición de aplicaciones existentes que usan HTML para usar Pug.

Gestión de puntos de interrupción de imágenes

Una función Angular incorporada llamada BreakPoint Observer nos brinda una interfaz poderosa para manejar imágenes responsivas. Lea más sobre un servicio que nos permite servir, transformar y gestionar imágenes en la nube.Leer un artículo relacionado →

Pug (anteriormente conocido como Jade) es un motor de plantillas. Esto significa que es una herramienta que genera documentos a partir de plantillas que integran algunos datos específicos. En este caso, Pug se utiliza para escribir plantillas que se compilan en funciones que toman datos y representan documentos HTML.

Además de proporcionar una forma más ágil de escribir plantillas , ofrece una serie de características valiosas que van más allá de la simple escritura de plantillas, como mixins que facilitan la reutilización del código, permiten la incrustación de código JavaScript, proporcionan iteradores, condicionales, etc.

Aunque muchos utilizan HTML de forma universal y funciona adecuadamente en plantillas, no es SECO y puede resultar bastante difícil de leer, escribir y mantener, especialmente con plantillas de componentes más grandes. Ahí es donde entra Pug. Con Pug, sus plantillas se vuelven más sencillas de escribir y leer y puede ampliar la funcionalidad de su plantilla como una ventaja adicional . En el resto de este artículo, le explicaré cómo usar Pug en sus plantillas de componentes Angular.

Por qué deberías usar Pug

HTML es fundamentalmente repetitivo. Para la mayoría de los elementos es necesario tener una etiqueta de apertura y cierre que no esté SECA. No sólo hay que escribir más con HTML, sino que también hay que leer más. Con Pug, no hay corchetes angulares de apertura y cierre ni etiquetas de cierre. Por lo tanto, estás escribiendo y leyendo mucho menos código.

Por ejemplo, aquí hay una tabla HTML:

table thead tr thCountry/th thCapital/th thPopulation/th thCurrency/th /tr /thead tbody tr tdCanada/td tdOttawa/td td37.59 million/td tdCanadian Dollar/td /tr tr tdSouth Africa/td tdCape Town, Pretoria, Bloemfontein/td td57.78 million/td tdSouth African Rand/td /tr tr tdUnited Kingdom/td tdLondon/td td66.65 million/td tdPound Sterling/td /tr /tbody/table

Así es como se ve esa misma tabla en 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

Comparando las dos versiones de la tabla, Pug parece mucho más limpio que HTML y tiene una mejor legibilidad del código. Aunque es insignificante en este pequeño ejemplo, escribe siete líneas menos en la tabla Pug que en la tabla HTML. A medida que creas más plantillas a lo largo del tiempo para un proyecto, terminas escribiendo menos código con Pug .

 

Más allá de la funcionalidad proporcionada por el lenguaje de plantillas Angular, Pug amplía lo que puedes lograr en tus plantillas. Con características (como mixins, interpolación de texto y atributos, condicionales, iteradores, etc.), puede usar Pug para resolver problemas de manera más simple en lugar de escribir componentes completos separados o importar dependencias y configurar directivas para cumplir con un requisito.

Algunas características del Pug

Pug ofrece una amplia gama de funciones, pero las funciones que puede utilizar dependen de cómo integre Pug en su proyecto. A continuación se muestran algunas funciones que pueden resultarle útiles.

  1. Agregar archivos Pug externos a una plantilla usandoinclude .

    Digamos, por ejemplo, que le gustaría tener una plantilla más concisa pero no siente la necesidad de crear componentes adicionales. Puede sacar secciones de una plantilla y colocarlas en plantillas parciales y luego incluirlas nuevamente en la plantilla original.

    Por ejemplo, en este componente de la página de inicio, las secciones 'Acerca de' y 'Servicios' están en archivos externos y están incluidas en el componente de la página de inicio.

    //- home.component.pugh1 Leone and Sonsh2 Photography Studioinclude partials/about.partial.puginclude partials/services.partial.pug
    //- about.partial.pugh2 About our businessp 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.pugh2 Services we offerP Our services include: ul li Headshots li Corporate Event Photography

    Ejemplo de representación HTML de plantillas parciales incluidas ( vista previa grande )

  2. Reutilización de bloques de código mediante mixins .

    Por ejemplo, digamos que desea reutilizar un bloque de código para crear algunos botones. Reutilizarías ese bloque de código usando un mixin.

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

    Ejemplo de mezcla de botones de menú en formato HTML ( vista previa grande )

  3. Los condicionales facilitan la visualización de bloques de código y comentarios en función de si se cumple o no una condición.
    - var day = (new Date()).getDay()if day == 0 p We’re closed on Sundayselse if day == 6 p We’re open from 9AM to 1PMelse p We’re open from 9AM to 5PM

    Ejemplo de representación HTML de condicionales ( vista previa grande )

  4. Iteradores como eachy whileproporcionan funcionalidad de iteración .
    ul each item in ['Eggs', 'Milk', 'Cheese'] li= itemul while n 5 li= n++ + ' bottles of milk on the wall'

    ( Vista previa grande )
    Ejemplo de renderizado HTML de iteradores ( vista previa grande )

     

  5. JavaScript en línea se puede escribir en plantillas Pug como se demuestra en los ejemplos anteriores.
  6. La interpolación es posible y se extiende a etiquetas y atributos.
    - 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

    Ejemplo de representación HTML de interpolación ( vista previa grande )
    Olla express a presion

  7. Los filtros permiten el uso de otros idiomas en las plantillas de Pug .

    Por ejemplo, puede utilizar Markdown en sus plantillas de Pug después de instalar un módulo 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.**

    Representación HTML del ejemplo de filtro ( vista previa grande )

Estas son sólo algunas de las funciones que ofrece Pug. Puede encontrar una lista más amplia de funciones en la documentación de Pug .

Cómo usar Pug en una aplicación angular

Tanto para aplicaciones nuevas como preexistentes que utilizan Angular CLI 6 y superior, deberá instalar ng-cli-pug-loader. Es un cargador CLI angular para plantillas Pug.

Para nuevos componentes y proyectos

  1. Instalar ng-cli-pug-loader.
    ng add ng-cli-pug-loader
  2. Genera tu componente según tus preferencias.

    Por ejemplo, digamos que estamos generando un componente de página de inicio:

    ng g c home --style css -m app
  3. Cambie la extensión del archivo HTML .htmla una extensión Pug, .pug. Dado que el archivo generado inicialmente contiene HTML, puede optar por eliminar su contenido y comenzar de nuevo con Pug. Sin embargo, HTML aún puede funcionar en las plantillas de Pug, por lo que puedes dejarlo como está.
  4. Cambie la extensión de la plantilla al .pugdecorador de componentes.
    @Component({ selector: 'app-component', templateUrl: './home.component.pug', styles: ['./home.component.css']})

Para componentes y proyectos existentes

  1. Instalar ng-cli-pug-loader.
    ng add ng-cli-pug-loader
  2. Instale la herramienta CLI html2pug . Esta herramienta te ayudará a convertir tus plantillas HTML a Pug.
    npm install -g html2pug
  3. Para convertir un archivo HTML a Pug, ejecute:
    html2pug -f -c [HTML file path] [Pug file path]

    Dado que estamos trabajando con plantillas HTML y no con archivos HTML completos, debemos pasar -fpara indicar html2pugque no debe envolver las plantillas que genera htmly bodyetiquetas. La -cbandera permite html2pugsaber que los atributos de los elementos deben separarse con comas durante la conversión. Explicaré por qué esto es importante a continuación.

  4. Cambie la extensión de la plantilla al .pugdecorador de componentes como se describe en la sección Para nuevos componentes y proyectos .
  5. Ejecute el servidor para comprobar que no hay problemas con la forma en que se representa la plantilla Pug.

    Si hay problemas, utilice la plantilla HTML como referencia para descubrir qué pudo haber causado el problema. En ocasiones, esto podría deberse a un problema de sangría o a un atributo sin comillas, aunque es poco común. Una vez que esté satisfecho con cómo se representa la plantilla Pug, elimine el archivo HTML.

     

Cosas a considerar al migrar de HTML a plantillas Pug

No podrás utilizar plantillas Pug en línea con archivos ng-cli-pug-loader. Esto solo representa archivos Pug y no representa plantillas en línea definidas en los decoradores de componentes. Por tanto, todas las plantillas existentes deben ser archivos externos. Si tiene plantillas HTML en línea, cree archivos HTML externos para ellas y conviértalos a Pug usando html2pug.

Una vez convertidas, es posible que necesites corregir las plantillas que utilizan directivas vinculantes y de atributos. ng-cli-pug-loaderrequiere que los nombres de atributos enlazados en Angular estén entre comillas simples o dobles o separados por comas. La forma más sencilla de hacerlo sería utilizar la -cbandera con html2pug. Sin embargo, esto sólo soluciona los problemas con elementos que tienen múltiples atributos. Para elementos con atributos únicos, utilice comillas.

Gran parte de la configuración que se describe aquí se puede automatizar utilizando un ejecutor de tareas, un script o un esquema angular personalizado para conversiones a gran escala si elige crear uno. Si tiene algunas plantillas y desea realizar una conversión incremental, sería mejor convertir solo un archivo a la vez.

Sintaxis del lenguaje de plantilla angular en plantillas Pug

En su mayor parte, la sintaxis del lenguaje de plantilla Angular permanece sin cambios en una plantilla Pug; sin embargo, cuando se trata de vinculación y algunas directivas (como se describe anteriormente), debe usar comillas y comas desde (), []e [()]interfieren con la compilación de las plantillas Pug. . Aquí están algunos ejemplos:

//- [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

Las directivas de atributos como ngClass, ngStyley ngModeldeben ir entre comillas. Las directivas estructurales como *ngIf, *ngFor, *ngSwitchCasey *ngSwitchDefaulttambién deben escribirse entre comillas o usarse con comas. Las variables de referencia de la plantilla (p. ej. #var) no interfieren con la compilación de la plantilla Pug y, por lo tanto, no necesitan comillas ni comas. Las expresiones de plantilla rodeadas no {{ }}se ven afectadas.

Inconvenientes y compensaciones del uso de Pug en plantillas angulares

Aunque Pug es conveniente y mejora los flujos de trabajo, existen algunas desventajas al usarlo y algunas compensaciones que deben considerarse al usarlo ng-cli-pug-loader.

 

Los archivos no se pueden incluir en plantillas usando includea menos que terminen en .partial.pugo .include.pugo se llamen mixins.pug. Además de esto, la herencia de plantillas no funciona ng-cli-pug-loadery, como resultado, no es posible usar bloques, anteponer y agregar código Pug a pesar de ser una característica útil de Pug.

Los archivos Pug deben crearse manualmente ya que Angular CLI solo genera componentes con plantillas HTML. Deberá eliminar el archivo HTML generado y crear un archivo Pug o simplemente cambiar la extensión del archivo HTML y luego cambiar el templateUrldecorador del componente. Aunque esto se puede automatizar mediante un script, un esquema o un Task Runner, es necesario implementar la solución.

En proyectos Angular preexistentes más grandes, cambiar de plantillas HTML a plantillas de Pug implica mucho trabajo y complejidad en algunos casos. Hacer el cambio generará una gran cantidad de código roto que debe corregirse archivo por archivo o automáticamente utilizando una herramienta personalizada. Los enlaces y algunas directivas angulares en los elementos deben estar entre comillas o separados por comas.

Los desarrolladores que no estén familiarizados con Pug primero deben aprender la sintaxis antes de incorporarla a un proyecto. Pug no es sólo HTML sin corchetes angulares ni etiquetas de cierre e implica una curva de aprendizaje.

Al escribir Pug y usar sus funciones en plantillas Angular, ng-cli-pug-loaderlas plantillas de Pug no tienen acceso a las propiedades del componente. Como resultado, estas propiedades no se pueden utilizar como variables, en condicionales, en iteradores ni en código en línea. Las directivas angulares y las expresiones de plantilla tampoco tienen acceso a las variables de Pug. Por ejemplo, con variables Pug:

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

A continuación se muestra un ejemplo con una propiedad de un componente:

//- src/app/app.component.tsexport class AppComponent{ shoppingList = ['Eggs', 'Milk', 'Flour'];}
//- app.component.pug //- will not work because shoppingList is a component property and not a Pug variableul each item in shoppingList li= item//- will work because shoppingList is a property of the componentul li(*ngFor="let item of shoppingList") {{item}}

Por último, index.htmlno puede ser una plantilla de Pug. ng-cli-pug-loaderno apoya esto.

Conclusión

Pug puede ser un recurso increíble para usar en aplicaciones Angular, pero requiere cierta inversión para aprender e integrarse en un proyecto nuevo o preexistente. Si estás preparado para el desafío, puedes echar un vistazo a la documentación de Pug para aprender más sobre su sintaxis y agregarla a tus proyectos. Aunque ng-cli-pug-loaderes una gran herramienta, puede faltar en algunas áreas. Para adaptar cómo funcionará Pug en su proyecto, considere crear un esquema Angular que cumpla con los requisitos de su proyecto.

(ra, yk, il)Explora más en

  • Aplicaciones
  • Angular
  • javascript





Tal vez te puede interesar:

  1. ¿Deberían abrirse los enlaces en ventanas nuevas?
  2. 24 excelentes tutoriales de AJAX
  3. 70 técnicas nuevas y útiles de AJAX y JavaScript
  4. Más de 45 excelentes recursos y repositorios de fragmentos de código

Cómo crear mejores plantillas angulares con Pug

Cómo crear mejores plantillas angulares con Pug

Índice Por qué deberías usar Pug Algunas car

programar

es

https://pseint.es/static/images/programar-como-crear-mejores-plantillas-angulares-con-pug-1031-0.jpg

2024-04-04

 

Cómo crear mejores plantillas angulares con Pug
Cómo crear mejores plantillas angulares con Pug

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Top 20