¿Qué es Ionic?

1

Requisitos del curso y presentación del proyecto

2

¿Qué hay de nuevo en Ionic 4?

3

¿Qué ha cambiado en Ionic?

4

Instalación de Ionic y templates básicos

5

Instalación de Capacitor y uso en Android Studio

6

Uso de Capacitor y xCode

7

Sincronizando nuestro proyecto con los emuladores

Componentes básicos de Ionic

8

El componente Slides

9

CSS y Custom Properties de los componentes de Ionic

10

Slides dinámicos

11

Angular Router e Ionic Storage

12

Controlar la navegación con Guards

13

Utilidades de CSS con Ionic

14

Crear una página de login

15

Validar inputs del formulario de login

16

Envío del formulario

17

Servicio para validar credenciales

18

Agregar Guards a nuestro login

19

Crear una página de registro

20

Navegación entre login y registro

21

Agregar un menú con el componente Menu

22

Dar funcionalidad y estilos al menú

23

Uso de componente Slides y opciones avanzadas

Consumo y manejo de informacion con Ionic

24

Consumiendo un API para llenar información de nuestros artistas

25

Página completa con artistas, canciones y álbums

26

El componente Modal y el Modal Controller

27

Llenar de contenido el Modal

28

Componente Footer y funcionalidad del Modal

29

Construyendo nuestro reproductor

30

Lógica de nuestro reproductor

31

RETO: Vista de álbums

Acceso al hardware

32

Usar la cámara a través de Capacitor

33

Corrección de errores y afinando detalles

34

Mejorando nuestra página de Settings con CSS

35

Página Sports y Angular Maps

36

Crear la página Sport

37

RETO: Buscador dinámico en Sports

38

Llevar nuestra aplicación a producción con Android

39

Llevar nuestra aplicación a producción con iOS y cierre del curso

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso de Ionic 4

Curso de Ionic 4

Sebastián Gómez

Sebastián Gómez

Angular Router e Ionic Storage

11/39
Recursos

Aportes 19

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Hola amigos, a mi me marcaba error en el app.module.ts al momento de importar el modulo IonicStorage . Lo que hice fue lo siguiente.
En consola ejecute esto: npm install @ionic/storage-angular
e importe esto en app.module.ts : import { IonicStorageModule} from “@ionic/storage-angular”;

En la función Finish agreguen esto también.
this.storage.create();

revisando un poco la doc de ionic existe una dependencia especial para angular que lo mensionan aquí, basicamende dice que ocupen para angular

npm install @ionic/storage-angular

en lugar de :

npm install @ionic/storage

Mi inquietud es cual es la diferencia entre IonicStorage y Localstorage???

Esta funciónalidad de los slides a nivel de UX/UI lo llaman Onboarding

En mi caso la variable isIntroShowed me apareció en Web SQL y no en IndexedDB.

#IONIC 6
@ionic/storage es una API de clave/valor de código abierto para almacenar información de las aplicaciones en múltiples plataformas.
Para Ionic 6 les comparto el enlace con la documentación y la forma de instalar el Storage es:

npm install @ionic/storage-angular

En el archivo src/app/app.module.ts debe importar el modulo:

import { IonicStorageModule } from '@ionic/storage-angular';

Parece que cambió con ionic 5 la dependencia de store

npm i --save @ionic/storage --save--exact -> NO FUNCIONA
npm install @ionic/storage-angular --save-exact 

Si estan usando la version 6 de ionic y se esta usando angular se debe especificar con otro npm: npm install @ionic/storage-angular.
en el app.module.ts debe importarse asi: import { IonicStorageModule } from ‘@ionic/storage-angular’;

y dentro de los imports asi: IonicStorageModule.forRoot()

cual es la diferencia entre ionic storage y native storage? He leido que algunos prefieren el native storage por la velocidad de este

Me parece que crear una función para usar el NavigateByUrl e importar el modulo es mucho proceso cuando podemos usar el routerLink en el botón directamente de una forma mas simple y navega de la misma manera a la ruta.
Así quedaría el botón en el HTML y no necesitaría escribir código en ts:

 <ion-button routerLink="/home"> 

Muy interesante la documentación del funcionamiento de ionic storage, recomiendo leerla.
https://ionicframework.com/docs/angular/storage

npm install --save @ionic/storage --save-exact

Remover slides ==> colocar funcionalidad a un botón, el botón X que cierre los slides y me dirija a la página Home.

  1. Mover estos slides (html, page y el css) a una página intro (introducción a la página).

  2. guardar la variable que indica que el usuario ya vio el tutorial.

2.1 crear storage dentro de la intro.page.ts (e importarlo)
2.2 inicializar el storage de ioinic dentro del app.module.ts (e importar el módulo)
2.3 en el intro.page.ts declarar un método finish que dependa de una variable guardada en el storage.

finish(){
	this.storage.set("isIntroShowed",true)
}

Me esta encantando este curso de ionic, aunque este un poco desactualizado, estoy aprendiendo muchas cosas. Dejo un pequeño aporte de como va quedando mi app 😁😁😁

Tambien puedes utlizar:

this.router.navigate(['/home']); 

tengo este error :
core.js:6140 ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(IntroPageModule)[Storage -> Storage -> Storage -> Storage]:
NullInjectorError: No provider for Storage!
NullInjectorError: R3InjectorError(IntroPageModule)[Storage -> Storage -> Storage -> Storage]:
NullInjectorError: No provider for Storage!

ya instale :npm install --save @ionic/storage --save-exact y nada

Cual es la diferencia entre Router de angular y NavController de Ionic/Angular?

npm install --save @ionic/storage --save-exact