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.

Ionic práctico: App con REST

Botón de editar y página de edición de registros

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Crearemos ahora el botón de editar y montaremos la página de edición de registros que, además de recuperar los datos que se envían desde el listado, también envía las modificaciones hechas sobre el registro.

Transcripción

Trabajaremos ahora con "Editar". Voy a irme al "Subline-text", esta "Home" en realidad ya no la necesito, así que puedo cerrar las ventanas. Voy a abrir entonces este "Update.html" y este "Update.ts". En realidad aquí se trata de repetir lo mismo que hemos hecho dentro de "Add", así que puedo reutilizar su código. Dentro de "Add" tengo algo que parece un formulario, y eso mismo puedo añadirlo fácilmente copiando y pegando, sólo que aquí tengo que cambiar cosas. En principio Título y Pájaro me van a salir exactamente igual, porque lo que voy a cambiar dentro de este formulario es básicamente eso, el nombre del pájaro y el título, el sitio donde se vio. Por otro lado, voy a utilizar también el método "Enviar", así que, este "Update" estaría listo, copiar y pegar. Cierro ese archivo. Ahora, aquí voy a necesitar muchísimas menos cosas dentro de lo que es el controlador. Sí que voy a necesitar el controlador de alertas, porque quiero que muestre una alerta cuando se hayan guardado los datos modificados. Así que, voy a copiar y pegar Y esto queda listo. Por otro lado, voy a necesitar variables. Voy a necesitar en concreto Título y Pájaro, puedo copiarlos y puedo pegarlos, Título y Pájaro. Este título y este pájaro en realidad debería de recibirlos, o sea, que esto ya no me va a valer, pero de todas formas voy a volver sobre ello más adelante. Voy a bajar un poco más, me voy a ir al método "Enviar", voy a copiar y pegar ese método "Enviar" y voy a eliminar todo lo que me sobra de él, que básicamente es el número de veces, la longitud y la latitud, pero a cambio, tengo que añadir otra cosa, y es el identificador, así que voy a añadir aquí, dentro de estos datos, un "ID", que va a ser el que le sirva luego al "Backend", para saber exactamente cuál es el identificador de ese registro. Por otro lado, en los servicios, tengo el método "Add", pero no es "Add" lo que yo necesito. Voy a cerrar ya este "Add.ts" porque no lo voy a usar más. Voy a abrir los servicios y voy a buscar exactamente lo que necesito, que es este "Update". Bien, pues lo copio, sustituyo ese "Add", enviaría los datos, avisaría, diría en vez de "Registro añadido" diría "Registro modificado", y casi está listo. Esto ya lo enviaría y funcionaría perfectamente, pero necesitamos, por un lado, recuperar el identificador y por otro lado, recuperar también el Título y el Pájaro. Y para poder hacer todo eso, voy a tener que hacer varias tareas distintas. Por un lado, voy a necesitar recuperar los datos concretos para este registro en concreto. Al final tengo que volver otra vez al "Home", dentro del "Home" voy a buscar, aquí lo tengo, el método que se ocupa de recuperar los datos de un registro en concreto, voy a pegarlo, voy a quitar esta línea de código porque no la voy a necesitar, pero lo que sí voy a necesitar es pedir uno, y de nuevo, aquí voy a necesitar que me recupere "This ID", o sea, es lo mismo que tengo un poco más abajo. Voy a necesitar este "This ID" sea como sea. Y luego, lo que haré será que efectivamente se llama el método "Get One" con el identificador que estoy pasando a esta página, eso me va a devolver una serie de datos y entre ellos, puedo recuperar el título, y puedo recuperar el nombre del Pájaro. Y así, gracias a eso, voy a poder hacer que dentro de los campos editables aparezcan los datos correctos, porque el servidor me debe haber devuelto esos valores, los ha metido dentro de las variables y esas variables están vínculadas directamente mediante "NG-Model". Ya está, casi, porque todavía, como digo, me falta una última cosa, y es recuperar ese identificador. Me voy a ir a la vista de lista, y es en esta vista de lista, voy a añadir el clic, que es el que se va a ocupar de pasar ese parámetro, en vez de guardarlo como una variable global, lo que voy a hacer va a ser enviar un parámetro. Así que, en vez de "Go Home", voy a pedir que se vaya a "Go Update", aquí puedo recuperar efectivamente el I, pero a mí, ese I realmente no me vale, yo lo que necesito es el identificador único de ese pájaro, no es problema, porque ese identificador uno del pájaro, también lo tengo dentro de este listado de elementos que se están repitiendo. Así que puedo recuperar el pájaro "ID". Eso sí, me queda crear la función "Go Update". A esa función "Go Update", a la que le voy a pasar un "Index", en este caso no necesito esas variables globales, porque lo que voy a hacer es pedirle que vaya directamente a la página "Update", esa página "Update" que se ve aquí arriba, que efectivamente está importada. Y aquí viene lo bueno, además de decir a la página a la que quiero que vaya, también puedo pasar un identificador, puedo pasar un "ID", que va a ser igualado con el "Index" que estoy enviando. O sea, explicándolo de una manera más simple, cuando se llama la función "Go Update", se envía el "Index" del registro que se quiere modificar, se pide que se vaya a la página "Update", y se puede pasar un objeto en el cual le puedo pasar todos los valores que yo quiera, y en este caso es el "ID" propio de ese registro que estoy pasando como parámetro. Esto lo guardaría, me vendría a "Update", y aquí, en este punto, también lo que necesito es recuperar ese parámetro, y para recuperar ese parámetro se utiliza "Params", de hecho en realidad se utiliza algo más que ese "Params", necesito, primero que todo, importar la clase correspondiente, así que me voy a ir un poco más arriba, y donde estoy importando el "NavControler" también puedo importar el "Nav-Params", por cierto, con la P mayúscula. Por otro lado, además de este "NavControler" necesito añadir esos "NavParams", les voy a poner de nombre de variable "Params" y ahora nada más cargar, puedo preguntar si existen esos Params, y en caso de que exista, de hecho, el que me interesa, pues ya asignarle el valor de identificador que me interesa. Bueno, pues entonces aquí pongo ese "Get-ID". Para recuperar un parámetro de este objeto de parámetros se utiliza un método "Get", pongo el nombre de parámetro y en caso de que sea diferente de "Null", que en realidad eso podría habérmelo ahorrado, y sólo en ese caso voy a pedir que tenga un "This-ID" igual a todo este valor. Por otro lado, añado esa variable "ID" y ahora que tengo ese identificador puedo llamar a la función que se ocupa de cargar ese identificador. No necesito pasar ningún parámetro porque ya está guardado como "This-ID". Lo guardo, voy a asegurarme de que está todo guardado, me voy al compilador, parece que hay un pequeño error, me falta un "This", seguro, de hecho necesito este "This.loadSlideData". Vuelvo de nuevo al compilador y ahora sí que está compilando ya correctamente y ahora cuando refresque parece que hay un error dentro de "Go Update", voy a volver atrás, eso significa que aquí realmente no necesito las dos llaves porque lo puedo pasar como un parámetro normal. O sea, dicho de otra manera, como esto es "JavaScript", puedo coger el objeto directamente sin añadir la doble llave de las plantillas. Vuelvo de nuevo atrás, voy a guardar cualquiera de los "TS" para que recompile. Bien, ya recargó la página, así que me voy a "Menúlista" voy a poner aquí, por ejemplo, "Cast", y aquí voy a sustituir "Pájaro Test" por "Pájaro 2", pulso en "Enviar". A veces se queda atascada la depuración, si vuelvo otra vez a recargar los datos, y me voy otra vez a la lista, vemos que sí ha puesto "Pájaro 2" y "Parque Cast", el problema es que esta ventana se ha quedado atascada por culpa de ese error y por eso no ha actualizado la información correctamente. Pero esta página, ya está lista, ya podemos modificar los datos de los registros.

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.