Angular 2 avanzado: Trabajo con APIs

Gestionar hojas de estilos, Bootstrap y Google Fonts

¡Prueba gratis durante 10 días

nuestros 1220 cursos !

Prueba gratis Mostrar modalidades de suscripción
Para acelerar el proceso de desarrollo, en este proyecto usaremos algunas librerías externas como Bootstrap y Google Fonts. Aprenderemos cómo instalarlos en un proyecto angular y también cómo interactuar con las hojas de estilo.
05:39

Transcripción

Vamos ahora a habilitarle a nuestra aplicación algunos elementos gráficos que nos van a ayudar a hacer el trabajo mucho más eficiente, mucho más rápido. Vamos a entrar el código y voy a modificar un componente llamado "pie-de-página" para agregarle algunos estilos gráficos bastante simples. Simplemente estoy agregando un texto, una clase y estoy definiendo esa clase dentro de la plantilla de CSS correspondiente a este componente. Vamos a guardar la información y ya que está ejecutándose mi servidor, puedo ver los cambios de inmediato. Tenemos acá nuestra aplicación, nos falta definirle también el color del texto, listo. Tenemos ahora una aplicación muy básica, pero vamos a agregarle algunos elementos extra para poder hacerlo mucho más eficiente. Voy a instalar, primero que todo voy a instalar Bootstrap para poder hacer más rápido el proceso de desarrollo, al menos para tener que utilizar menos CSS dentro de mi aplicación. Vamos a entrar la sección Getting Started y acá aparece una opción para incluir Bootstrap utilizando un CDN, un "content delivery network", que básicamente nos permite utilizar el código sin tener que guardarlo en nuestro servidor. Vamos a copiar este código y vamos a ir a nuestra aplicación y para instalar Bootstrap nosotros vamos a tener que ir directamente a la raíz de nuestro documento –vamos a cerrar algunos archivos que tengo acá abiertos para que sea más fácil de examinar– y vamos a ir a la raíz de nuestra aplicación. La raíz de nuestra aplicación se encuentra dentro de la carpeta'src', vamos a buscar el archivo'index. html'. Acá está nuestra aplicación. Como puedes ver, es bastante simple el código que estamos utilizando. En esta etiqueta "app-rot" es donde se está cargando nuestra aplicación Angular. Vamos a buscar la etiqueta "head" y dentro de ella vamos a incluir el código que acabamos de copiar de Bootstrap. Otra librería que vamos a necesitar instalar y que es requerida cuando utilizamos Bootstrap va a ser jQuery. Vamos a utilizar jQuery dentro de la dirección "code. jquery. com" y acá directamente voy a encontrar una versión minificada, o sea, comprimida, de esta librería. Vamos a elegirla presionando en la versión de jQuery, en la opción "minified", y acá me va a aparecer un código que puedo copiar directamente en mi documento y lo puedo pegar para poder utilizar jQuery, y ya está habilitado jQuery y Bootstrap dentro de mi aplicación. Así que vamos a cerrar jQuery, ya tenemos instalado Bootstrap, y finalmente voy a agregar también el soporte para tipografías de Google Fonts. Para hacer esto, es bastante sencillo, puedes utilizar cualquier tipografía que quieras, simplemente eliges una tipografía, presionas la opción de +, te va a aparecer cuáles tipografías ya tienes seleccionadas y al hacer clic vas a ver la opción que tienes de utilizar este código para enlazar esta tipografía con tu documento, y para utilizarla, simplemente tienes que incluir esta línea. Yo ya he seleccionado una tipografía dentro de Google Docs y voy a copiar esa línea, voy a ir a mi documento y voy a instalarlo dentro de mi aplicación. Ahora ya también tengo aplicaciones personalizadas –puedes agregar todas las que quieras– y lo que quiero que veas es que es muy sencillo extender la funcionalidad de Angualar, simplemente estamos copiando código que es bastante estándar dentro de HTML. Ahora ya tengo instalada esta tipografía, así que voy a instalarla dentro de mi aplicación. Nosotros vamos a tener diferentes documentos de CSS para trabajar en Angular. Vamos a ver que, acá en la raíz, al igual que'index. html', tenemos un archivo llamado'styles. css'. Acá nosotros podemos poner estilos globales, o sea, elementos que van a afectar a toda la aplicación. Por ejemplo, yo voy a poner acá "body" y quiero que el "body" de mi aplicación, todos los elementos que se encuentran ahí estén sujetos a la tipografía que acabo de instalar. Vamos a revisar la aplicación, vemos que ya tenemos una tipografía y ya esta tipografía está afectando a todos los elementos de mi aplicación. Yo también puedo modificar este elemento y, como puedes ver, dentro de los componentes nosotros tenemos un archivo CSS. Esos arhivos CSS no solo se están generando dentro de la aplicación, sino que también van a estar completamente encapsulados. Eso quiere decir que no tienes que realizar estilos de CSS demasiado específicos, porque todos van a estar encapsulados dentro del componente en el que están. Así que elementos como este, que simplemente estoy definiendo "encabezado", es lo suficientemente específico como para afectar únicamente los elementos que se encuentran dentro de mi componente. Esta es la forma en que nosotros podemos extender la funcionalidad gráfica y también podemos asignar librerías adicionales dentro de una aplicación Angular 2.

Angular 2 avanzado: Trabajo con APIs

Comprende el funcionamiento de una API y cómo llevar a cabo sus procesos, así como controlar su funcionamiento mediante Angular 2, gracias a este ejemplo práctico.

3:02 horas (29 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:4/05/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.