Creación y uso de servicios en Angular para lógica de negocio

Curso de Angular: Componentes y Servicios

Contenido del curso

Componentes

Servicios

Pipes y Directives

Best practices

Despedida

20
Componentes y Servicios en Aplicaciones Web
01:09 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:45

Creación y uso de servicios en Angular para lógica de negocio

Curso de Angular: Componentes y Servicios

Clase 12 de 20

Clase 12 / 20

Recursos

Un servicio es la forma que utiliza Angular para modular una aplicación y crear código reutilizable, este tendrá una determinada lógica de negocio que puede ser usada por varios componentes u otros servicios.

Tu primer servicio

Con el CLI de Angular, crea un servicio fácilmente con el comando ng generate service test-name o en su manera corta ng g s test-name. Dicho comando creará dos archivos:

test-name.service.ts
test-name.service.spec.ts

Siendo el archivo .ts el servicio en sí y el archivo .spec.ts el que podrás usar para escribir pruebas unitarias para testear el servicio.

El servicio tendrá por defecto el siguiente código:

import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class TestNameService {
  constructor() { }
}

Haz visto anteriormente los decoradores en Angular. Así como los componentes usan el decorador @Component(), los servicios utilizan @Injectable().

Utilizando un servicio

Paso 1: Agrégale al servicio algo de lógica, por ejemplo, una variable con un determinado valor para ser leído a través de un método:

import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class TestNameService {
  private testName = 'Hola Platzi';

  constructor() { }
  
  getTestName(): string {
    return this.testName;
  }
}

Paso 2: Luego, importa en un componente el servicio de la siguiente manera:

// components/catalogo/catalogo.component.ts
import { TestNameService } from 'src/app/services/test-name.service';

@Component({
  selector: 'app-catalogo',
  templateUrl: './catalogo.component.html',
  styleUrls: ['./catalogo.component.scss']
})
export class CatalogoComponent implements OnInit {

  // ...
  
  constructor(
    private testNameService: TestNameService,
  ) { }
  
  ngOnInit(): void {
    const name = this.testNameService.getTestName();
    console.log(name);
  }
}

En el constructor del componente, se inyecta el servicio para poder ser utilizado posteriormente.

En este ejemplo, estamos llamando en el ngOnInit() el método getTestName() del servicio para obtener el valor de una variable e imprimirla por consola.

De esta manera, puedes tener tu lógica de negocio en un servicio e importar este en N componentes, o incluso en otros servicios y acceder a sus métodos y propiedades.

Contribución creada con los aportes de Kevin Fiorentino.

José Alberto Martínez Villegas

Hace 5 años

estoy siguiendo el curso, cuando se agrega un nuevo producto al array ustedes usas push() para hacerlo "this.myShoppingCart.push(product);" pero yo estaba usandolo de esta manera "this.myShoppingCart = [ ...this.myShoppingCart, product ];" antes de usar la inyeccion de dependencia funcionaba el contado perfectamente pero despues ya no, encontre que si se seguia usando mi opcion no fucionaria, en este caso funciona con push. por que pasa esto?

Daniel Meza

Hace 5 años

Está bien interesante este caso. Puede que con mi respuesta me equivoque, pero lo que creo que pasa es que:

Se está perdiendo la referencia del arreglo. Ya que lo que estás haciendo, es crear un nuevo arreglo, al hacerlo de la manera que lo haces (inmutabilidad)

Por lo que, tendrías que meter la línea que está dentro del constructor:

  constructor(
    private _storeService: StoreService
  ) {
    this.myShoppingCart = this._storeService.getShoppingCart;
   }

Dentro del método que se ejecuta cada que se agrega un producto al carrito. Diciendo. Se agregó un nuevo producto, pásame esa lista para que ahora sea la myShoppingCart del componente products. De esta manera tu contador seguirá funcionando.

  onAddToShoppingCart(product: Product) {
    this._storeService.addProduct(product);
    this.myShoppingCart = this._storeService.getShoppingCart;
    this.total = this._storeService.getTotal();
  }

Cuando en el storeestás usandola función push() o cualquier otra, para manipular el arreglo, estás mutando el mismo arreglo que pasaste como referencia cuando se ejecutó el constructor del componente products.

José Eras

Hace 4 años

Es porque estas creando otra referencia distinta a la original usando el spread operator ... (los 3 puntos) y como en el ejemplo está devolviendo la referencia original denrto del constructor de products.component, por eso al usar el spread operator al añadir producto ya no apunta mas a la referencia original, espero haberte ayudado.

Comentarios (24)24 comentarios

Matias Acosta

Eleazar Ramos Cortes

Edgardo Molina Gonzalez

Hermes Aguilar

Andrés Mauricio Montenegro

Luis Vera

Antonio Luis Fernandez Dromundo

Diego Jurado

Hace 3 años

Diego Frank Lipa Choque

David Castro

Diego Maldonado

Jimmy Buriticá Londoño

Carlos Santos Morales

Esneyder Saavedra Cardenas

Diego Fernando Caviedes Camaho

Jully Evangelina Flórez Fonseca

Francisco Jherson Huacho Inga

Jorge Daniel Rincón Luciano

Israel Elias Manjarrez Quimiz

Platzi Team

Rodrigo Abdón Quisbert Fernández

Adrian Robles

Jesus David Duarte

Isaías Salvador Gaona Bracamontes

Elber Liebermen

Jossie Quintero

Brandon Lee Aguero Fernandez

Javier Romero

Componentes

Desarrollo de Tienda Online con Angular Avanzado

Creación y Gestión de Componentes en Angular

Comunicación de Componentes: Envío de Datos con Inputs en Angular

Comunicación de Eventos entre Componentes en Angular

Creación y Reutilización de Componentes en Angular para Tiendas

Ciclo de Vida de Componentes en Angular: Constructor a OnDestroy

Manejo de eventos y limpieza en Angular con ngOnDestroy y setters

Componentes en Angular: Creación y Organización de Productos

Estilos en Angular: Alcance y Maquetación de Componentes

Despliegue Dinámico de Menú Lateral en Angular

Comunicación Padre-Hijo con Inputs y Outputs en Angular

Servicios

Creación y uso de servicios en Angular para lógica de negocio

Inyección de Dependencias en Angular: Conceptos y Funcionamiento

Conexión a APIs usando HTTP Client Module en Angular

Pipes y Directives

Uso de Pipes en Angular: Transformación y Formatos

Creación de Pipes Personalizados en Angular

Creación y Uso de Directivas en Angular para Manipular el DOM

Best practices

Reactividad y Manejo de Estado en Angular con NGRX

Implementación de Linter en Angular para Buenas Prácticas de Código

Despedida

Componentes y Servicios en Aplicaciones Web

Creación y uso de servicios en Angular para lógica de negocio

Progreso del curso

Componentes

Servicios

Pipes y Directives

Best practices

Despedida

Recursos

Recursos