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
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
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Creación y uso de servicios en Angular para lógica de negocio
12/20Recursos
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:
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
Como siempre revisar la documentación nos acerca a ser mas profesionales:
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 ‘Conociendo 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?
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
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?