En Angular, un servicio es una clase que se utiliza para compartir datos, lógica y funcionalidades entre diferentes componentes de la aplicación. Los servicios permiten que el código sea más modular, reutilizable y fácil de mantener. Los servicios se pueden inyectar en componentes y otros servicios utilizando el sistema de inyección de dependencias de Angular.

• Reutilización de Código: Los servicios permiten encapsular la lógica de negocio y compartirla entre múltiples componentes.
• Separación de Responsabilidades: Ayudan a mantener los componentes enfocados en la presentación y delegan la lógica de negocio a los servicios.
• Inyección de Dependencias: Angular proporciona un mecanismo robusto para inyectar servicios en componentes y otros servicios.

Para crear un servicio en Angular, se utiliza el decorador @Injectable(). Este decorador indica que la clase puede ser inyectada como una dependencia.

1. Generar el Servicio: Utiliza Angular CLI para generar un servicio.

   ng generate service my-service
   

   Esto creará dos archivos: my-service.service.ts y my-service.service.spec.ts.

2. Definir el Servicio: Abre el archivo my-service.service.ts y define la lógica del servicio.

   import { Injectable } from '@angular/core';
   
   @Injectable({
     providedIn: 'root',
   })
   export class MyService {
     constructor() { }
   
     getData(): string {
       return 'Hello from MyService!';
     }
   }
   

3. Inyectar el Servicio en un Componente: Abre un componente y modifica su constructor para inyectar el servicio.

   import { Component, OnInit } from '@angular/core';
   import { MyService } from './my-service.service';
   
   @Component({
     selector: 'app-my-component',
     templateUrl: './my-component.component.html',
     styleUrls: ['./my-component.component.css']
   })
   export class MyComponent implements OnInit {
     message: string;
   
     constructor(private myService: MyService) { }
   
     ngOnInit(): void {
       this.message = this.myService.getData();
     }
   }
   

4. Mostrar los Datos en la Plantilla: Modifica la plantilla del componente para mostrar los datos proporcionados por el servicio.

   <p>{{ message }}</p>
   

1. Generar el Servicio: Utiliza Angular CLI para generar un servicio llamado auth.

   ng generate service auth
   

2. Definir el Servicio: Implementa métodos para iniciar sesión, cerrar sesión y verificar si el usuario está autenticado.

   import { Injectable } from '@angular/core';
   
   @Injectable({
     providedIn: 'root',
   })
   export class AuthService {
     private isAuthenticated: boolean = false;
   
     constructor() {}
   
     login(): void {
       this.isAuthenticated = true;
     }
   
     logout(): void {
       this.isAuthenticated = false;
     }
   
     checkAuth(): boolean {
       return this.isAuthenticated;
     }
   }
   

3. Inyectar el Servicio en un Componente: Crea un componente que utilice el servicio de autenticación.

   import { Component } from '@angular/core';
   import { AuthService } from './auth.service';
   
   @Component({
     selector: 'app-auth',
     templateUrl: './auth.component.html',
     styleUrls: ['./auth.component.css']
   })
   export class AuthComponent {
     constructor(public authService: AuthService) { }
   
     login(): void {
       this.authService.login();
     }
   
     logout(): void {
       this.authService.logout();
     }
   }
   

4. Modificar la Plantilla del Componente: Añade botones para iniciar y cerrar sesión, y muestra el estado de autenticación.

   <button (click)="login()">Login</button>
   <button (click)="logout()">Logout</button>
   <p *ngIf="authService.checkAuth()">User is authenticated</p>
   <p *ngIf="!authService.checkAuth()">User is not authenticated</p>
   

La solución del ejercicio se encuentra en los pasos anteriores. Asegúrate de seguir cada paso y verificar que el servicio de autenticación funcione correctamente.

En esta lección, hemos aprendido qué son los servicios en Angular, cómo crearlos y cómo inyectarlos en componentes. Los servicios son una herramienta poderosa para compartir datos y lógica entre diferentes partes de la aplicación, promoviendo la reutilización de código y la separación de responsabilidades. En la próxima lección, profundizaremos en la creación y uso de servicios, así como en la inyección de dependencias.