No tienes acceso a esta clase

¬°Contin√ļa aprendiendo! √önete y comienza a potenciar tu carrera

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 10

Preguntas 3

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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.

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

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

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.

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

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

hay una mosca en el video

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.

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

apuntes:

g=generar
c=componente
s=servicio

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

Excelente curso queda claro la inyección de dependencias.