Creación de un Servicio Personalizado en Angular
Antes de generar un servicio, es necesario crear una carpeta para ello. Ejecute el siguiente comando:
Esto creará una carpeta services dentro de src/app y navegará inmediatamente dentro de ella, para que pueda comenzar a trabajar con sus servicios de inmediato.
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— archivo principal del servicio; -
task.service.spec.ts— archivo de pruebas (puede eliminarse).
A continuación se muestra 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 opción providedIn: 'root' significa que Angular registrará automáticamente el servicio en el módulo raíz y creará una única instancia 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.
Agregar lógica al servicio
Ahora pasemos a construir realmente la lógica para tu servicio. Esto es lo que se desea 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 completado. No has utilizado interfaces antes, pero agregar una aquí facilita la comprensión y el manejo del código.
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 tiene el ID correspondiente, actualizando así la lista.
Otro método importante es toggleTaskStatus(id: number). Este localiza 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 mantiene 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 retorna [...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
What does the initial content of the generated service file look like?
Can you explain how to use the service in a component?
Why should I return a copy of the task list instead of the original array?
Genial!
Completion tasa mejorada a 3.13Creación de un Servicio Personalizado en Angular
Desliza para mostrar el menú
Antes de generar un servicio, es necesario crear una carpeta para ello. Ejecute el siguiente comando:
Esto creará una carpeta services dentro de src/app y navegará inmediatamente dentro de ella, para que pueda comenzar a trabajar con sus servicios de inmediato.
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— archivo principal del servicio; -
task.service.spec.ts— archivo de pruebas (puede eliminarse).
A continuación se muestra 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 opción providedIn: 'root' significa que Angular registrará automáticamente el servicio en el módulo raíz y creará una única instancia 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.
Agregar lógica al servicio
Ahora pasemos a construir realmente la lógica para tu servicio. Esto es lo que se desea 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 completado. No has utilizado interfaces antes, pero agregar una aquí facilita la comprensión y el manejo del código.
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 tiene el ID correspondiente, actualizando así la lista.
Otro método importante es toggleTaskStatus(id: number). Este localiza 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 mantiene 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 retorna [...this.tasks] en lugar de solo this.tasks en getTasks()?
¡Gracias por tus comentarios!
