No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Compra acceso a todo Platzi por 1 a帽o

Antes: $249

Currency
$209/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

16D
4H
12M
21S

Conociendo los servicios

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.

Aportes 21

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Hola! Espero que est茅s disfrutando el curso!

En este repositorio podr谩s encontrar mis apuntes generales sobre todos lo cursos de Angular que vaya haciendo. Espero que te sea 煤til!

Siempre quise aprender que era la inyecci贸n de dependencias. Los patrones son una cosa muy interesante.

recomiendo encarecidamente ver este video para entender mejor como trabaja angular con la inyeccion de dependencias

https://www.youtube.com/watch?v=MVR4VmbiEzo

Como siempre revisar la documentaci贸n nos acerca a ser mas profesionales:

https://docs.angular.lat/tutorial/toh-pt4

apuntes:

g=generar
c=componente
s=servicio

ng g c componente //-> generar componente
ng g s servicio //-> generar servicios

M谩s claro no canta un gallo, despu茅s de haber visto y asimilado lo m谩s posible de todo el curso despu茅s de verlo como en 3 o 4 veces, ahora en la quinta voy clarificando y entendiendo mejor.
Creo que me faltan otras 7 repasadas., ja ja.

Servicios

Los servicios es el lugar en donde se define la l贸gica del negocio de la aplicaci贸n, con el objetivo que se reutilizable e independiente de los componentes.

Ahora que empiezo a trabajar como developer jr, estuve usando inyecci贸n de dependencias sin siquiera saberlo, ahora que hago este curso porque tengo que desarrollar un proyecto en Angular para el trabajo me queda mucho mas claro

En la documentacion encontre lo siguiente
Llamarlo en ngOnInit()
Si bien podr铆a llamar a getHeroes() en el constructor, esa no es la mejor pr谩ctica.

Reserve el constructor para una inicializaci贸n simple, como conectar los par谩metros del constructor a las propiedades. El constructor no debe hacer nada. Ciertamente no deber铆a llamar a una funci贸n que realiza solicitudes HTTP a un servidor remoto como lo har铆a un servicio de datos real.

Excelente curso queda claro la inyecci贸n de dependencias.

Muy interesante la clase, conocer y saber que desde servicios puedo dejar la logica en una carpeta diferente sin afectar el resultado esperado. 馃榿

Servicios en Angular


En Angular, los servicios son una forma de compartir datos y l贸gica entre componentes. Se pueden utilizar para compartir datos con el servidor, realizar c谩lculos y operaciones complejas, y mucho m谩s.

Para generar un servicio en Angular, se puede utilizar el siguiente comando en la terminal:

ng generate service nombre-del-servicio
ng g s nombre-del-servicio

Esto generar谩 un archivo .ts que contendr谩 la clase del servicio, con un decorador @Injectable()
que permite la inyecci贸n de dependencias.

Para utilizar el servicio en un componente, se debe instanciar en el constructor del componente:

constructor(private nombreDelServicio: NombreDelServicio) { }

Luego, se puede llamar a cualquier m茅todo o propiedad del servicio en el componente utilizando el nombre del servicio y el m茅todo o propiedad correspondiente, por ejemplo:

this.nombreDelServicio.metodoDelServicio();

No me agrada la rapidez con que intenta explicar, la verdad me marea bastante y me hace perder concentraci贸n, deber铆a ser mas pausado la forma como va explicando para que nosotros los aprendices entendamos mejor, el mensaje o conocimiento que intentamos aprender se pierde, parece que estuviese apurado en terminar el video. No me agrado la verdad.

En serio ten铆a muchas ganas de llegar a esta parte del Curso, me encant贸 esta clase de 鈥楥onociendo los servicios鈥.

hay una mosca en el video

Agregue un contador en el nav, pero solo se muetra el valor inicial. Como hago para que se actualize? ![](https://static.platzi.com/media/user_upload/image-0f4fdbe0-c027-4b0d-b9af-6b15e1dc1229.jpg)

Creo que si storeService va a ser inicializado desde el constructor y nunca va a ser modificado (supongo que esa es la gracia de que sea un servicio) deber铆a ser un readonly mas que un private verdad?

La versi贸n actual de angular CLI ya no es compatible con la versi贸n de node.js deber铆a actualizar el repositorio como m铆nimo a una versi贸n que se pueda utilizar.

Luego de pasar la l贸gica del componente al servicio, cada vez que presiono el boton add to cart el programa se queda medio colgado, es decir, se tarda en agregar el producto a la lista myShoppingCart, por qu茅 ser谩?

Hacer uso de las Angular Dev Tools hace que todo esto se entienda mucho mejor 馃槃

Me confunde un poco que cambie la arquitectura tantas veces