Como desarrollador, aprecio cómo se estructuran las aplicaciones de Angular y las muchas opciones que la CLI de Angular 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 incorporado para el diseño de componentes como Sass / SCSS, LESS y Stylus. Sin embargo, cuando se trata de plantillas, solo 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 Angular, puede usar Pug para escribir mejores plantillas de manera más eficiente. Aprenderá a instalar Pug en sus aplicaciones angulares y a hacer la transición de aplicaciones existentes que usan HTML para usar Pug.
Administrar puntos de interrupción de imagen
Una característica angular incorporada llamada Observador BreakPoint nos brinda una interfaz poderosa para manejar imágenes receptivas. Lea más sobre un servicio que nos permite servir, transformar y administrar imágenes en la nube. Más información →
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 usa para escribir plantillas que se compilan en funciones que toman datos y representan documentos HTML.
Además de proporcionar un forma más simplificada de escribir plantillas, ofrece una serie de características valiosas que van más allá de la 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 HTML es usado universalmente por muchos y funciona adecuadamente en plantillas, no es SECO y puede ser bastante difícil de leer, escribir y mantener, especialmente con plantillas de componentes más grandes. Ahí es donde entra Pug. Con Pug, tus plantillas se vuelven más simples de escribir y leer y puedes Amplíe la funcionalidad de su plantilla como un bono adicional. En el resto de este artículo, lo guiaré a través de cómo usar Pug en sus plantillas de componentes angulares.
Por qué deberías usar Pug
HTML es fundamentalmente repetitivo. Para la mayoría de los elementos, debe tener una etiqueta de apertura y cierre que no esté SECA. No solo tiene que escribir más con HTML, sino que también tiene que leer más. Con Pug, no hay soportes de ángulo de apertura y cierre ni etiquetas de cierre. Por lo tanto, está escribiendo y leyendo mucho menos código.
Por ejemplo, aquí hay una tabla 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>
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 se ve mucho más limpio que HTML y tiene mejor legibilidad de código. Aunque 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 con el tiempo para un proyecto, terminas acumulando menos código con Pug.
Más allá de la funcionalidad proporcionada por el lenguaje de plantillas Angular, Pug extiende lo que puede lograr en sus 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 contraste con escribir componentes separados completos o importar dependencias y configurar directivas para cumplir un requisito.
Algunas características de Pug
Pug ofrece una amplia gama de características, pero las características que puede usar dependen de cómo integre Pug en su proyecto. Aquí hay algunas características que pueden resultarle útiles.
- Agregar archivos Pug externos a una plantilla usando
include.Digamos, por ejemplo, que le gustaría tener una plantilla más sucinta pero no siente la necesidad de crear componentes adicionales. Puede extraer secciones de una plantilla y ponerlas en plantillas parciales, luego incluirlas nuevamente en la plantilla original.
Por ejemplo, en este componente de la página de inicio, la sección 'Acerca de' y 'Servicios' se encuentran en archivos externos y se incluyen en el componente de la página de inicio.
//- 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
Ejemplo de representación HTML de plantillas parciales incluidas (Vista previa grande) - Reutilizando bloques de código usando mixins.
Por ejemplo, supongamos 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="btn-outline-success") +menu-button('Update', 'updateItem()')(class="btn-outline-primary") +menu-button('Delete', 'deleteItem()')(class="btn-outline-danger")
Ejemplo de representación HTML de botones de menú mixin (Vista previa grande) - Los condicionales lo hacen fácil de mostrar bloques de código y comentarios según si se cumple o no una condición.
- 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
Ejemplo de representación HTML de condicionales (Vista previa grande) - Iteradores como
eachywhileproporcionar funcionalidad de iteración.ul each item in ['Eggs', 'Milk', 'Cheese'] li= item ul while n < 5 li= n++ + ' bottles of milk on the wall'
(Vista previa grande)
Ejemplo de representaciones HTML de iteradores (Vista previa grande) - JavaScript en línea se puede escribir en plantillas Pug como se demuestra en los ejemplos anteriores.
- 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) - Los filtros permiten el uso de otros idiomas en plantillas Pug.
Por ejemplo, puede usar Markdown en sus plantillas Pug después de instalar un módulo JSTransformer Markdown.
:markdown-it # Charles the Web Developer  ## 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 solo algunas de las características que ofrece Pug. Puede encontrar una lista más amplia de características en Documentación de Pug.
Cómo usar Pug en una aplicación angular
Para las aplicaciones nuevas y preexistentes que usan Angular CLI 6 y superior, deberá instalar ng-cli-pug-loader. Es un cargador de CLI angular para plantillas Pug.
Para nuevos componentes y proyectos
- Instalar
ng-cli-pug-loader.ng add ng-cli-pug-loader - Genere su componente de acuerdo con sus preferencias.
Por ejemplo, supongamos que estamos generando un componente de página de inicio:
ng g c home --style css -m app - Cambiar la extensión del archivo HTML,
.htmla una extensión Pug,.pug. Dado que el archivo inicial generado contiene HTML, puede optar por eliminar su contenido y comenzar de nuevo con Pug. Sin embargo, HTML todavía puede funcionar en las plantillas Pug, por lo que puede dejarlo como está. - Cambie la extensión de la plantilla a
.pugen el decorador de componentes.@Component({ selector: 'app-component', templateUrl: './home.component.pug', styles: ['./home.component.css'] })
Para componentes y proyectos existentes
- Instalar
ng-cli-pug-loader.ng add ng-cli-pug-loader - Instale la herramienta CLI html2pug. Esta herramienta te ayudará a convertir tus plantillas HTML a Pug.
npm install -g html2pug - Para convertir un archivo HTML a Pug, ejecute:
html2pug -f -c < [HTML file path] > [Pug file path]Como estamos trabajando con plantillas HTML y no con archivos HTML completos, debemos pasar el
-fpara indicar ahtml2pugque no debe envolver las plantillas que genera enhtmlybodyEtiquetas los-cbandera dejahtml2pugsepa que los atributos de los elementos deben separarse con comas durante la conversión. Cubriré por qué esto es importante a continuación. - Cambie la extensión de la plantilla a
.pugen el decorador de componentes como se describe en el Para nuevos componentes y proyectos . - Ejecute el servidor para verificar que no haya problemas con la representación de la plantilla Pug.
Si hay problemas, use la plantilla HTML como referencia para descubrir qué pudo haber causado el problema. Esto a veces podría ser un problema de sangría o un atributo sin comillas, aunque es raro. Una vez que esté satisfecho con la representación de la plantilla Pug, elimine el archivo HTML.
Cosas a tener en cuenta al migrar de HTML a plantillas Pug
No podrá usar plantillas Pug en línea con ng-cli-pug-loader. Esto solo representa archivos Pug y no representa plantillas en línea definidas en decoradores de componentes. Por lo tanto, todas las plantillas existentes deben ser archivos externos. Si tiene plantillas HTML en línea, cree archivos HTML externos para ellas y conviértalas a Pug usando html2pug.
Una vez convertido, es posible que necesite arreglar plantillas que usan directivas de enlace y atributo. ng-cli-pug-loader requiere que los nombres de los atributos vinculados en Angular estén encerrados entre comillas simples o dobles o separados por comas. La forma más fácil de hacerlo sería utilizar el -c bandera con html2pug. Sin embargo, esto solo soluciona los problemas con elementos que tienen múltiples atributos. Para los elementos con atributos simples solo use comillas.
Gran parte de la configuración descrita aquí se puede automatizar utilizando un corredor de tareas o un script o un esquema angular personalizado para conversiones a gran escala si elige crear una. Si tiene algunas plantillas y desea realizar una conversión incremental, sería mejor convertir un archivo a la vez.
Sintaxis de lenguaje de plantilla angular en plantillas Pug
En su mayor parte, la sintaxis de lenguaje de plantilla angular permanece sin cambios en una plantilla de Pug, sin embargo, cuando se trata de enlaces y algunas directivas (como se describió anteriormente), debe usar comillas y comas ya que (), []y [()] interferir con la compilación de 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
Directivas de atributos como ngClass, ngStyley ngModel debe ponerse entre comillas. Directivas estructurales como *ngIf, *ngFor, *ngSwitchCasey *ngSwitchDefault También debe ponerse entre comillas o usarse con comas. Variables de referencia de plantilla (p. Ej. #var ) no interfieren con la compilación de plantillas de Pug y, por lo tanto, no necesitan comillas ni comillas. Expresiones de plantilla rodeadas de {{ }} permanecer inalterado.
Inconvenientes y desventajas del uso de Pug en plantillas angulares
Aunque Pug es conveniente y mejora los flujos de trabajo, existen algunos inconvenientes para usarlo y algunas compensaciones que deben tenerse en cuenta al usarlo ng-cli-pug-loader.
Los archivos no se pueden incluir en plantillas usando include a menos que terminen en .partial.pug or .include.pug o son llamados mixins.pug. Además de esto, la herencia de plantillas no funciona con ng-cli-pug-loader y como resultado, el uso de bloques, anteponer y agregar código Pug no es posible 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, luego cambiar el templateUrl en el decorador de componentes. Aunque esto puede automatizarse mediante un script, un esquema o un Task Runner, debe implementar la solución.
En proyectos angulares preexistentes más grandes, el cambio de plantillas HTML a plantillas Pug implica mucho trabajo y complejidad en algunos casos. Hacer el cambio dará lugar a una gran cantidad de código de ruptura que debe corregirse archivo por archivo o automáticamente utilizando una herramienta personalizada. Los enlaces y algunas directivas angulares en elementos deben citarse o separarse con comas.
Los desarrolladores que no estén familiarizados con Pug tienen que aprender la sintaxis antes de incorporarla en un proyecto. Pug no es solo HTML sin corchetes angulares y etiquetas de cierre e implica una curva de aprendizaje.
Al escribir Pug y usar sus características en plantillas angulares ng-cli-pug-loader no da acceso a las plantillas Pug a las propiedades del componente. Como resultado, estas propiedades no se pueden usar como variables, en condicionales, en iteradores y en código en línea. Las directivas angulares y las expresiones de plantilla tampoco tienen acceso a las variables Pug. Por ejemplo, con las 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}}
Aquí hay un ejemplo con una propiedad de un componente:
//- 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}}
Y por último, index.html no puede ser una plantilla Pug. ng-cli-pug-loader No es compatible con esto.
Conclusión
Pug puede ser un recurso increíble para usar en aplicaciones angulares, 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 Documentación de Pug para obtener más información sobre su sintaxis y agregarla a sus proyectos. A pesar de que ng-cli-pug-loader Es una gran herramienta, puede faltar en algunas áreas. Para personalizar cómo funcionará Pug en su proyecto, considere crear un esquema angular que cumpla con los requisitos de su proyecto.
(ra, yk, il)Fuente: https://www.smashingmagazine.com/2020/05/angular-templates-pug/
