Proveedores de contenido o Servicios

Los proveedores de contenido (providers o services en Angular) nos permiten compartir contenido entre todas las páginas de una aplicación. Utilizan el patrón singleton, por lo tanto solo se instancian una vez y nos permiten ahorrar recursos si se utilizan múltiples veces.

Para generar un proveedor de contenidos utilizaremos también el CLI de Ionic:

$ ionic g provider datos

Esto nos generará la clase "DatosProvider" dentro de la carpeta "providers/datos". En este caso al crearlo sí que se añade automáticamente al módulo principal. Por lo que no tendremos que hacer nada más, solamente lo tendremos que importar en las clases en las que lo vayamos a utilizar.

El código por defecto que se genera para el proveedor de contenidos es el siguiente:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable()
export class DatosProvider {
  constructor(public http: HttpClient) {
    console.log('Hello MiproviderProvider Provider');
  }
}

Como podemos ver en primer lugar se añaden dos imports: "HttpClient" e "Injectable". El único necesario para definir el proveedor es el de la clase "Injectable". La clase "HttpClient" solo la utilizaremos si vamos a acceder a Internet, en otro caso la podremos eliminar (Ojo, si eliminamos el import tendremos que quitar también la inyección de dependencia de esta clase del constructor).

A continuación se incluye el decorador @Injectable para declarar que la clase que viene a continuación es un proveedor de contenidos, la cual por defecto se crea únicamente con el constructor.

Dentro de esta clase ya podremos definir nosotros la forma de obtener y devolver los contenidos, bien de forma local o accediento a Internet. Por ejemplo podemos utilizarlo para devolver valores almacenados en local, de forma estática:

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

@Injectable()
export class DatosProvider {
  listItems: string[] = ['One', 'Two', 'Three', 'Four'];
  constructor() {}
  getItems(): string[] {
    return this.listItems;
  }
}

Uso desde una página o componente

Para utilizar un proveedor de contenido desde una página lo primero sería añadir el import:

import { DatosProvider } from '../../providers/datos/datos';

A continuación para cargar el proveedor usaremos la inyección de dependencias en el constructor. Una vez hecho esto ya podríamos llamar a sus métodos para utilizarlo:

export class Pagina2Page {
  listItems: string[];
  constructor(private datos: DatosProvider) {
    this.listItems = datos.getItems();
  }
}

Ejemplo de acceso a Internet

En caso de que vayamos a acceder a Internet dejaremos el import de HttpClient y además modificaremos el módulo principal (app.module.ts) para añadir otro import e insertarlo en la sección de imports:

import { HttpClientModule } from '@angular/common/http';

imports: [
    ...
    HttpClientModule
],

Con esto ya podríamos utilizar la clase HttpClient en el proveedor. A partir de las últimas versiones de Angular tenemos que usar HttpClient en lugar de la clase Http. Este último es una versión mejorada, que hace la conversión de tipo automáticamente, no necesitamos usar la clase map, espera JSON por defecto, y en general nos permitirá escribir un código más claro.

Por ejemplo, para crear un proveedor que acceda a URL de Internet y devuelva su contenido simplemente tendríamos que hacer:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable()
export class DatosProvider {
  constructor(public http: HttpClient) { }
  getDatos(param:string) {
    return this.http.get('http://www.example.com?filter='+ param);
  }
}

A continuación, para utilizarlo desde la página tendríamos que importar el proveedor y inyectar la dependencia en el constructor como ya hemos visto (a la que hemos llamado datos). Y para utilizarlo en este caso vamos a sobreescribir el método "ionViewWillEnter", para realizar esta acción una vez cargada la vista. Además tenemos que tener en cuenta que el método "get" de la clase HttpClient devuelve un objeto tipo "observable", al cual nos podemos subscribir con "subscribe" y recuperar los datos para asignarlos a alguna variable local, de la forma:

ionViewWillEnter() {
  this.datos.getDatos('city').subscribe(resultado => {
      this.resultado_local = resultado;
  });
}