Ionic práctico: App con REST

Añadir el botón de eliminar mediante un prompt

¡Prueba gratis durante 10 días

nuestros 1199 cursos !

Prueba gratis Mostrar modalidades de suscripción
Además de añadir el botón de eliminar, vamos a añadir una modificación sobre un componente que ya hemos utilizado: las alertas, que en este caso nos permitirán añadir botones para crear con ello un prompt.

Transcripción

Ya he utiilzado el GET, el POST, y el PUT me queda utilizar el DELETE. Dentro de lista HTML puedo copiar fácilmente, el evento clic de "goUpdate" y puedo crear una función "Delete". Voy a guardarla. Esta función "Delete" tendré que crearla dentro de la lista y va a tener varias partes distintas, por un lado necesito recuperar el "Index", eso está claro; por otro lado, no debería de permitir borrar directamente, debería de hacer que primero muestre un "Prompt". Así que, voy a crear una función que se llame "showPrompt". Ahora crearé esa función y esta función pues básicamente lo que va a hacer es abrir una ventana de pregunta, una ventana de "Prompt". Esa ventana de "Prompt", en realidad funciona exactamente igual que las alertas, de hecho, no es más que un tipo de alerta. Así que puedo irme a cualquiera de las páginas que están utilizando alertas, como, por ejemplo, esta, y puedo importar el "AlertController". Por otro lado, aquí copiar el parámetro "AlertController", aquí lo tendré, ahora ya tengo la posibilidad de utilizar ese "AlertController" y lo voy a hacer así: Por un lado, voy a crear la variable "Prompt" y dentro de ella voy a llamar al "alertCtrl" con el método "Create". Esto es exactamente igual que lo que hice en su momento. Debajo de él, de hecho, también volveré a añadir ese "prompt.prepare". Y ahora dentro de este "Create" tengo que pasarle toda la información necesaria para crear ese "Prompt", así que voy a añadir un objeto en el que iré metiendo el "title" "aviso" por otro lado el mensaje, "¿Seguro que quieres borrar el pájaro?" Por otro lado, los botones y aquí voy a tener dos botones que tienen que ejecutar código, no va a ser simplemente poner un OK sino que voy a tener que añadir dos objetos distintos, en los cuales tendré por un lado el texto del botón, que va a ser "Cancelar" - por cierto que lo prefiero con la 'C' mayúscula - y por otro lado voy a definir la propiedad "handler" y en esa propiedad, bueno, la verdad que aquí no necesito que haga absolutamente nada, pero me viene bien para copiarlo para el siguiente de ellos, porque en el siguiente sí que lo voy a necesitar. En el caso de que realmente se acepte, aquí en vez de cancelar, pues pondría "Borrar", y aquí dentro es donde voy a tener que ejecutar realmente ese "Borrar". Para no complicar el código voy a crear una variable "this" que haga referencia a "this" y voy a pedir que borre el registro, que llame una función que se ocupe de borrar ese registro. Así que añado una última función, "Borrar". Puedo utilizar cualquiera de los servicios que hemos estado viendo hasta ahora. De hecho, voy a a utilizar uno bastante parecido que va a ser este de "getOne". Vuelvo de nuevo a la lista, me voy aquí a "Borrar" y aquí en vez de "getOne" voy a pedirle que haga un "Delete". Y me encuentro con un problema. No tengo el identificador guardado en ningún sitio, así que voy a tener que crear una variable "this.id". La voy a tener que crear aquí, a la que voy a igualar ese "Index" tendré también que nombrarla debajo de "Pájaros" y ahora con esa variable ya preparada, pues sí efectivamente se enviará este parámetro "this.id", el servicio ya se ocupará de todo lo necesario y aquí al final, lo único que me quedaría es, o poner una alerta, pero claro serían dos alertas seguidas, con lo cual es bastante molesto o algo que es un poco más lógico, volver otra vez a recargar estos datos. Así que estos datos podría también meterlos dentro de una función que se llame "loadData". Metería todo este bloque de código y lo haría con el objeto de ahora poder llamarla desde aquí pero también poder llamarla en el momento en el que se ha terminado de borrar ese registro. Con eso básicamente lo que voy a conseguir es obligar a ejecutar una recarga. Guardo todo. Parece que hay un montón de errores. Vamos a ver la línea 77, y es que este "handler data" tiene dos puntos de más. Lo guardo, vuelvo de nuevo a ver qué errores quedan ahora. Parece que todavía hay unos cuantos y es en la línea 90. Vuelvo de nuevo a esta línea 90. Parece que sobra esa llave. Van quedando muchos menos y ahora "Prepare" no existe en el tipo alerta. Voy a volver de nuevo atrás. Porque aquí realmente debería de ser "Present". Es el método "Present" no el método "Prepare". Ahora sí que lo ha generado correctamente y cargando el navegador, parece que me lo carga correctamente. Me voy a la lista. Le voy a pedir que me elimine, por ejemplo, ese pájaro dos, me pregunta si estoy seguro, pulso en "Borrar", y aquí vemos que efectivamente lo he eliminado. Ya tenemos un botón de eliminar que funciona perfectamente.

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.
 
Software:
Fecha de publicación:24/11/2016

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.