Creación de un Servicio Personalizado en Angular
Creación de un Servicio
Angular proporciona un comando CLI conveniente para generar rápidamente un servicio, que configura los archivos e importaciones necesarios:
Después de ejecutar este comando, Angular crea dos archivos:
-
task.service.ts— el archivo real del servicio; -
task.service.spec.ts— un archivo de pruebas (puede eliminarse).
Este es el contenido inicial de task.service.ts:
task-service.ts
El decorador @Injectable indica a Angular que este servicio puede ser inyectado en otras clases.
La parte providedIn: 'root' significa que Angular registrará automáticamente el servicio en el módulo raíz y creará una única instancia de este para toda la aplicación.
Singleton es un patrón de diseño que garantiza que una clase tenga solo una instancia y proporciona un punto de acceso global a la misma.
El Componente A, el Componente B o cualquier otro componente — todos ellos obtendrán la misma instancia del servicio. Esto es muy conveniente porque se pueden almacenar datos compartidos (como una lista de tareas) y evitar duplicar la lógica.
Por eso, un servicio se convierte en la única fuente de verdad para una parte específica de la lógica o los datos de tu aplicación. Si tienes curiosidad, puedes aprender más sobre el patrón singleton en este artículo.
Añadiendo lógica al servicio
Pasemos a construir la lógica para tu servicio. Esto es lo que deseas que haga:
-
Almacenar una lista de tareas;
-
Devolver la lista de tareas;
-
Eliminar tareas;
-
Alternar el estado de finalización de las tareas.
Primero, definamos cómo es una tarea creando una interfaz de TypeScript:
task-interface.ts
Esta interfaz ayuda a definir claramente la estructura de una tarea: incluye un id, un título y un estado de finalización. No has utilizado interfaces antes, pero agregar una aquí hace que el código sea más fácil de entender y trabajar.
Ahora construyamos el servicio que gestiona tu lista de tareas:
task-service.ts
En este ejemplo, los datos de las tareas se almacenan directamente en el código dentro de un arreglo privado tasks.
Para permitir que otras partes de la aplicación accedan a la lista de tareas, se utiliza el método getTasks(). Este devuelve una copia del arreglo usando la sintaxis de propagación ([...]), lo que ayuda a proteger los datos originales de cambios accidentales.
El método deleteTask(id: number) elimina una tarea filtrando aquella que coincide con el ID proporcionado, actualizando así la lista.
Otro método importante es toggleTaskStatus(id: number). Este busca la tarea por su ID y alterna su estado de finalización: si la tarea estaba marcada como completada (true), pasa a estar incompleta (false), y viceversa.
Es posible que reconozcas gran parte de esta lógica de tu TaskListComponent. Ahora, todo se ha trasladado a TaskService, lo que ayuda a simplificar tus componentes y mantener la lógica centralizada.
Este servicio es ahora la base que permite que tus componentes interactúen con la lista de tareas, sin duplicar la lógica.
1. ¿Por qué se crea un servicio en Angular?
2. ¿Qué significa providedIn: 'root' en el decorador @Injectable?
3. ¿Por qué se devuelve [...this.tasks] en lugar de solo this.tasks en getTasks()?
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Awesome!
Completion rate improved to 3.13Creación de un Servicio Personalizado en Angular
Desliza para mostrar el menú
Creación de un Servicio
Angular proporciona un comando CLI conveniente para generar rápidamente un servicio, que configura los archivos e importaciones necesarios:
Después de ejecutar este comando, Angular crea dos archivos:
-
task.service.ts— el archivo real del servicio; -
task.service.spec.ts— un archivo de pruebas (puede eliminarse).
Este es el contenido inicial de task.service.ts:
task-service.ts
El decorador @Injectable indica a Angular que este servicio puede ser inyectado en otras clases.
La parte providedIn: 'root' significa que Angular registrará automáticamente el servicio en el módulo raíz y creará una única instancia de este para toda la aplicación.
Singleton es un patrón de diseño que garantiza que una clase tenga solo una instancia y proporciona un punto de acceso global a la misma.
El Componente A, el Componente B o cualquier otro componente — todos ellos obtendrán la misma instancia del servicio. Esto es muy conveniente porque se pueden almacenar datos compartidos (como una lista de tareas) y evitar duplicar la lógica.
Por eso, un servicio se convierte en la única fuente de verdad para una parte específica de la lógica o los datos de tu aplicación. Si tienes curiosidad, puedes aprender más sobre el patrón singleton en este artículo.
Añadiendo lógica al servicio
Pasemos a construir la lógica para tu servicio. Esto es lo que deseas que haga:
-
Almacenar una lista de tareas;
-
Devolver la lista de tareas;
-
Eliminar tareas;
-
Alternar el estado de finalización de las tareas.
Primero, definamos cómo es una tarea creando una interfaz de TypeScript:
task-interface.ts
Esta interfaz ayuda a definir claramente la estructura de una tarea: incluye un id, un título y un estado de finalización. No has utilizado interfaces antes, pero agregar una aquí hace que el código sea más fácil de entender y trabajar.
Ahora construyamos el servicio que gestiona tu lista de tareas:
task-service.ts
En este ejemplo, los datos de las tareas se almacenan directamente en el código dentro de un arreglo privado tasks.
Para permitir que otras partes de la aplicación accedan a la lista de tareas, se utiliza el método getTasks(). Este devuelve una copia del arreglo usando la sintaxis de propagación ([...]), lo que ayuda a proteger los datos originales de cambios accidentales.
El método deleteTask(id: number) elimina una tarea filtrando aquella que coincide con el ID proporcionado, actualizando así la lista.
Otro método importante es toggleTaskStatus(id: number). Este busca la tarea por su ID y alterna su estado de finalización: si la tarea estaba marcada como completada (true), pasa a estar incompleta (false), y viceversa.
Es posible que reconozcas gran parte de esta lógica de tu TaskListComponent. Ahora, todo se ha trasladado a TaskService, lo que ayuda a simplificar tus componentes y mantener la lógica centralizada.
Este servicio es ahora la base que permite que tus componentes interactúen con la lista de tareas, sin duplicar la lógica.
1. ¿Por qué se crea un servicio en Angular?
2. ¿Qué significa providedIn: 'root' en el decorador @Injectable?
3. ¿Por qué se devuelve [...this.tasks] en lugar de solo this.tasks en getTasks()?
¡Gracias por tus comentarios!
