Angular 2 avanzado: Trabajo con APIs

Crear una barra de herramientas

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Aprenderemos cómo incluir una barra de herramientas para manipular cada uno de los resultados obtenidos desde la API. Para ello vamos a utilizar las hojas de estilos de librerías externas para desplegar botones e iconos, sin necesidad de descargar imágenes adicionales.
04:41

Transcripción

Vamos a modificar cada uno de los elementos que se encuentra dentro de un módulo. En este caso, yo estoy creando una aplicación donde me conecto a una base de datos externa y cada uno de los ítems que recibo de esta base de datos externa, como esta que estoy acá mostrándote, lo estoy desplegando a manera de lista dentro de mi aplicación. Vamos a darle algunos estilos y a modificar cada uno de los elementos que se encuentran en esta plantilla, para prepararlo y tener una barra de herramientas. Lo primero que voy a hacer es buscar en mi plantilla dónde estoy generando la lista. Esta lista, yo voy a aprovechar algunos elementos de Bootstrap con los que estoy trabajando y voy a agregarle una clase llamada, a esta lista, "list-unstyled". Esto va a remover los elementos básicos de la lista. También voy a agregar algunos elementos de CSS dentro de "tareas. component . css". Acá voy a agregar algunos elementos que me van a permitir desplegar mejor cada una de las listas. Una vez que tenga definidos los componentes básicos, vamos a ver cómo se refleja esto y vemos que tenemos un cambio de color dentro de nuestra lista. Voy a hacer que estas listas también tengan un degradado de color y he preparado un selector de CSS3 donde estoy seleccionando los diferentes nodos de esta lista a partir del orden en que aparecen. Por ejemplo, en este caso estoy seleccionando la lista, el elemento "li" y en este caso estoy seleccionando únicamente el primero. Estoy asignando acá un color azul. Siguiendo este mismo principio, yo voy a asignar diferentes colores a cada uno de los diferentes ítems que van apareciendo, así le voy asignando al número 2, número 3, número 4, y he utilizado diferentes colores para generar una gradiente del color azul. Así vamos generando diferentes sombras, diferentes tonalidades de este color. Vamos a guardar y vamos a ver cómo se refleja el estilo dentro de la aplicación y vamos viendo cómo cada uno los ítems que vayamos agregando va a tener un tono diferente. Ahora ya tenemos acá la base de la aplicación, pero también voy a modificar un poco cada uno de los elementos individuales. Vamos a ir a "tarea-individual" y voy a entrar directamente a la plantilla. Por ahora solo estamos mostrando un texto, vamos a modificar ligeramente esto y voy a incluir acá un HTML que ya tengo prediseñado y que te voy a explicar de qué se trata. Acá tengo un "spam" llamado "herramientas", le he asignado una clase y he incluido dos diferentes etiquetas "spam". Quiero que notes que he incluido acá una etiqueta y le he agregado una clase llamada "glyphicon" y le he asignado algunos nombres. Esto me va a generar algunos elementos gráficos. ¿Cómo he incluido esto? Bueno, gracias a que tenemos instalado Bootstrap, tenemos acceso a los "glyphicons". Te voy a mostrar qué son. Y básicamente son componentes prediseñados que se encuentran dentro de Bootstrap en el momento que los instalamos y son íconos que nos van a permitir a nosotros agregar información sin tener que incluir imágenes y ya vienen prediseñados, solamente tenemos que llamar la clase correspondiente. En este caso yo ya he incluido algunas que me van a generar un lápiz y también me van a generar una papelera para poder desplegar la información de edición y de borrar un elemento. Voy a guardar mi aplicación y vamos a ver los cambios. Vamos a ver que nos aparece el texto dinámico que nos llega desde la API REST y tenemos acá dos botones, que podemos generar acciones para editar y para borrar cada uno de los elementos. Al trabajar así, nosotros nos garantizamos que cada uno de los datos que vamos a trabajar, por ejemplo los elementos de esta barra de herramientas, se van a afectar únicamente al ítem en el que estamos trabajando. De esta forma vamos modularizando nuestra aplicación.

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.