Ionic framework

Ionic es un framework que permite crear aplicaciones móviles híbridas. Éstas aplicaciones son las que emplean tecnologías como HTML, CSS y Javascript. Una aplicación móvil híbrida se despliega dentro de un contenedor como Cordova. Contrario a las aplicaciones nativas no emplea ninún lenguaje propio del dispositivo.

Instalando Ionic Framework

$ npm i -g ionic

Comprobamos su instalación:

$ ionic --version

Creando una aplicación.

Creamos una aplicación en blanco.

$ ionic start miApp blank --type=angular

Nos ubicamos en la carpeta creada.

$ cd miApp 

 Arrancamos el servidor:

$ ionic serve

Se abrirá el navegador en la dirección http://localhost:8100

Creamos una página.

$ ionic generate page pagina-uno

Ahora editamos home.page.html y agregamos un botón.

<div class="ion-padding">
    <p>Está la página de inicio.</p>
    <ion-button class="primary"  (click)="launchPaginaUnoPage()" >Ir a la página uno</ion-button>
  </div>

Editamos home.page.ts añadiendo un método para lanzar la página pagina-uno.

import { Component } from '@angular/core';
import { NavController } from '@ionic/angular';
import { PaginaUnoPage } from '../pagina-uno/pagina-uno.page';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(public navCtrl: NavController,
   private router: Router) {}

  launchPaginaUnoPage(){
   console.log('Voy a la página uno')
   this.router.navigate(['/pagina-uno'])
  }

}

Agregamos un bóton de regreso a home en pagina-uno.page.html

<div class="ion-padding">
    <p>Está es nuestra primera página.</p>
    <ion-button class="primary" (click)="launchHomePage()" >Ir a home</ion-button >
  </div>

Creamos el método para regresar a home en pagina-uno.page.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-pagina-uno',
  templateUrl: './pagina-uno.page.html',
  styleUrls: ['./pagina-uno.page.scss'],
})
export class PaginaUnoPage implements OnInit {

  constructor(private router:Router) { }

  ngOnInit() {
  }

  public launchHomePage():void{
    console.log('De regreso a home');
   this.router.navigate([''])
  }


}

Arrancamos el servidor.

$ ionic serve

Observamos el resultado:

Damos click en Ir a la página uno.

 Tenemos hecha nuestra primera aplicación con Ionic.