Angular 2 Tutorial (Parte 5)

Angular 2 Tutorial (Parte 5)

Angular 2 Tutorial

En esta 5ta entrada de la serie Angular 2 Tutorial, conoceremos lo que son los Services en Angular 2.

En la Parte 4, trabajamos con lo que sería el Two Way Data Binding de Angular 2 y logramos agregar 2 campos INPUTs y un botón dando la oportunidad al usuario de agregar sus productos y cantidades a la lista.

Ahora bien tanto la lógica UI (Gestión de Inputs y Outputs de parte del usuario), como la lógica de negocio (Todo lo relacionado con la gestión de los items de la lista de compras) la tenemos metida dentro de la clase que define al Componente (AppComponent). Esto en si no es una buena practica ya que bajo al filosofía MVC (Model View Controller) es importante desligar toda la gestión del modelo de datos (la “M” de MVC) de la vista (la “V” de MVC) y del Controlador (la “C” de MVC).

Dicho esto, podríamos decir para nuestra Shopping Lista App, el Controller viene representado por el componente (clase AppComponet), la vista por la plantilla (app.template.html) y
el modelo de datos viene representado por todo lo refiere a la gestión de los items de una lista de compras.

Pues en Angular hay un concepto llamado Services, el cual podemos usar para encapsular todo lo relacionado con la gestión de los items de una lista de compras Y es lo que veremos a continuación.

Services en Angular 2

Los Services o servicios no son más que clases TypeScript (o JavaScript) que encierran lógica de negocio que luego puede ser inyectadas en los componentes para su utilización.

Son una forma de encapsular funcionalidades especificas de tu app que han de funcionar independientemente del UI o vista con la cual interactua el usuario.

Los Services o Servicios en Angular 2 se definen mediante una clase TypeScript a la cual se asocia el TypeScript Decorator @Injectable un ejemplo de definición de un Service en Angular 2 sería:

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

@Injectable()
export class ListService {
    constructor() { }

}

Para hacerlo más interesante vamos a extraer del componente (AppComponent), todo lo relacionado con la gestión de items y lo vamos a encapsular en un servicio que llamaremos ListService, el cual definiremos en un fichero nuevo llamado app.service.ts de la siguiente manera (prestar atención a los comentarios):

//Importamos el objeto Injectable de angular/core para poder hacer uso del Decorator
import { Injectable } from '@angular/core';

//Importamos el tipo de objeto Product el componente 
import { Product } from './app.component';

//Declaramos 
@Injectable()
export class ListService {
   //Mini BD de productos con sus cantidades
  itemsDB: Product[] = [
        {productName: 'Manzanas', cantidad: 5}, 
        {productName: 'Pera', cantidad: 2},
        {productName: 'Banana', cantidad: 1},
        {productName: 'Kiwi', cantidad: 3},
        {productName: 'Melocoton', cantidad: 10}, 
        {productName: 'Patatas', cantidad: 10}, 
        {productName: 'Jamón', cantidad: 2},
        {productName: 'Queso', cantidad: 2},
        {productName: 'Tomates', cantidad: 5},
        {productName: 'Pimientos', cantidad: 1}
        ];

    //Listado de Items activos en la lista.
    items = [];

    //Método Constructor sin parametros necesario para lograr la inyeccion e instanciamietno 
    //del servicio en los componentes donde se necesite   
    constructor() { }

    //Método para obtener del servicio los items activos en la lista
    //Este método devuelve una Promises con lo cual podemos manejar de 
    //ser necesario peticiones asincronas   
    getItems(): Promise<Product[]> {
      return Promise.resolve(this.items);
    }

    _pickRandomItems(): void {
        //Método que determian de foram aleatoria los items 
        //que se han de mostrar en pantalla
        this.items = [];
        let itemsCount = Math.floor((Math.random() * 10) + 1);
        for (var index = 0; index < itemsCount; index++) {
          let item = this.itemsDB[Math.floor((Math.random() * 9) + 0)];
          this.items.push(item);
        }
    }

    //Método para aregar items a la lista de items activos
    //Este método devuelve una Promises con lo cual podemos manejar de 
    //ser necesario peticiones asincronas
    addProduct(newProduct: Product): Promise<Product[]> {      
        //Creamos un nueva instancia del Product
        let newProd: Product = new Product();
        //Agregamos al nuevo producto, el nombre y la cantidad informada por el usuario
        newProd.productName = newProduct.productName;
        newProd.cantidad = newProduct.cantidad;
        //Agregamos en nuevo producto a la lista
        this.items.push(newProd);
        //resolvemos la Promise retornando los items activo incluyendo el item agreagdo
        return Promise.resolve(this.items);
    }
}

Ahora que hemos extraído todo lo relacionado con la gestión de items, debemos ajustar nuestro componente (AppComponent) de la siguiente manera para que haga uso del servicio ListService (prestar atención a los comentarios):

/** 
 * Importamos de la libraería @angular/core los modulos
 * Component: Usado para definir el componente
 * OnInit: usado para 
 * OnInit: usado para implementar la interfaz OnInit y con ella el método ngOnInit()
 * 
 * Importamos de la librería rxjs/Rx el modulo:
 * Observable: usado para suscrubirnos a un Observable Timer
*/
import { Component, OnInit} from '@angular/core';
import { Observable } from 'rxjs/Rx';

//Importamos el servicio ListService del fichero app.service.ts  
import { ListService } from './app.service';

/** 
 * Definimos el componente haciendo uso del decorator @Component   
 * y los siguientes parámetros:
 * selector = define el nombre del selector CSS usado por un elemento 
 *            HTML que representa al componente  
 * template = define la plantilla HTML que renderiza el contenido en pantalla
 * providers = Permite definir los servicios que se van a usar en este componente 
*/
@Component({
  selector: 'mi-app',
  templateUrl: 'app/app.template.html',
  //Con la porpiedad providers inyectamos los servicios que usa este componete 
  providers: [ListService]
})

/**
 * Declaramos el AppComponent bajo la clase AppComponent
 * y lo exportamos para que sea accesible 
 */
export class AppComponent  implements OnInit {
  //Titulo del Componente
  title = 'Mi Shopping List';
  
  //Declaramos el Array de Items que se mostrará en pantalla de tipo Product    
  items: Product[] = [];

  _myInterval = null;

  newProduct: Product = {
    productName: "",
    cantidad: 0
  }

  //Usamos los parámetros del constructor del componente para
  // instanciar el o los servicios, en este caso inyectamos e
  // instanciamos el servicio ListService, para poder hacer uso del mismo 
  //en cualquier otro método de este componente 
  constructor(private listService: ListService) {
    
  }

  ngOnInit(): void {
    //ngOnInit es un método se ejecuta cuando el componente 
    //esta completamente instanciado

    //Usamos el método getItems() del ListService para obtener los items activos 
    this.listService.getItems().then(items => this.items = items);  
  }

  addProduct():void {
    //Verificamos si el usuario ha introducido un nombre de producto y una cantidad
    if (this.newProduct.productName === "" || this.newProduct.cantidad === 0){
      return;
    }
    
    //Usamos el método addProduct del Servcio ListService para almacenar el producto 
    this.listService.addProduct(this.newProduct).then(items => {
      //Al resolverse la Promise actualizamos la propiedad items del componente
      //con el parámetro items que nos devuelve la Promise resuelta en el método 
      //addProduct del Servcio ListService 
      this.items = items
      //Blanquemaos los imputs
      this.newProduct.cantidad = 0;
      this.newProduct.productName = "";
    });
  }
  
}

//Declaramos el objeto de tipo Product para tipificar el Array de Items
export class Product {
  productName: string;
  cantidad: number;
}

Ejecución.

Por último nos queda ejecutar la aplicación simplemente para garantizar que no hemos roto nada, ya que de cara a la interfaz de usuario y el uso de la misma no hemos cambiad nada desde la parte 4.

Próximos pasos

Estén atentos a nuestra próxima entrega de la serie Angular 2 Tutorial en la que iremos agregando a nuestra Shopping List App más funcionalidades interesantes; así que no olvides suscribirte a nuestro newsletter para que no te pierdas de ninguna de nuestras próximas publicaciones.

Si te ha gustado este entrada compártela con tus amigos en las redes sociales, y así ayudaras a compartir el conocimiento y si tienes dudas, o inquietudes sobre algún tema no olvides comentar.

Happy Coding!

A %d blogueros les gusta esto: