Componenti e binding dei dati

Nella precedente puntata abbiamo preso confidenza con alcuni componenti Ionic 2 per la definizione dell'interfaccia grafica di un'applicazione che mostra le ultime notizie. Per i nostri scopi i contenuti erano statici, cablati nel markup dell'interfaccia, ma naturalmente non è questa l'applicazione che vogliamo realizzare. Abbiamo bisogno di un rendering dinamico dei dati relativi alle notizie. Vediamo quindi come fare sfruttando in pratica il framework Angular 2 sottostante.

Il primo passo consiste nel creare una classe che rappresenti la singola notizia. Creiamo quindi una cartella components all'interno della cartella src e al suo interno creiamo una nuova cartella news, come mostrato dalla seguente immagine:

Nella cartella news creiamo il file news.ts che conterrà la seguente definizione della classe News:

export class News {
    title: string;
    date: Date;
    imagePreviewUrl: string
    imageUrl: string;
    text: string; 
    constructor(title: string, date: Date, imagePreviewUrl: string, imageUrl: string, text: string) {
        this.title = title;
        this.date = date;
        this.imagePreviewUrl = imagePreviewUrl;
        this.imageUrl = imageUrl;
        this.text = text;
    }
}

Come è facile intuire, la classe definisce una notizia che ha come proprietà il titolo, la data di pubblicazione, l'url di un'immagine e della sua anteprima ed il testo della notizia. Il costruttore della classe non fa altro che inizializzare queste proprietà con i valori dei suoi parametri.

Il passo successivo consiste nel creare un componente Angular che mostri i dati principali della notizia, in modo che essi possano apparire nella view dell'applicazione. Chiamiamo questo componente NewsHeadline e lo definiamo come mostrato dal seguente codice:

import {Component, Input} from '@angular/core';
import {News} from './news'; 
@Component({
    selector: 'news-headline',
    template: `
<ion-item>
    <ion-thumbnail item-left>
      <img src="{{news.imagePreviewUrl}}">
    </ion-thumbnail>
    <h2>{{news.title}}</h2>
    <p>{{news.date | date: 'dd/MM/yyyy'}}</p>
    <button clear item-right>Leggi</button>
</ion-item>`
})
export class NewsHeadline {
    @Input()
    news: News; 
    constructor() { }
}

Questo componente importa la classe News creata prima e definisce una proprietà di input news di quel tipo. Al componente viene associato il selettore news-headline ed il template non è altro che il markup relativo alla singola notizia che avevamo visto nella scorsa puntata. In questo caso, però, abbiamo sostituito ai valori statici della notizia le espressioni che fanno riferimento ai dati della notizia rappresentati dalla proprietà news.

A questo punto non ci resta che utilizzare il componente e la classe appena definiti all'interno della home page dell'applicazione. Creiamo una lista di notizie nel costruttore del componente HomePage definito nel file /src/pages/home/home.ts, come mostrato di seguito:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular'; 
import {News} from '../../components/news/news'; 
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  newsList: Array<News>; 
  constructor(public navCtrl: NavController) {
        this.newsList = [
            new News("Incubo Brexit...", new Date(2016, ...), ...),
            new News("AT&T-Time Warner...", ...),
            new News("Cyber-attacco DDOS ...", ...)
        ];
  }
}

Come possiamo vedere abbiamo definito la proprietà newsList come un array di notizie e l'abbiamo inizializzata nel costruttore dell'HomePage.

Per rendere disponibile all'interno dell'interna applicazione il componente NewsHeadline che abbiamo definito, dobbiamo importarlo e dichiararlo nel modulo principale dell'applicazione in /src/app/app.module.ts, come mostrato di seguito:

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
...
import {NewsHeadline} from '../components/news/newsHeadline'; 
@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ...
    NewsHeadline
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    ...
  ],
  providers: []
})
export class AppModule {}

In pratica il nostro intervento all'interno del modulo dell'applicazione consiste nell'importazione del componente NewsHeadline tramite l'istruzione import e nel suo inserimento nell'array delle declarations.

Ora siamo pronti per utilizzare il componente all'interno del markup della home page dell'applicazione:

<h2 class="center">Principali notizie</h2> 
<ion-list>
	<news-headline *ngFor="let notizia of newsList" [news]="notizia">
	</news-headline>
</ion-list>

È interessante notare che invece di specificare un elenco di <ion-item> all'interno del componente Ionic <ion-list>, abbiamo inserito il nostro componente <news-headline> specificando la direttiva strutturale *ngFor che genererà una istanza per ciascuna notizia contenuta nell'array newsList.

Per il binding della singola notizia con il componente abbiamo sfruttato la notazione [] di Angular 2 che permette di assegnare un valore alla corrispondente proprietà del componente.

In questo modo abbiamo ricostruito l'interfaccia grafica vista nella scorsa puntata con il vantaggio di essere generata dinamicamente a partire dai dati contenuti nell'array newsList.