Ionic 2 está creado encima de Angular, así que nuestras posibilidades de desarrollo están muy entrelazadas con las de este framework Javascript. Debe quedar claro que realmente no necesitamos hacer nada para poder empezar a usar Angular, ya que viene perfectamente integrado y funcionando en el proyecto básico de Ionic 2.

Habíamos dicho que nuestro Manual de Ionic 2 no pretendía ser una guía para el desarrollo con Angular, ya que el framework Javascript es suficientemente complejo como para verlo de manera independiente en el Manual de Angular. No obstante sí queremos detenernos a ver rápidamente algunas cosas que en este framework de desarrollo híbrido debemos conocer, heredadas directamente de Angular. Las veremos rápidamente, pero si ya conoces Angular 2 posiblemente poco nuevo aportaremos para ti, con lo que podrías perfectamente saltar este artículo y continuar por el siguiente.

Obviamente, no trataremos de una guía completa de Angular y vamos a centrarnos principalmente en las cosas que se pueden hacer desde las vistas, el código HTML de nuestros componentes.

Componentes en Angular

Solo remarcar que la arquitectura de las aplicaciones de Angular es basada en componentes. Esto ya lo vimos en el artículo Qué es Ionic 2 y además explicamos que un componente contiene diversos códigos en archivos separados (El registro del componente en TypeScript, la vista en HTML y los estilos CSS) en el artículo Hola Mundo en Ionic 2.

Desde las vistas de Ionic 2, en archivo .html, podemos acceder a propiedades y métodos del componente definidas en el archivo de TypeScript, para volcar información de propiedades, recorrer items de un array con directivas como ngFor, crear condicionales con ngIF, definir eventos que se ejecuten por medio de métodos de la clase del componente, etc.

Volcar el valor de una propiedad en la vista

Si en un componente, en la clase de su definición, tenemos un dato, podemos mostrarlo en la vista del componente, para que aparezca su valor al visualizar el componente en la página.

Nuestro componente tendrá esta definición en el TypeScript:

export class HomePage {
  nombre_propiedad:string = 'Esto es un test';
}

Ahora, después de crear la propiedad en el componente, podemos mostrar su valor en la vista. Esto se hace desde la vista con la sintaxis de las dobles llaves.

{{nombre_propiedad}}

Esto es básicamente lo que hicimos en el pasado artículo del Hola Mundo en Ionic 2, así que no necesita mucha más explicación.

Asignar un valor del componente a un atributo

Ahora tenemos una propiedad definida de esta manera:

autor:string = 'Nicolás Molina';

Si queremos mostrar ese valor como un atributo de un componente, usamos la sintaxis de los corchetes. Solo que ahora colocamos los corchetes en el nombre del atributo cuyo valor tenemos que traer de una propiedad.

<input type="text" [value]="autor">

Definir un evento sobre un elemento

La manera de definir un evento sobre un elemento de la vista, o simplemente invocar una función (método de la clase del componente) cuando ocurra cualquier cosa, es mediante la sintaxis de los paréntesis.

Entre paréntesis colocaremos el tipo de evento y luego como valor el nombre de la función a ejecutar.

<button ion-button (click)="cambiarAutor()">Cambiar Autor</button>

Así tenemos un botón (con la directiva ion-button indicamos que se visualice con las reglas de estilo determinadas para cada plataforma) y su evento "click", asignado a la función cambiarAutor(). Esa función se define como un método en el código TypeScript del componente.

export class HomePage {
  autor:string = 'Nicolás Molina';

  cambiarAutor() {
    this.autor = 'Colaborador DesarrolloWeb.com';
  }
}

Al hacer clic se invocará el método cambiarAutor(), que modificará la propiedad "autor". Eso provocará un cambio en la página, allí donde se esté usando esa propiedad, actualizando el valor en la vista.

Realizar un doble binding sobre una propiedad editable

Nos quedaba por ver cómo conseguir un binding a dos vías (el popular two way binding por el que Angular triunfo entre los desarrolladores). Esto se hace ahora por medio de un mecanismo explícito, en el que usamos la directiva ngModel y la sintaxis "banana in a box" (paréntesis metidos dentro de corchetes).

Ahora con 2 way binding:

<input type="text" [(ngModel)]="autor">

Puedes fijarte que realmente estamos usando en una única vez dos características de las comentadas antes en este artículo. Los corchetes sirven para asignar un valor en un atributo y los paréntesis para ejecutar una función. Lo que se está asignando y ejecutando es ngModel, la directiva que nos permite hacer esta operación.

Recorrer un array de datos con ngFor

Una de las directivas más útiles y recurrentes en Angular es ngFor, que permite recorrer una estructura de Array.

En nuestro componente creamos un array, o accedemos a él meditante un origen de datos y luego lo tendremos disponible en el template para recorrer.

Este podría ser el código de nuestra clase, definido un array llamado "arraySitios" por medio de un literal:

export class HomePage {
  test:string = "Bienvenido a Ionic 2";
  
  arraySitios:any[] = [
    {
      nombre: 'DesarrolloWeb.com',
      url: 'https://desarrolloweb.com'
    },
    {
      nombre: 'EscuelaIT',
      url: 'https://escuela.it'
    },
  ]

  constructor(public navCtrl: NavController) {
    
  }

}

Ahora en la vista podremos recorrer este array de la siguiente forma:

<ion-list>
    <ion-item *ngFor="let sitio of arraySitios">
      <a href="{{sitio.url}}">{{sitio.nombre}}</a>
    </ion-item>
  </ion-list>

Usamos el componente "ion-list" que nos permite hacer una lista de items. Luego los items se definen con ion-item. En el código solo aparece 1, pero gracias al *ngFor se duplicará el código del ítem para cada uno de los elementos del array.

En este caso indicamos *ngFor="let sitio of arraySitios", que básicamente quiere decir que se cree una variable "sitio" cuyo valor será cada uno de los ítem del array, en cada iteración.

Dentro del componente de la repetición (ion-item) podemos acceder al ítem actual con la variable "sitio", que como es un objeto tendrá sus propiedades "nombre" y "url".

Conclusión

Como hemos dicho, Angular es gigante y cualquier intento de resumirlo en un artículo sería un completo despropósito. Pero estamos seguros que con lo que hemos visto seremos capaces de sobrevivir en lo sucesivo con Ionic 2, entendiendo varias de las sintaxis que nos son entregadas por esta trabajando directamente con Angular.

Para que no haya lugar a dudas, dejo a continuación el listado de los dos archivos que hemos tocado durante este artículo, dentro del componente "home" del template blank de Ionic 2.

home.ts, el código TypeScript del componente

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  test:string = "Bienvenido a Ionic 2";

  autor:string = 'Nicolás Molina';
  
  arraySitios:any[] = [
    {
      nombre: 'DesarrolloWeb.com',
      url: 'https://desarrolloweb.com'
    },
    {
      nombre: 'EscuelaIT',
      url: 'https://escuela.it'
    },
  ]

  constructor(public navCtrl: NavController) {
    
  }

  cambiarAutor() {
    this.autor = 'Colaborador DesarrolloWeb.com';
  }
}

home.html, la vista del componente

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h1>Hola Mundo</h1>
  <p>Estamos en Ionic 2 y este es el componente de la página Home.</p>
  <p>{{test}}</p>
  <p>
    <ion-icon name="logo-angular"></ion-icon>
    Me gusta Angular
  </p>

  One Way binding: <input type="text" [value]="autor">

  <p>El autor es: {{autor}}</p>

  Con 2 way binding: <input type="text" [(ngModel)]="autor">

  <ion-list>
    <ion-item *ngFor="let sitio of arraySitios">
      <a [href]="sitio.url">{{sitio.nombre}}</a>
    </ion-item>
  </ion-list>

  <button ion-button (click)="cambiarAutor()">Cambiar Autor</button>
</ion-content>