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!
Componentes
Todo lo que aprenderás sobre componentes y servicios en Angular
¿Qué son los componentes?
Uso de Inputs
Uso de Outputs
Componente para producto
Ciclo de vida de componentes
ngDestroy & SetInput
Lista de productos
Componentes y Header
Implementando el sideMenu
Comunicación padre e hijo
Servicios
Conociendo los servicios
¿Qué es la inyección de dependencias?
Obteniendo datos de una API
Pipes y Directives
Conociendo los pipes
Construyendo tu propio pipe
Conociendo las directivas
Best practices
Reactividad básica
Guia de estilos de Angular y linters
Despedida
Despedida
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
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.
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:
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()
.
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
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:
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
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.
Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.