{"id":1963,"date":"2023-11-23T12:21:18","date_gmt":"2023-11-23T15:21:18","guid":{"rendered":"https:\/\/stackcodelab.com\/blog\/?p=1963"},"modified":"2023-11-23T12:21:20","modified_gmt":"2023-11-23T15:21:20","slug":"capitulo-3-gestion-de-datos-y-servicios","status":"publish","type":"post","link":"https:\/\/stackcodelab.com\/blog\/capitulo-3-gestion-de-datos-y-servicios\/","title":{"rendered":"Cap\u00edtulo 3: Gesti\u00f3n de Datos y Servicios"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><em>Introducci\u00f3n: <\/em>La gesti\u00f3n de datos y servicios es esencial en las aplicaciones Angular. En este cap\u00edtulo, exploraremos c\u00f3mo crear servicios, inyectar dependencias, obtener datos de una API externa y manejar observables para gestionar datos asincr\u00f3nicos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>3.1. Creaci\u00f3n de servicios<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u00bfQu\u00e9 son los servicios en Angular? <\/strong>Los servicios son una parte fundamental de la arquitectura de Angular. Son clases que se utilizan para encapsular la l\u00f3gica de la aplicaci\u00f3n y proporcionar funcionalidades compartidas entre componentes. Los servicios se utilizan com\u00fanmente para gestionar operaciones de red, interacci\u00f3n con APIs, almacenamiento en cach\u00e9 de datos y m\u00e1s.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Un servicio en Angular es una clase que se utiliza para realizar tareas comunes o compartir datos y funcionalidad entre componentes. Aqu\u00ed tienes un ejemplo simple de un servicio en Angular que proporciona un conjunto de funciones para administrar una lista de tareas:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>task.service.ts (Servicio de tareas):<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { Injectable } from '@angular\/core';\r\n\r\n@Injectable({\r\n  providedIn: 'root'\r\n})\r\nexport class TaskService {\r\n  private tasks: string&#91;] = &#91;];\r\n\r\n  addTask(task: string) {\r\n    this.tasks.push(task);\r\n  }\r\n\r\n  getTasks() {\r\n    return this.tasks;\r\n  }\r\n\r\n  removeTask(task: string) {\r\n    const index = this.tasks.indexOf(task);\r\n    if (index !== -1) {\r\n      this.tasks.splice(index, 1);\r\n    }\r\n  }\r\n}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">En este ejemplo:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>El servicio <code>TaskService <\/code>tiene tres m\u00e9todos: <code>addTask<\/code>, <code>getTasks <\/code>y <code>removeTask<\/code>. Estos m\u00e9todos permiten agregar una tarea a la lista, obtener la lista de tareas y eliminar una tarea espec\u00edfica.<\/li>\n\n\n\n<li>El servicio est\u00e1 decorado con <code>@Injectable <\/code>y se proporciona en el nivel ra\u00edz (<code>providedIn: 'root'<\/code>), lo que significa que Angular lo administrar\u00e1 autom\u00e1ticamente como un servicio singleton accesible en toda la aplicaci\u00f3n.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Luego, puedes inyectar este servicio en cualquier componente que lo necesite. Por ejemplo, si tienes un componente <code>TaskListComponent<\/code> que muestra y gestiona tareas, puedes inyectar el servicio de la siguiente manera:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>task-list.component.ts (Componente de lista de tareas):<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { Component } from '@angular\/core';\r\nimport { TaskService } from '.\/task.service';\r\n\r\n@Component({\r\n  selector: 'app-task-list',\r\n  templateUrl: '.\/task-list.component.html',\r\n})\r\nexport class TaskListComponent {\r\n  tasks: string&#91;] = &#91;];\r\n\r\n  constructor(private taskService: TaskService) {\r\n    this.tasks = taskService.getTasks();\r\n  }\r\n\r\n  addTask(newTask: string) {\r\n    this.taskService.addTask(newTask);\r\n  }\r\n\r\n  removeTask(task: string) {\r\n    this.taskService.removeTask(task);\r\n  }\r\n}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">En este ejemplo, el componente <code>TaskListComponent<\/code> utiliza el servicio <code>TaskService<\/code> para obtener y gestionar las tareas. Puedes seguir un patr\u00f3n similar para utilizar servicios en Angular y compartir datos o funcionalidad en toda la aplicaci\u00f3n.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Creaci\u00f3n de servicios personalizados <\/strong>Puedes crear tus propios servicios personalizados en Angular. Estos servicios se generan t\u00edpicamente con Angular CLI o se crean manualmente. Los servicios encapsulan la l\u00f3gica relacionada con un \u00e1rea espec\u00edfica de la aplicaci\u00f3n.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Aqu\u00ed tienes un ejemplo de c\u00f3mo crear un servicio personalizado en Angular. Supongamos que deseas crear un servicio llamado <code>UserService <\/code>que gestione la informaci\u00f3n de usuarios en tu aplicaci\u00f3n.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>user.service.ts (Servicio de usuarios):<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { Injectable } from '@angular\/core';\r\n\r\n@Injectable({\r\n  providedIn: 'root'\r\n})\r\nexport class UserService {\r\n  private users: string&#91;] = &#91;];\r\n\r\n  constructor() {\r\n    \/\/ Inicializamos el servicio con algunos usuarios de ejemplo\r\n    this.users = &#91;'Usuario 1', 'Usuario 2', 'Usuario 3'];\r\n  }\r\n\r\n  getUsers() {\r\n    return this.users;\r\n  }\r\n\r\n  addUser(user: string) {\r\n    this.users.push(user);\r\n  }\r\n\r\n  removeUser(user: string) {\r\n    const index = this.users.indexOf(user);\r\n    if (index !== -1) {\r\n      this.users.splice(index, 1);\r\n    }\r\n  }\r\n}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">En este ejemplo:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Creamos un servicio llamado <code>UserService<\/code> con tres m\u00e9todos: <code>getUsers<\/code>, <code>addUser <\/code>y <code>removeUser<\/code>. Estos m\u00e9todos permiten obtener la lista de usuarios, agregar un usuario y eliminar un usuario.<\/li>\n\n\n\n<li>El servicio est\u00e1 decorado con <code>@Injectable<\/code> y se proporciona en el nivel ra\u00edz (<code>providedIn: 'root'<\/code>), lo que significa que Angular lo administrar\u00e1 autom\u00e1ticamente como un servicio singleton accesible en toda la aplicaci\u00f3n.<\/li>\n\n\n\n<li>En el constructor del servicio, inicializamos la lista de usuarios con algunos usuarios de ejemplo.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Una vez que hayas creado este servicio, puedes inyectarlo en cualquier componente que lo necesite. Por ejemplo, si tienes un componente <code>UserListComponent <\/code>que muestra y gestiona la lista de usuarios, puedes inyectar el servicio de la siguiente manera:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>user-list.component.ts (Componente de lista de usuarios):<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { Component } from '@angular\/core';\nimport { UserService } from '.\/user.service';\n\n@Component({\n  selector: 'app-user-list',\n  templateUrl: '.\/user-list.component.html',\n})\nexport class UserListComponent {\n  users: string&#91;] = &#91;];\n\n  constructor(private userService: UserService) {\n    this.users = userService.getUsers();\n  }\n\n  addUser(newUser: string) {\n    this.userService.addUser(newUser);\n  }\n\n  removeUser(user: string) {\n    this.userService.removeUser(user);\n  }\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">En este ejemplo, el componente <code>UserListComponent <\/code>utiliza el servicio <code>UserService <\/code>para obtener y gestionar la lista de usuarios. Este es un patr\u00f3n com\u00fan para crear y utilizar servicios personalizados en Angular para administrar datos y funcionalidad en tu aplicaci\u00f3n.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Inyecci\u00f3n de dependencias <\/strong>En Angular, la inyecci\u00f3n de dependencias es el proceso de proporcionar instancias de servicios a componentes que los necesitan. Angular maneja la inyecci\u00f3n de dependencias de manera autom\u00e1tica y asegura que las instancias de servicios est\u00e9n disponibles cuando se solicitan.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">La inyecci\u00f3n de dependencias es un patr\u00f3n fundamental en Angular que se utiliza para proporcionar instancias de servicios u otras dependencias a los componentes. Aqu\u00ed tienes un ejemplo de inyecci\u00f3n de dependencias en Angular.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Supongamos que tenemos un servicio llamado <code>LoggerService<\/code> que se utiliza para registrar mensajes en la consola, y un componente llamado <code>UserService <\/code>que necesita utilizar este servicio para registrar eventos. Primero, creamos el servicio <code>LoggerService<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>logger.service.ts (Servicio de registro):<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { Injectable } from '@angular\/core';\r\n\r\n@Injectable({\r\n  providedIn: 'root'\r\n})\r\nexport class LoggerService {\r\n  log(message: string) {\r\n    console.log(message);\r\n  }\r\n}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Ahora, en el componente <code>UserService<\/code>, podemos inyectar el servicio <code>LoggerService <\/code>y utilizarlo para registrar eventos. Aseg\u00farate de que el servicio <code>LoggerService<\/code> est\u00e9 registrado en el m\u00f3dulo de la aplicaci\u00f3n o en el nivel ra\u00edz.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>user.service.ts (Componente de usuario que inyecta el servicio de registro):<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { Injectable } from '@angular\/core';\r\nimport { LoggerService } from '.\/logger.service';\r\n\r\n@Injectable({\r\n  providedIn: 'root'\r\n})\r\nexport class UserService {\r\n  constructor(private logger: LoggerService) {}\r\n\r\n  addUser(username: string) {\r\n    this.logger.log(`Usuario ${username} agregado.`);\r\n    \/\/ L\u00f3gica para agregar el usuario...\r\n  }\r\n}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">En este ejemplo:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>El servicio <code>LoggerService<\/code> se inyecta en el constructor del componente <code>UserService<\/code>. La inyecci\u00f3n de dependencias se realiza autom\u00e1ticamente por Angular.<\/li>\n\n\n\n<li>El componente <code>UserService <\/code>utiliza el servicio <code>LoggerService<\/code> para registrar eventos cuando se agrega un usuario.<\/li>\n\n\n\n<li>La inyecci\u00f3n de dependencias permite que el componente <code>UserService<\/code> obtenga una instancia del servicio `LoggerService sin necesidad de crearlo manualmente.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Este ejemplo demuestra c\u00f3mo se utiliza la inyecci\u00f3n de dependencias en Angular para proporcionar y utilizar servicios dentro de los componentes. Angular se encarga de la creaci\u00f3n de instancias y la gesti\u00f3n de dependencias, lo que hace que la aplicaci\u00f3n sea m\u00e1s modular y mantenible.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>3.2. Obtenci\u00f3n de datos de una API<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Consumir datos de una API externa en Angular <\/strong>Una parte com\u00fan de muchas aplicaciones es obtener datos de una API externa, como un servidor web o una base de datos. Angular proporciona las herramientas para realizar solicitudes HTTP y manejar las respuestas de una API.<\/li>\n\n\n\n<li><strong>Hacer solicitudes HTTP con HttpClient <\/strong>Angular proporciona el m\u00f3dulo <code>HttpClient<\/code> que simplifica la realizaci\u00f3n de solicitudes HTTP. Puedes utilizar este m\u00f3dulo para realizar solicitudes GET, POST, PUT, DELETE y m\u00e1s.<\/li>\n\n\n\n<li><strong>Manejo de respuestas de API <\/strong>Cuando obtienes datos de una API, es importante manejar las respuestas correctamente. Puedes suscribirte a observables para recibir datos y manejar errores o situaciones inesperadas.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Aqu\u00ed tienes un ejemplo de c\u00f3mo consumir datos de una API externa en Angular, realizar solicitudes HTTP con <code>HttpClient<\/code> y manejar las respuestas de la API. En este ejemplo, utilizaremos una API p\u00fablica de prueba llamada JSONPlaceholder para obtener una lista de publicaciones (posts).<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Configuraci\u00f3n del m\u00f3dulo y servicio:<\/strong><\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Primero, aseg\u00farate de importar el m\u00f3dulo <code>HttpClientModule <\/code>en tu aplicaci\u00f3n. Puedes hacerlo en el archivo de tu m\u00f3dulo principal (por lo general, <code>app.module.ts<\/code>).<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { HttpClientModule } from '@angular\/common\/http';\r\n\r\n@NgModule({\r\n  declarations: &#91;...],\r\n  imports: &#91;HttpClientModule],\r\n  bootstrap: &#91;...]\r\n})\r\nexport class AppModule { }\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Luego, crea un servicio para realizar las solicitudes HTTP. En este caso, llamaremos al servicio <code>PostService<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>post.service.ts (Servicio para consumir la API):<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { Injectable } from '@angular\/core';\r\nimport { HttpClient } from '@angular\/common\/http';\r\nimport { Observable } from 'rxjs';\r\n\r\n@Injectable({\r\n  providedIn: 'root'\r\n})\r\nexport class PostService {\r\n  private apiUrl = 'https:\/\/jsonplaceholder.typicode.com\/posts';\r\n\r\n  constructor(private http: HttpClient) {}\r\n\r\n  getPosts(): Observable&lt;any&#91;]> {\r\n    return this.http.get&lt;any&#91;]>(this.apiUrl);\r\n  }\r\n}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Consumir datos de la API en un componente:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ahora, puedes consumir los datos de la API en un componente. Por ejemplo, creemos un componente llamado <code>PostListComponent <\/code>para mostrar las publicaciones obtenidas de la API.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>post-list.component.ts (Componente para mostrar las publicaciones):<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { Component, OnInit } from '@angular\/core';\r\nimport { PostService } from '.\/post.service';\r\n\r\n@Component({\r\n  selector: 'app-post-list',\r\n  templateUrl: '.\/post-list.component.html',\r\n})\r\nexport class PostListComponent implements OnInit {\r\n  posts: any&#91;] = &#91;];\r\n\r\n  constructor(private postService: PostService) {}\r\n\r\n  ngOnInit() {\r\n    this.postService.getPosts().subscribe((data) => {\r\n      this.posts = data;\r\n    });\r\n  }\r\n}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Mostrar los datos en la plantilla:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Finalmente, muestra los datos obtenidos de la API en la plantilla del componente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>post-list.component.html (Plantilla para mostrar las publicaciones):<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h2>Listado de Publicaciones&lt;\/h2>\r\n&lt;ul>\r\n  &lt;li *ngFor=\"let post of posts\">\r\n    &lt;strong>{{ post.title }}&lt;\/strong>\r\n    &lt;p>{{ post.body }}&lt;\/p>\r\n  &lt;\/li>\r\n&lt;\/ul>\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">En este ejemplo:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>El servicio <code>PostService<\/code> realiza una solicitud HTTP GET para obtener datos de la API JSONPlaceholder.<\/li>\n\n\n\n<li>En el componente <code>PostListComponent<\/code>, se suscribe a la respuesta de la solicitud HTTP y almacena los datos en la propiedad <code>posts<\/code>.<\/li>\n\n\n\n<li>La plantilla HTML muestra las publicaciones utilizando la directiva <code>*ngFor <\/code>para iterar a trav\u00e9s de las publicaciones en la lista.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Este es un ejemplo b\u00e1sico de c\u00f3mo consumir datos de una API externa en Angular utilizando el servicio <code>HttpClient<\/code> y manejar las respuestas de la API en un componente. Ten en cuenta que debes importar <code>HttpClientModule <\/code>y proporcionar el servicio en el m\u00f3dulo de la aplicaci\u00f3n. Tambi\u00e9n es importante manejar errores y realizar tareas adicionales seg\u00fan tus necesidades en una aplicaci\u00f3n real.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>3.3. Manejo de observables<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u00bfQu\u00e9 son los observables en Angular? <\/strong>Los observables son una parte clave de la programaci\u00f3n reactiva en Angular. Representan secuencias de eventos o valores que se pueden observar a lo largo del tiempo. Los observables se utilizan ampliamente para manejar datos asincr\u00f3nicos, como respuestas de API o eventos de usuario.<\/li>\n\n\n\n<li><strong>Utilizaci\u00f3n de observables para datos asincr\u00f3nicos <\/strong>Aprender\u00e1s c\u00f3mo utilizar observables en Angular para manejar datos asincr\u00f3nicos. Puedes suscribirte a observables para recibir notificaciones cuando se emiten nuevos valores o eventos.<\/li>\n\n\n\n<li><strong>Manejo de errores y finalizaci\u00f3n de observables <\/strong>Tambi\u00e9n aprender\u00e1s a manejar errores que puedan ocurrir al realizar solicitudes HTTP o al trabajar con observables. Adem\u00e1s, ver\u00e1s c\u00f3mo completar y liberar recursos asociados con observables cuando ya no son necesarios.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Aqu\u00ed tienes un ejemplo de c\u00f3mo utilizar observables en Angular para manejar datos asincr\u00f3nicos y c\u00f3mo manejar errores y finalizaci\u00f3n de observables. En este ejemplo, utilizaremos observables para realizar una solicitud HTTP a una API y gestionar la respuesta.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Creaci\u00f3n de un servicio y solicitud HTTP:<\/strong><\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Primero, crearemos un servicio llamado <code>DataService <\/code>para realizar una solicitud HTTP a una API. Aseg\u00farate de importar <code>HttpClient <\/code>y <code>Observable<\/code> de <code>rxjs<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>data.service.ts (Servicio de datos):<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { Injectable } from '@angular\/core';\r\nimport { HttpClient } from '@angular\/common\/http';\r\nimport { Observable } from 'rxjs';\r\n\r\n@Injectable({\r\n  providedIn: 'root'\r\n})\r\nexport class DataService {\r\n  private apiUrl = 'https:\/\/jsonplaceholder.typicode.com\/posts';\r\n\r\n  constructor(private http: HttpClient) {}\r\n\r\n  fetchData(): Observable&lt;any&#91;]> {\r\n    return this.http.get&lt;any&#91;]>(this.apiUrl);\r\n  }\r\n}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Consumir el servicio en un componente:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A continuaci\u00f3n, crearemos un componente llamado <code>DataComponent<\/code> que consume el servicio <code>DataService<\/code> y maneja la respuesta asincr\u00f3nica.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>data.component.ts (Componente para consumir datos):<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { Component, OnInit } from '@angular\/core';\r\nimport { DataService } from '.\/data.service';\r\nimport { catchError } from 'rxjs\/operators';\r\nimport { of } from 'rxjs';\r\n\r\n@Component({\r\n  selector: 'app-data',\r\n  templateUrl: '.\/data.component.html',\r\n})\r\nexport class DataComponent implements OnInit {\r\n  data: any&#91;] = &#91;];\r\n  error: string = '';\r\n\r\n  constructor(private dataService: DataService) {}\r\n\r\n  ngOnInit() {\r\n    this.dataService\r\n      .fetchData()\r\n      .pipe(\r\n        catchError((error) => {\r\n          this.error = 'Error al cargar datos.';\r\n          return of(&#91;]);\r\n        })\r\n      )\r\n      .subscribe(\r\n        (response) => {\r\n          this.data = response;\r\n        },\r\n        (error) => {\r\n          this.error = 'Error en la solicitud HTTP.';\r\n        }\r\n      );\r\n  }\r\n}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Manejo de observables en la plantilla:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por \u00faltimo, mostraremos los datos obtenidos de la API y cualquier mensaje de error en la plantilla.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>data.component.html (Plantilla para mostrar datos y errores):<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h2>Datos Asincr\u00f3nicos&lt;\/h2>\r\n&lt;ul *ngIf=\"data.length > 0; else noData\">\r\n  &lt;li *ngFor=\"let item of data\">\r\n    {{ item.title }}\r\n  &lt;\/li>\r\n&lt;\/ul>\r\n&lt;ng-template #noData>\r\n  &lt;p>No hay datos disponibles.&lt;\/p>\r\n&lt;\/ng-template>\r\n&lt;div *ngIf=\"error\">{{ error }}&lt;\/div>\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">En este ejemplo:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>El servicio <code>DataService <\/code>realiza una solicitud HTTP y devuelve un observable que emite la respuesta de la API.<\/li>\n\n\n\n<li>En el componente <code>DataComponent<\/code>, utilizamos el m\u00e9todo <code>fetchData() <\/code>del servicio para obtener datos asincr\u00f3nicos.<\/li>\n\n\n\n<li>Utilizamos operadores de <code>rxjs <\/code>como <code>catchError <\/code>para manejar errores y <code>of<\/code> para emitir un valor predeterminado cuando se produce un error en la solicitud HTTP.<\/li>\n\n\n\n<li>En la plantilla HTML, mostramos los datos obtenidos si est\u00e1n disponibles y mostramos un mensaje de error en caso de que ocurra un error.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Este ejemplo demuestra c\u00f3mo utilizar observables en Angular para manejar datos asincr\u00f3nicos, manejar errores y finalizaci\u00f3n de observables al realizar solicitudes HTTP a una API externa. Ten en cuenta que puedes adaptar este patr\u00f3n para trabajar con otras fuentes de datos asincr\u00f3nicos en tu aplicaci\u00f3n.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>3.4. Ejemplos Pr\u00e1cticos:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Creaci\u00f3n de un servicio en Angular <\/strong>Te guiar\u00e9 a trav\u00e9s del proceso de creaci\u00f3n de un servicio personalizado en Angular que encapsula la l\u00f3gica para interactuar con una API externa. Ver\u00e1s c\u00f3mo generar un servicio con Angular CLI y c\u00f3mo agregar m\u00e9todos para realizar solicitudes HTTP.<\/li>\n\n\n\n<li><strong>Inyecci\u00f3n de dependencias de servicios en componentes <\/strong>Aprender\u00e1s a inyectar servicios en componentes utilizando la inyecci\u00f3n de dependencias de Angular. Esto permitir\u00e1 que los componentes accedan a las funcionalidades proporcionadas por el servicio.<\/li>\n\n\n\n<li><strong>Obtenci\u00f3n de datos de una API externa <\/strong>Ver\u00e1s c\u00f3mo utilizar HttpClient para hacer solicitudes HTTP a una API externa y c\u00f3mo manejar las respuestas. Esto incluye la suscripci\u00f3n a observables y el manejo de errores.<\/li>\n\n\n\n<li><strong>Manejo de datos asincr\u00f3nicos con observables <\/strong>Aprender\u00e1s a utilizar observables para manejar datos asincr\u00f3nicos y a manejar situaciones como la carga de datos en una aplicaci\u00f3n y la actualizaci\u00f3n de la vista en respuesta a eventos de datos.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Aqu\u00ed tienes un ejemplo de c\u00f3mo crear un servicio en Angular, realizar la inyecci\u00f3n de dependencias en componentes, obtener datos de una API externa y manejar los datos asincr\u00f3nicos con observables. En este ejemplo, utilizaremos un servicio llamado <code>PostService <\/code>para obtener una lista de publicaciones desde una API externa.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Creaci\u00f3n del servicio:<\/strong><\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Primero, crea el servicio <code>PostService<\/code> que se encargar\u00e1 de realizar la solicitud HTTP para obtener datos de la API externa.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>post.service.ts (Servicio para obtener publicaciones):<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { Injectable } from '@angular\/core';\r\nimport { HttpClient } from '@angular\/common\/http';\r\nimport { Observable } from 'rxjs';\r\n\r\n@Injectable({\r\n  providedIn: 'root'\r\n})\r\nexport class PostService {\r\n  private apiUrl = 'https:\/\/jsonplaceholder.typicode.com\/posts';\r\n\r\n  constructor(private http: HttpClient) {}\r\n\r\n  getPosts(): Observable&lt;any&#91;]> {\r\n    return this.http.get&lt;any&#91;]>(this.apiUrl);\r\n  }\r\n}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Inyecci\u00f3n del servicio en un componente:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ahora, crearemos un componente llamado <code>PostListComponent<\/code> que inyecta el servicio <code>PostService<\/code> para obtener y mostrar las publicaciones.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>post-list.component.ts (Componente para mostrar las publicaciones):<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { Component, OnInit } from '@angular\/core';\r\nimport { PostService } from '.\/post.service';\r\n\r\n@Component({\r\n  selector: 'app-post-list',\r\n  templateUrl: '.\/post-list.component.html',\r\n})\r\nexport class PostListComponent implements OnInit {\r\n  posts: any&#91;] = &#91;];\r\n\r\n  constructor(private postService: PostService) {}\r\n\r\n  ngOnInit() {\r\n    this.postService.getPosts().subscribe((data) => {\r\n      this.posts = data;\r\n    });\r\n  }\r\n}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Plantilla para mostrar los datos:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por \u00faltimo, en la plantilla del componente <code>PostListComponent<\/code>, mostraremos los datos obtenidos de la API.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>post-list.component.html (Plantilla para mostrar las publicaciones):<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h2>Listado de Publicaciones&lt;\/h2>\r\n&lt;ul>\r\n  &lt;li *ngFor=\"let post of posts\">\r\n    &lt;strong>{{ post.title }}&lt;\/strong>\r\n    &lt;p>{{ post.body }}&lt;\/p>\r\n  &lt;\/li>\r\n&lt;\/ul>\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">En este ejemplo:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>El servicio <code>PostService <\/code>realiza una solicitud HTTP para obtener las publicaciones desde la API externa y devuelve un observable que emite la respuesta.<\/li>\n\n\n\n<li>En el componente <code>PostListComponent<\/code>, se inyecta el servicio <code>PostService<\/code> y se suscribe al observable para obtener los datos de las publicaciones.<\/li>\n\n\n\n<li>La plantilla HTML muestra las publicaciones utilizando la directiva <code>*ngFor<\/code> para iterar a trav\u00e9s de las publicaciones en la lista.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Este ejemplo demuestra c\u00f3mo crear un servicio, realizar la inyecci\u00f3n de dependencias en un componente, obtener datos de una API externa y manejar datos asincr\u00f3nicos con observables en Angular. Ten en cuenta que debes importar <code>HttpClientModule<\/code> y proporcionar el servicio <code>PostService<\/code> en el m\u00f3dulo de la aplicaci\u00f3n para que funcione correctamente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Este cap\u00edtulo te proporcionar\u00e1 las habilidades necesarias para gestionar datos y servicios en aplicaciones Angular, incluyendo c\u00f3mo crear servicios personalizados, interactuar con APIs externas y manejar datos asincr\u00f3nicos utilizando observables. Los ejemplos pr\u00e1cticos te ayudar\u00e1n a aplicar estos conceptos en situaciones reales.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introducci\u00f3n: La gesti\u00f3n de datos y servicios es esencial en las aplicaciones Angular. En este cap\u00edtulo, exploraremos c\u00f3mo crear servicios, inyectar dependencias, obtener datos de una API externa y manejar observables para gestionar datos asincr\u00f3nicos. 3.1. Creaci\u00f3n de servicios Un servicio en Angular es una clase que se utiliza para realizar tareas comunes o compartir [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1964,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[38],"tags":[],"class_list":["post-1963","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-y-otras-hierbas"],"uagb_featured_image_src":{"full":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Gestion-de-Datos-y-Servicios.jpg",1280,717,false],"thumbnail":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Gestion-de-Datos-y-Servicios-150x150.jpg",150,150,true],"medium":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Gestion-de-Datos-y-Servicios-300x168.jpg",300,168,true],"medium_large":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Gestion-de-Datos-y-Servicios-768x430.jpg",768,430,true],"large":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Gestion-de-Datos-y-Servicios-1024x574.jpg",1024,574,true],"1536x1536":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Gestion-de-Datos-y-Servicios.jpg",1280,717,false],"2048x2048":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Gestion-de-Datos-y-Servicios.jpg",1280,717,false]},"uagb_author_info":{"display_name":"arquitecto","author_link":"https:\/\/stackcodelab.com\/blog\/author\/arquitecto\/"},"uagb_comment_info":0,"uagb_excerpt":"Introducci\u00f3n: La gesti\u00f3n de datos y servicios es esencial en las aplicaciones Angular. En este cap\u00edtulo, exploraremos c\u00f3mo crear servicios, inyectar dependencias, obtener datos de una API externa y manejar observables para gestionar datos asincr\u00f3nicos. 3.1. Creaci\u00f3n de servicios Un servicio en Angular es una clase que se utiliza para realizar tareas comunes o compartir&hellip;","_links":{"self":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts\/1963","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/comments?post=1963"}],"version-history":[{"count":1,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts\/1963\/revisions"}],"predecessor-version":[{"id":1965,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts\/1963\/revisions\/1965"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/media\/1964"}],"wp:attachment":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/media?parent=1963"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/categories?post=1963"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/tags?post=1963"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}