ionic 4 intro

Enlaces.md

Instalar dependencias

npm i -g ionic cordova

Crear proyecto

ionic start nombreProyecto blank

Ejecutar proyecto en el navegador

ionic serve

Crear una nueva página (screen)

ionic generate page nombre-pagina

Crear un componente (para reusar desde varias páginas)

ionic generate component nombre-componente

Más comandos aquí: https://ionicframework.com/docs/cli/commands/generate

Documentación:

• Estructura básica de una página: https://ionicframework.com/docs/layout/structure
• Grid Responsive: https://ionicframework.com/docs/layout/grid
• Estilos: https://ionicframework.com/docs/layout/css-utilities
• Componentes de Ionic: https://ionicframework.com/docs/components
• Navegación: https://ionicframework.com/docs/api/nav#methods

NAVEGACIÓN (Angular):

• Desde HTML: https://ionicframework.com/docs/api/router-link

<ion-button color="dark" routerLink="/login" routerDirection="root">Navegar a login</ion-button>

• Desde JS: https://ionicframework.com/docs/api/nav#methods

import { NavController } from '@ionic/angular'

@Component({...})
export class MiPaginaDeEjemplo {
  constructor(private navController: NavController) {}

  navigateTo () {
    //Por si quieres agregar validaciones antes de navegar a una página...
    this.navController.push('/about')
    //Y si no quieres que puedan volver a navegar hacía atrás usas esto:
    this.navController.setRoot('/login')
  }
}

• Eventos del ciclo de vida de las páginas: https://ionicframework.com/docs/angular/lifecycle#ionic-page-events

@Component({...})
export class LoginPage {
  ionViewWillEnter () {
    alert('Va a navegar a la página')
  }
  ionViewDidEnter () {
    alert('Terminó de navegar a la página')
  }
  ionViewWillLeave () {
    alert('Se va a salir de la página')
  }
  ionViewDidLeave () {
    alert('Se salió de la página')
  }
}