Scribd
Cargar
75 vistas

Ionic Con Angular

Este documento describe cómo crear una aplicación móvil con Ionic y Angular, incluyendo la instalación de Ionic, la inicialización de un proyecto, la generación de páginas, la implementación de servicios, el enrutamiento entre páginas, la recuperación de datos, y la conversión a una aplicación móvil para Android.

Cargado por

Patricio Araya
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
75 vistas

Ionic Con Angular

Este documento describe cómo crear una aplicación móvil con Ionic y Angular, incluyendo la instalación de Ionic, la inicialización de un proyecto, la generación de páginas, la implementación de servicios, el enrutamiento entre páginas, la recuperación de datos, y la conversión a una aplicación móvil para Android.

Cargado por

Patricio Araya
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 38

Ionic con Angular

Desarrollo Web y Móvil


Instalación de Ionic
Es requisito tener instalado NodeJS

Crear la carpeta del proyecto e instalar desde el terminal


Inicialización del proyecto Ionic
Inicializar usando framework Angular
Inicialización del proyecto Ionic
Seleccionar la plantilla, en este ejemplo usaremos blank
Abrir la carpeta del proyecto con Visual Studio Code
Abrir con la tecla F1 Terminal Create New Integrated Terminal

Si el comando no opera se debe reiniciar el editor Visual Studio Code


Ejecutar el servidor ionic
Ejecutar el servidor
generar una página ionic desde la carpeta del proyecto
lanzar ionic para generar página
revisar la generación de la nueva página
lanzar ionic para revisar la página creada con places
Dejar una página como inicial (homepage) - places será home
Modificar homepage
Modificar página principal - Crear datos de prueba
Implementar la página

Datos de Prueba
Modificar página principal - Mostrar datos de prueba
Implementar la página places.page.html

Acceder a la data JSON en places.page.ts


Modificar página principal - Mostrar datos de prueba
Implementar la página places.page.html

incorporar etiquetas ionic en places.page.html

Una lista de items (*ngFor) que contienen:

Una imagen img de un avatar es colocada


al inicio (start)

luego es seguida de una etiqueta (label)


Modificar JavaScript de página Principal - Refrescar datos
Implementar ionViewWillEnter
Crear páginas secundarias
Utilizamos ionic generate

places

place-detail
Permitir enrutamiento a las páginas secundarias
Se debe modificar el enrutados app-routing.module.ts Se modifica la ruta places
generando hijos children

Si carga el home (“”)

Si carga el usando
usando un id
Crear un archivo de modelo para la gestión de datos en place
Se crea en la carpeta places
Places place.model.ts
Generar los servicios asociados al enrutamiento
utilizamos ionic generate service
Generar un servicio
llamado places dentro de
la ruta places para
implementar los métodos
Mover la data al servicio para que quede accesible
se debe copiar y pegar desde el archivo places Cortar - Pegar
Implementar las funciones CRUD en el servicio
Implementación de CRUD
Recuperar los datos entre páginas mediante servicios
Implementación de CRUD

Acceder a la
información enrutada
en link

Mapear los
parámetros y capturar
el id
para mostrarlo por
consola
Recuperar los datos entre páginas mediante servicios
Desplegar datos en las subpáginas
Despliegue de los datos del subformulario
Desplegar datos en las subpáginas
Despliegue de los datos del subformulario
Desplegar datos en las subpáginas

Si hay datos de
comentarios despliegue
todos los comentarios

Si no hay datos
despliegue un mensaje
Colocar botones de acción
Desplegar datos en las subpáginas

Se colocó un botón de
papelera, para
implementar la acción
eliminar
Implementar el botón borrar
Llamar al servicio para eliminar el registro
Modificar para que refresque automaticamente al borrar
Modificar el constructor agregando router para enrutar e implementar la funcionalidad
Agregar la página para agregar elementos
Se debe agregar una nueva página ionic
Generar las rutas a la nueva página
Se debe agregar una nueva página ionic
Colocar el botón para agregar nuevo item y enrutarlo
se debe agregar el enrutamiento para el botón
Implementar la página de captura de datos
se debe agregar el enrutamiento para el botón
Implementar el JavaScript de recuperación de los valores
Se debe configurar el JavaScript asociado a la página place-add.page.html

Recupera el valor contenido en el


dato pasado por parámetro
Recuperando datos desde un servidor backend (Simulado)
Crear un servicio para recuperar los datos desde el server o proveedor de datos

Se agrega un módulo
HttpClient para importar
JSON mediante consulta
API
Recuperando datos desde JSONPlaceholder un REST API
Crear un servicio para recuperar los datos desde el server o proveedor de datos

https://jsonplaceholder.typicode.com/photos?_limit=11

Implementación de la
función para recuperar las
fotos
Recuperando datos desde JSONPlaceholder un REST API
Crear un servicio para recuperar los datos desde el server o proveedor de datos

Configuración de la
recuperación de datos
Pintar los datos en el formulario
Crear un servicio para recuperar los datos desde el server o proveedor de datos
Convertir a un app móvil (apk)
Instalar Android Capacitor de Ionic

/Software/proyectos/ionic/ejemplo$ npm install @capacitor/core @capacitor/cli


Preparar para capacitor y ejecutar en Android Studio
/Software/proyectos/ionic/ejemplo$ ionic build

/Software/proyectos/ionic/ejemplo$ npx cap add android

/Software/proyectos/ionic/ejemplo$ npx cap open android

También podría gustarte