Páginas o Componentes

Las aplicaciones web construidas con Ionic/Angular están formadas por componentes, los cuales son los bloques de construcción básicos para desarrollar el interfaz de una aplicación. Ionic los denomina página (page) mientras que en Angular son componentes, pero lo único que cambia es el nombre. Cada componente tendrá asociada una directiva o selector (que usaremos para mostrar el componente), una plantilla HTML con la vista del componente, un CSS para asignar el estilo (opcional), y la propia clase que definirá la funcionalidad del componente.

Como ya dijimos al crear un proyecto por defecto vendrá con al menos una página de inicio (HomePage). Si queremos crear más páginas lo podemos hacer usando el CLI de Ionic:

$ ionic g page pagina2

Este comando creará la página "Pagina2Page" (poniendo la primera letra en mayúscula y añadiendo el sufijo "Page") y la almacenará dentro de la carpeta "pages/pagina2". Si abrimos esa carpeta veremos que nos ha creado 3 ficheros:

• pagina2.html con la plantilla de la página,

• pagina2.scss para definir el estilo de la página.

• página2.ts con la definición de la clase de la página en TypeScript.

Para poder utilizar esta página lo primero que tendremos que hacer es añadirla manualmente al módulo principal (app.module.ts). A diferencia de Angular, en Ionic, cuando se crea una nueva página no se añade automáticamente, por lo que nos toca hacerlo a nosotros mismos. Para esto tenemos que importar la nueva clase:

import { Pagina2Page } from '../pages/pagina2/pagina2';

Y también tendremos que añadirla a los arrays "declarations" y "entryComponents" de los metadatos del módulo:

declarations: [
  ...
  Pagina2Page
],
...
entryComponents: [
  ...
  Pagina2Page
],

Una vez hecho esto ya podremos utilizar la página. A continuación vamos a ver cada uno de los elementos que componen la página por separado.

Definición de la página

En primer lugar vamos a ver el elemento más importante de la página, que es la propia definición de la página del fichero pagina2.ts. Esta se realiza mediante una clase de TypeScript que enlazará la vista, la hoja de estilo y nos permitirá comunicarnos desde ella con el template mediante diferentes técnicas de binding que veremos después.

Cuando se crea una nueva página esta incluirá el código básico para crear la página y enlazarla con la vista y la hoja de estilo. A continuación se puede ver el código generado para Pagina2Page:

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

@Component({
  selector: 'page-pagina2',
  templateUrl: 'pagina2.html',
})
export class Pagina2Page {
  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad Pagina2Page');
  }
}

En primer lugar en esta página se añaden los imports necesarios, en este caso se carga la clase del propio componente para poder definir la página, y dos elementos que utilizaremos para la navegación (que veremos más adelante). A continuación se utiliza el decorador @Component para indicar que la clase que viene a continuación es un componente y también para definir un par de metadatos importantes:

• selector: que indica el nombre de la etiqueta HTML que podremos utilizar para cargar esta página o componente. En este caso cuando escribamos "<page-pagina2></page-pagina2>" en alguna plantilla se insertaría este componente en dicho punto. Esta opción es interesante cuando queramos crear un módulo que no sea una página completa, sino una parte de la página que encapsule su funcionalidad, de esta forma crearemos bloques de código reutilizables. Sin embargo, cuado se trate de un componente que define una página completa, veremos más adelante cual es la forma correcta de cargarlo.

• templateUrl: indica el nombre del fichero con la plantilla asociada. En la siguiente sección explicaremos este elemento.

A continuación del decorador viene la definición de la propia clase, la cual incluye un constructor y la función "ionViewDidLoad".

• El constructor será el primer método en ejecutarse y se ejecutará solamente una vez al instanciarse la página. Si nos fijamos en los parámetros que recibe podremos ver que se le pasa un objeto tipo NavController y otro NavParams. En realidad estos parámetros lo que están indicando es que son dependencias de la clase que se tienen que instanciar al inicio de la misma, es decir, están usando el patrón de inyección de dependencias. Por lo tanto, cuando se crea la clase también se inyectan automáticamente todas las dependencias que se indiquen en los parámetros del constructor.

• El método "ionViewDidLoad" forma parte del ciclo de vida de la propia página, y se ejecuta una vez se ha cargado completamente la página. Por lo tanto al sobrecargarlo, todo lo que hagamos dentro de ese método estaremos seguros de que se ejecutará una vez finalizada la carga. Además de este método hay otros muchos que se pueden sobrecargar para ejecutar acciones ante determinados eventos, como por ejemplo cuando se va a destruir la página. En la siguiente imagen se muestra el ciclo de vida completo de una página:

La forma de uso normal de las páginas es primero cargar y preparar los datos necesarios (utilizando proveedores de contenidos si fuera necesario) y a continuación suministrarlos a la vista.

Plantilla o template

El template nos permite definir la vista de la página. Este fichero estará escrito principalmente utilizando HTML, mezclado con directivas o componentes de Ionic (para poner botones, listados, etc.), y con la sintaxis de angular para realizar binding de variables y eventos.

Si abrimos el fichero de plantilla (pagina2.html) generado para "Pagina2Page" veremos que por defecto se incluye el siguiente contenido:

<ion-header>
  <ion-navbar>
    <ion-title>Pagina2</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>

</ion-content>

En este código únicamente se añade una cabecera (<ion-header>) la barra de navegación superior (<ion-navbar>) con el título "Pagina2". Y además se define la sección de contenido de la página (<ion-content>) con un pequeño padding al rededor.

En la sección de "Componentes" ya vimos los principales componentes que podemos utilizar para definir el contenido de forma estática de la página. En las siguientes secciones "Binding" y "Directivas" veremos qué elementos podemos utilizar para mostrar los datos obtenidos desde el componente, para escribir bucles o condiciones que nos permitan generar el contenido dinámicamente.

Estilo

Por último nos queda el tercer elemento de la página: la hoja de estilo. Si abrimos el fichero generado "pagina2.scss" veremos que únicamente se incluye el siguiente código:

page-pagina2 {

}

Este código está preparado para aplicar estilos solamente a esta página. En la sección "Estilos y Temas" veremos cómo podemos modificar el estilo de nuestras aplicaciones.