Saltar al contenido

Guía de servicios angulares

Guía de servicios angulares

En esta guía de Angular Services, le mostraré cómo crear un componente simple que obtenga una lista de productos de un servicio Angular y la muestre en nuestra plantilla. El componente estará dedicado a presentar datos al usuario. La tarea de obtener datos del servidor central debe delegarse a otra clase. Esta clase se llama «clase de servicio». Como permite que el servicio entregue datos a todos los componentes que los necesitan, esta guía es parte de Angular: The Ultimate Guide.

Que es un servicio en Angular

Un servicio es una pieza de código reutilizable con un propósito bien definido. Código que utilizará en muchos componentes de su aplicación.

Para que sirven los servicios en Angular

  • Para lograr una funcionalidad independiente de los componentes
  • Para compartir lógica o datos entre componentes
  • Para encapsular interacciones externas

¿Cuáles son los beneficios de usar servicios en Angular?

  • Los servicios son más fáciles de probar.
  • Los servicios son fácilmente reutilizables

Cómo crear un servicio en Angular

Un servicio en Angular es simplemente una función de JavaScript. Todo lo que tenemos que hacer es crear una clase y agregar métodos y propiedades. Luego podemos crear una instancia de esta clase en nuestro componente y llamar a sus métodos. Uno de los mejores usos de los servicios es la obtención de datos. Creamos un servicio simple, que obtiene datos y los pasa a nuestro componente.

Producto

Cree un nuevo archivo en la carpeta src / app y asígnele el nombre product.model.ts

export class Prodotto { 
 
    constructor(ID:number, nome: string, prezzo:number) {
        this.ID=ID;
        this.nome=nome;
        this.prezzo=prezzo;
    }
 
    ID:number ;
    nome: string ;
    prezzo:number;
 
}

La clase de producto será nuestro modelo.

ProductService

Estamos construyendo un servicio Angular, que devuelve una lista de productos.

Cree un nuevo archivo en la carpeta src / app y asígnele el nombre product.service.ts

import {Prodotto} from './Prodotto'
 
export class ProdottoService{
 
    public  getProdotti() {
 
        let prodotti:Prodotto[];
 
        prodotti=[
            new Prodotto(1,'Matita',1€),
            new Prodotto(2,'Gomma',1€),
            new Prodotto(3,'Penna',1€),
        ]
 
        return prodotti;               
    }
}

En primer lugar, importé el modelo de producto. Creé la clase ProdottoService y la exporté. Creé un método getProducts, que devuelve los productos. En este ejemplo, inserté los productos directamente en el código. En la vida real, enviaría una solicitud HTTP a la API de backend para obtener los datos.

Nuestro servicio ya está listo. Tenga en cuenta que la clase que acaba de definir es una función de JavaScript simple. No hay nada angular.

Llame al servicio de ProdottoService

El siguiente paso es llamar a ProductService desde el componente. Abra app.componet.ts y agregue el siguiente código.

import { Component } from '@angular/core';
 
import { ProdottoService } from './prodotto.service';
import { Prodotto } from './prodotto.model';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
 
export class AppComponent
{
 
   prodotti:Prodotto[];
   prodottoService;
 
   constructor(){
     this.prodottoService=new ProdottoService();
   }
 
   getProdotti() {
     
     this.prodotti=this.prodottoService.getProdotti();
   }
  
}

Primero, importé Product y ProdottoService. En el constructor de AppComponet, creé la instancia de ProdottoSerivce. El método getProducts llama al método getProducts de ProdottoService. Se guarda la lista de productos devueltos.

Modelo

El siguiente paso será mostrar los productos al usuario. Abra el archivo app.component.html y agregue el siguiente código.

Servizi in Angular

ID Nome Prezzo
{{prodotto.ID}} {{prodotto.nome}} {{prodotto.prezzo}}

Estoy usando bootstrap 3 para diseñar el modelo

Agregué un botón «Cargar productos», que está vinculado al método getProducts a través del enlace de eventos.

Veo los productos devueltos a través de la directiva ngFor.

Inyección de dependencia angular

En el ejemplo, creé una instancia de ProductService en el componente directamente como se muestra a continuación.

this.prodottoService=new ProdottoService();

La instancia de servicio directo, como se señaló anteriormente, tiene muchos inconvenientes:

  • ProductService está estrechamente relacionado con el componente. Si cambiamos la definición de la clase ProductService, necesitamos actualizar cada parte de la aplicación donde se usa el servicio
  • Si queremos cambiar ProdottoService con BestProductsService, tenemos que buscar donde se use ProdottoService y cambiarlo manualmente
  • Hace que las pruebas sean difíciles. Es posible que deba proporcionar mockProdottoService para probar y usar ProdottoService en producción.

Este problema se puede resolver mediante la inyección de dependencias. Puede aprender a usar la inyección de dependencia en Angular en la guía dedicada