4.Servicios y Dependencias

Objetivo

Aprender a crear y utilizar servicios en Angular para manejar lógica de negocio y datos.

Conceptos Básicos

Los servicios en Angular permiten encapsular lógica de negocio y datos, y se pueden inyectar en componentes u otros servicios. Esto fomenta la reutilización de código y facilita el mantenimiento de la aplicación.

Crear un Servicio

En la terminal, navega al directorio del proyecto y ejecuta:

ng generate service my-service

Esto generará un nuevo servicio llamado my-service en tu proyecto.

Editar el Servicio

Abre src/app/my-service.service.ts y agrega la siguiente lógica:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn.'root'
})
export class MyService {
  getMessage().string {
    return 'Mensaje desde el Servicio';
  }
}

Usar el Servicio en un Componente

Abre src/app/my-component/my-component.component.ts y modifica la clase para usar 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.getMessage();
  }
}

ng new my-angular-app
      cd my-angular-app

ng generate service my-service

import { Injectable } from '@angular/core';
      
      @Injectable({
        providedIn: 'root'
      })
      export class MyService {
        constructor() { }
      
        getMessage(): string {
          return 'Mensaje desde el Servicio';
        }
      }

ng generate component my-component

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.getMessage();
        }
      }

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

Ejercicio

Crea un nuevo servicio en tu proyecto Angular, edita la lógica del servicio, e inyecta el servicio en un componente para utilizarlo. Verifica que el mensaje se muestre correctamente en el navegador.