Ionic práctico: App con REST

Creación de un slider en la página Home

¡Prueba gratis durante 10 días

nuestros 1265 cursos !

Prueba gratis Mostrar modalidades de suscripción
Hay muchas formas de mostrar un listado de registros, pero para utilizar nuevas opciones de Ionic 2, vamos a añadir un slider a la Home de nuestra aplicación, que va a servir para mostrar cada registro con un sistema atractivo.

Transcripción

Ya estoy cargando los datos, ahora necesitaría pintar cada uno de los pájaros que he visto dentro de la Home. Para hacerlo voy a utilizar un componente nuevo dentro de Ionic 2, que es componente Slides. Ese componente Slides, para añadirlo es tan fácil como irse a la página de Ionic 2, al apartado de componentes y dentro de ella copiar el código de el tipo de Slides que más nos guste. De todas formas, voy a añadirlo, este Slides, estos componentes Slides van a tener dentro las etiquetas Slide, que va a ser el elemento que se va a repetir, y dentro de este Slide, voy a añadir todos los contenidos. Además, también otra cosa que tendré que ponerle a este Slides va a ser un identificador, ese identificador es imprescindible, porque necesito que tenga nombre, para que luego más adelante pueda hacer cosas como por ejemplo recuperar en que diapositiva estoy en un momento dado. Por otro lado, necesito añadir el equivalente del ng-repeat, lo que es un ng-for de Ionic 2 para hacer que se repita los Slides tantas veces como elementos tenga guardados. Los elementos los he cargado a través de este servicio, pero realmente no los tengo accesibles, aquí no hay ninguna variable donde se estén guardando. Así que, lo primero que necesito es crear una nueva variable, la voy a llamar "Pájaros". Y esa variable, me voy a venir aquí al apartado de los servicios y una vez los he recuperado, bueno, pues voy a añadir que se guarden dentro de este Pájaros. O sea, que dentro de este Pájaros guardo los datos recibidos. Una vez hecho eso, lo puedo guardar y ya tengo los datos preparados, así que puedo venirme al Ion Slide, y dentro de él, añadir el ng-for y sobre él hacer una repetición sobre la variable pájaros, y voy a ir de pájaro en pájaro añadiendo una variable que se llame, pues eso, pájaro. Esa variable debería tener un Let delante, este Let para indicar que es una variable, ya tendríamos esa variable que se va a pasar a todos los contenidos que se estén generando dentro de esta etiqueta IonSlide. Pues tengo un etiqueta IonCard que, a mi personalmente me gusta añadir contenidos dentro de estos Cards porque quedan muy bien independientemente del tamaño del teléfono. Bueno, pues entonces genero este IonCard al cual le voy a asignar la clase WhiteCard, esa clase que previamente he creado en el archivo Home.SCSS en la cual defino un color de fondo Blanco. Vuelvo al Home, y ahora aquí dentro de este Card voy a definir un Header en el que ponga el título. Así gracias a eso vamos a ver que está funcionando. Como copié y pegué el IonCard bueno pues me había añadido esa clase. Vamos, le añado este Header, y ahora me va a añadir una etiqueta H2 y dentro de ella pondré el título en concreto. Como decía, voy a sacar de esa variable Pájaro, que se va a estar repitiendo en cada Loop. Así que recupero Pájaro.título, lo voy a guardar... voy a guardar también este Home.ts me voy a ir al terminal y me voy a asegurar que efectivamente no se está generando ningun error. Aquí vemos que la depuración terminó y que parece que todo es correcto. Si abro el navegador, parece que ya está listo. Pues aquí lo vemos, efectivamente. Vemos este Card con este rótulo, y pinchando y arrastrando me puedo mover entre los distintos Slides. Y podemos ver que funciona perfectamente este sistema de Slides. Estos Slides son configurables, por ejemplo puedo hacer que tenga un fondo de algún color, que tengan unos botoncitos en la parte de abajo para seleccionar el que quiera, yo como no sé cuantos voy a tener no puedo tenerlos todos, porque podrían ser excesivos y no quedaría bien. En cualquier caso ya tengo funcionado la Home con datos sacados del servidor.

Ionic práctico: App con REST

Practica creando una aplicación con Ionic, gracias a la combinación de AngularJS, HTML5 y un back-end basado en PHP para servir datos a tu app así como modificar registros.

3:00 horas (38 Videos)
Actualmente no hay comentarios.
 

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.