Ejercicios 4

En esta sección de ejercicios vamos a terminar la aplicación de la biblioteca completando la arquitectura de Angular para transmitir los datos desde los componentes a las plantillas.

Ejercicio 4.1 - Página de autor y currículum (1 punto)

En la página de autor declaramos la variable "autor" de tipo objeto con las siguientes propiedades:

autor:{
    name:string,
    email:string,
    twitter:string,
    phone:string
};

La inicializamos en el constructor con nuestros datos (this.autor = {name: 'Javi', ...};) y la utilizamos para rellenar los campos correspondientes de la plantilla .html utilizando el binding por interpolación (por ejemplo: {{ autor.name }}).

En la subpágina con el currículum vamos a hacer lo mismo. En primer lugar declaramos la variable listaTrabajos con el siguiente formato:

listaTrabajos:{fecha:string, desc:string}[];

Y la rellenamos con los datos en el constructor (this.listaTrabajos = [{fecha:'2012-2015', ...}, ...]). Ahora procedemos a modificar la plantilla para que utilice estos datos. Para esto vamos a hacer uso de la directiva *ngFor sobre la etiqueta "ion-item" para que cree un elemento de la lista por cada uno de los elementos del array listaTrabajos. Además vamos a aplicar la directiva *ngIf sobre la etiqueta de apertura de la lista (ion-list) para que únicamente se cree si el array contiene algún elemento:

<ion-list *ngIf="listaTrabajos">
  <ion-item *ngFor="let trabajo of listaTrabajos" text-wrap>
    <!-- TODO: Asignamos los datos -->
  </ion-item>
</ion-list>

El atributo "text-wrap" indica que se parta la cadena de texto en caso de que ocupe más que el ancho de pantalla. Si no lo ponemos el texto se saldría por el margen derecho y no se podría leer. En la sección "CSS Utilities" de la documentación podemos encontrar más etiquetas similares para ajustar la disposición de texto y contenidos.

Ejercicio 4.2 - Página de iBiblioteca (1.5 puntos)

En este ejercicio vamos a terminar la página principal de la iBiblioteca, para la que haremos uso de los proveedores de contenidos y del paso de parámetros entre pantallas.

En primer lugar crea un proveedor de contenidos llamado "libros". Recuerda que en el caso de los proveedores, al contrario que con las páginas, Ionic los añade automáticamente al módulo principal. Edita el proveedor (que estará en la carpeta providers) y elimina el import de HttpClient, ya que no lo vamos a utilizar. Además tendrás que quitar también la inyección de dependencia de esta misma clase que se realiza en el constructor.

Define la variable "libros" para que sea un array de objetos con todos los campos que vamos utilizar:

private libros:{title:string, year:string, author:string, 
            isbn:string, editorial:string, cover:string}[];

Inicializa esta variable en el constructor con todos los datos de las películas. Una vez hecho esto tenemos que añadir también un método al proveedor (llamado getLibros) que devuelva directamente la lista de libros completa (return this.libros).

Ahora vamos a modificar la página "ibiblioteca" para que haga uso del proveedor de libros. En primer lugar añade el import para que cargue esta clase:

import { LibrosProvider } from '../../providers/libros/libros';

Añádelo también a los parámetros del constructor para que se inyecte como dependencia. Una vez hecho esto ya podemos usar el proveedor dentro de esta clase. En este caso vamos a utilizarlo dentro del constructor para llamar a su método "getLibros" y guardar el resultado en la variable "listaLibros" (la cual la puedes declarar del tipo "listaLibros:any[]").

Modifica ahora la plantilla asociada a esta página para que utilice la variable "listaLibros" rellenada con los datos del proveedor de libros. Para esto podemos utilizar también las directivas *ngFor y *ngIf como vimos para la página de autor:

<ion-list *ngIf="listaLibros">
    <button ion-item *ngFor="let libro of listaLibros" (click)="verPaginaDetalle(libro)" text-wrap>
        ...
    </button>
</ion-list>

Fíjate que se ha cambiado la llamada al método "verPaginaDetalle" del evento "click" para pasarle como parámetro el propio libro.

Ejercicio 4.3 - Página detalle (0.5 puntos)

Por último vamos a terminar la página "detalle". Ahora el constructor de esta página ya no recibe como parámetro de llamada un número si no un objeto con los datos del libro. En los ejercicios de la sección anterior guardamos este parámetro de entrada en la variable "libro" de tipo "any". Utiliza esta variable para rellenar los campos del template asociado. Recuerda cambiar también el título de la barra de navegación para que indique el título de libro que se esté visualizando.