El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

Angular esencial

Alcance de los estilos de Angular

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
En esta lección vamos a explorar cómo funcionan los archivos CSS en una aplicación Angular y examinaremos cómo y dónde podemos modificar la apariencia de un componente, así como la de toda la aplicación de manera global.
08:32

Transcripción

Vamos a hablar ahora sobre las hojas de estilo, las propiedades gráficas y el alcance que tienen ellas dentro de una aplicación Angular. Acá yo estoy trabajando en una aplicación Angular generada a partir de la línea de comandos. Tengo un archivo con el nombre de mi componente y la extensión'css', otro con la extensión'html' y otro con la extensión'component. ts', donde se encuentra la lógica de mi aplicación. Estos son los archivos con los que generalmente vamos a trabajar un componente. Vamos a ver cómo funcionan los estilos gráficos dentro de uno de ellos. Yo he modificado el componente de mi aplicación para desplegar solamente dos propiedades, a diferencia de las que me muestra ahora que lo generó automáticamente. En este caso, estoy conservando el'selector' y el'templateUrl', que son dos propiedades que me permiten invocar el componente y también definir cuál va a ser la ruta a la plantilla, en este caso'component'punto 'html'. Yo puedo asignarle estilos a mis plantillas a través de diferentes propiedades. Por ejemplo, una propiedad que me permite agregar estilos directamente desde el código es la propiedad 'styles'. Acá, a través de'styles', yo puedo generar las hojas de estilo que van a aplicar dentro de mi aplicación. Voy a incluir acá una coma y voy a agregar dos puntos y voy a incluir el formato de paréntesis cuadrados y dentro voy a poner las comillas que utilizamos dentro de JavaScript para generar interpolación de datos o, en este caso, también conocidas como acentos graves. Vemos acá que ya tenemos estas comillas y, una vez incluidas, yo voy a agregar las diferentes propiedades de'css'tal cual abriera una hoja de estilos. Por ejemplo, voy a incluir acá'li' y voy a decir que'li'tenga un color de fondo a través de la propiedad'background', en este caso vamos a asignar el valor 'red'. Voy a guardar, y vamos a ver que dentro de la plantilla, en este caso 'app. component. html', tengo una lista. También tengo una hoja de estilos que por ahora está vacía. Así que vamos a revisar las propiedades y vamos a ver la aplicación cómo está funcionando y vemos que el ítem 'li' que se estaba desplegando en el código me aparece ahora con un color de fondo rojo, tal como lo he definido dentro del código en el componente. Si yo quisiera modificarlo, por ejemplo, con el color 'purple', guardo la aplicación y vemos que también ha cambiado. Vamos a examinar estos valores dentro de mi código. A través de clic derecho, Inspect, puedo ver las propiedades de mi aplicación y veo que acá, efectivamente, 'li' se le está asignando la propiedad'background: purple'. Ahora, esto, a pesar de que puede ser útil en algunos casos asignar los estilos directamente dentro del código, puede ser en algunos casos contraproducente, porque realmente se vuelve poco escalable, se vuelve un poco incómodo y también, en caso de que estés trabajando en equipos, en muchos casos algunas personas van a estar trabajando únicamente en'css', mientras que otras están trabajando con la aplicación. Así que lo ideal en este caso es trabajarlo y separarlo en capas. Mi recomendación es que cambies la propiedad'styles' por la propiedad 'stylesUrls'. Esto te permite asignar diferentes hojas de estilo a un componente. Y en este caso, yo voy a utilizar el valor que me asigna por defecto Angular, que va a ser'stylesUrls'. Y en este caso, voy a apuntar a'component. css', que es el archivo que aún tengo vacío, donde voy a administrar el'css'. Vamos a guardar y voy a ir a mi aplicación y en este caso voy a volver a asignar'li' 'background' y vamos a ponerle otro color, en este caso'peru'. Guardamos, revisamos y vemos que también ya se le está asignando otro color, si revisamos el'background'tiene asignado el valor'peru'. Y así es como yo puedo ir controlando de diferentes formas o inyectar de diferentes formas el'css', pero no solo eso, quiero que notes que también, dentro del código, se están inyectando propiedades. Recordemos que Angular en la forma en que trabaja es básicamente un archivo JavaScript que va a tomar toda la información y va a reescribir todo el código a partir de las instrucciones que nosotros hayamos definido en el código. Eso significa que todo lo que aparece en pantalla fue reescrito por Angular. Y ahora que lo reescribe, acá aparecen algunas propiedades. En este caso, le estamos definiendo una propiedad única a este componente, lo que significa que si revisamos dentro del'css', también pasó otra cosa: puedes ver que acá me parece un'li', tal como yo lo definí, pero también se está definiendo una propiedad adicional para afectar únicamente al'li'que se encuentre dentro de mi componente. Vamos a agregar otro componente. Voy a abrir acá otra ventana, voy a utilizar el comando'ng generate component' y en este caso le ponemos'otra lista', en este caso le puse el nombre mal, puse'otra lista'. Afortunadamente, Angular es más inteligente y se adelantó a mi decisión y nada más le puso'otra'. Por ahora vamos a trabajarlo así. Y lo que voy a hacer es que voy a incluir esa lista acá exactamente con el mismo código que tenemos en el componente inicial, pero vamos a ponerle acá otro ítem para que podamos reconocerlo. Volvemos al componente inicial, vamos a poner acá unos asteriscos y vamos a llamar a 'app' y en este caso el nombre del componente como se generó, que es'otra', y acá me debería mostrar esa segunda lista. Veamos ahora el resultado. Vemos que a esta segunda lista no le afectan los estilos. Si revisamos dentro del código vemos que realmente no hicimos unos estilos particularmente sólidos, simplemente puse'li'. En un documento normal de html, si yo pusiera'li', esto afectaría absolutamente a todos los componentes que tengan esa etiqueta. Sin embargo, en Angular, gracias a que estamos encapsulando cada uno de los elementos a partir del componente en el que se encuentran, vamos a ver que en este caso, a pesar de que en este'li'nosotros definimos un estilo general, Angular lo está convirtiendo en uno específico para este componente, mientras que acá, en este segundo componente, vemos que se está agregando otra propiedad que es específica de este nuevo componente y, en el caso del'li', ya no se están asignando las propiedades, porque la propiedad que nosotros asignamos se reescribió. Ahora, en caso que te lo estés preguntando, para asignar estilos de manera global podemos hacerlo directamente dentro de una hoja de estilos que ya se encuentre en la aplicación. Si buscamos dentro de una aplicación generada por la línea de comandos, vamos a encontrar un archivo llamado'styles. css'. Si yo pongo acá la propiedad'li' y la voy a modificar por 'font- size' y le vamos a poner que tenga'30px', en este caso, dentro de este archivo no se va a reescribir el código y vamos a ver que en ambos casos todos los elementos'li', y de manera global, van a tener la propiedad 'font-size'. Vemos que en este caso el'li'no se está modificando a nivel de clases, mientras que en el que nosotros incluimos dentro del componente sí se está modificando para trabajar en cada uno de ellos. Así es como nosotros podemos trabajar de manera encapsulada o global los estilos dentro de una aplicación Angular.

Angular esencial

Aprende a crear aplicaciones con Angular y avanza poco a poco en su uso, empezando por la instalación, configuración y arquitectura hasta la publicación final de una aplicación.

4:27 horas (35 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:29/06/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.