Post Top Ad

Your Ad Spot

jueves, 25 de junio de 2020

Plantillas y estilos angulares

Angular realiza su magia mediante la interacción de una instancia de clase de componente y su plantilla orientada al usuario. La plantilla es una parte importante de un componente angular, y de hecho es absolutamente necesaria para que el componente funcione. No puede omitir el archivo de plantilla o la definición. En Angular, el componente actúa como controlador o modelo de vista, mientras que la plantilla representa la vista misma. Además, las aplicaciones angulares están diseñadas con CSS estándar. Los desarrolladores pueden aplicar todo lo que saben sobre hojas de estilo CSS, selectores , flexbox , cuadrícula css , el modelo de caja y más directamente a aplicaciones angulares. En este tutorial, aprenderemos un poco más sobre cómo funciona esto.

Archivo de plantilla externa

Al comenzar con Angular, hemos visto cómo funciona la propiedad templateUrl . Cada componente debe tener una plantilla para trabajar en Angular. En el archivo virtual-machines.component.ts a continuación, la propiedad templateUrl se resalta y muestra que el archivo html virtual-machines.component.html es el archivo responsable de proporcionar la plantilla para este componente.

Plantillas angulares en línea

Por defecto, se hace referencia a un archivo externo para el archivo de plantilla de un componente. Además de este enfoque, los desarrolladores también pueden hacer uso de plantillas en línea. Lo que esto significa es que, en lugar de apuntar a un archivo html externo, puede incrustar el marcado html directamente en el archivo de Script. Hay dos maneras de hacer esto.

Enfoque de línea única

En este momento, el archivo html virtual-machines.component.html externo tiene este marcado.
En lugar de tener este marcado aquí, podemos incrustarlo en el archivo virtual-machines.component.ts y olvidar el uso de virtual-machines.component.html por completo. Aquí es cómo podemos actualizar virtual-machines.component.ts para reflejar esto. Tenga en cuenta que templateUrl se ha cambiado a solo template .
html en mecanografiado
Con la ng serveejecución, visitar la aplicación Angular en el navegador muestra que todavía tenemos dos instancias de <app-virtual-machine> como antes. Entonces podemos ver que este enfoque funciona.

Multilínea usando Backtics

Si tiene una buena cantidad de marcado para la plantilla, puede ser engorroso ponerlo todo en una línea. Una mejor manera podría ser usar backtics en lugar de comillas simples. De esta manera, puede colocar el marcado con un estilo más amigable.
plantilla angular usando backtics
Tenga en cuenta que incluso agregamos otra instancia de un Expresiones de plantilla de JavaScript que hacen posible el enfoque de varias líneas.
Si solo tiene una pequeña cantidad de marcado, puede ser conveniente utilizar el enfoque en línea de las plantillas angulares . Por otro lado, tener un archivo externo mantiene una buena separación de preocupaciones y mantiene el mecanografiado y el HTML en su propio dominio. Independientemente del enfoque que adopte, debe tener al menos una plantilla para tener un componente angular válido.

Cómo diseñar componentes angulares

Al igual que vimos con la plantilla y la capacidad de apuntar a un archivo HTML externo, también puede hacer referencia a un archivo CSS individual para cualquier estilo que desee aplicar a un componente. A continuación vemos que la propiedad styleUrls hace referencia al archivo css virtual-machines.component.css .
Primero, sin embargo, cambiemos las tareas de clase en app.component.html .
Este es el resultado que obtenemos. Podemos usar nombres de clase simples porque recuerda que ya habíamos incluido Bootstrap en nuestro proyecto.
cambio de estilo de componente angular

Hoja de estilo de componentes

Ahora, supongamos que quiere ser un poco más granular en el diseño de sus componentes. Puede comenzar aplicando las clases bootstrap como ya lo hemos hecho, y ahora podemos refinar aún más el aspecto utilizando ese archivo externo virtual-machines.component.css .
Ahora vemos una combinación de los estilos de clase Bootstrap y nuestra propia definición de color.
estilo css angular por componente

Más sobre estiloUrls y estilos

Es posible que haya notado que la propiedad styleUrls en realidad contiene una matriz, a diferencia de la propiedad templateUrl, que es un valor de cadena único. Esto significa que si lo desea, puede hacer referencia a más de una hoja de estilo. Además de eso, también podría usar una propiedad de estilos como esta.
Con esta adición, el componente ahora muestra el color gris oscuro en lugar del verde oscuro. ¿Por qué? Esto se debe a que el estilo en línea ahora tiene prioridad.
ejemplo de propiedad de estilo angular
Al igual que con el enfoque de plantilla, puede elegir si usar estilos en línea con la propiedad de estilos o estilos externos mediante el uso de styleUrls . Mi preferencia por CSS Styling es utilizar el enfoque de hoja de estilo externa. Sin embargo, si tiene una cantidad muy pequeña de código CSS, el enfoque en línea funcionará bien.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas