El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Inyección de Dependencias

Siguiente ►
►

La inyección de dependencias (DI) es un patrón de diseño fundamental en Angular que permite a los desarrolladores construir aplicaciones modulares y reutilizables. En este tema, exploraremos qué es la inyección de dependencias, cómo funciona en Angular y cómo se puede utilizar para mejorar la arquitectura de nuestras aplicaciones.

¿Qué es la Inyección de Dependencias?

La inyección de dependencias es un patrón de diseño que permite a un objeto recibir sus dependencias de una fuente externa en lugar de crearlas por sí mismo. Esto promueve la separación de preocupaciones y facilita la prueba y el mantenimiento del código.

Beneficios de la Inyección de Dependencias

  • Modularidad: Facilita la creación de componentes modulares y reutilizables.
  • Mantenibilidad: Hace que el código sea más fácil de mantener y actualizar.
  • Testabilidad: Permite la inyección de dependencias simuladas (mocks) para pruebas unitarias.

Inyección de Dependencias en Angular

En Angular, la inyección de dependencias se maneja a través de un sistema de inyectores que proporcionan instancias de servicios a los componentes y otros servicios que los necesitan.

Proveedores y Tokens

Un proveedor es una instrucción para el inyector sobre cómo obtener un valor para una dependencia. Los tokens son identificadores que el inyector utiliza para localizar los proveedores.

Configuración de un Servicio

Para demostrar cómo funciona la inyección de dependencias en Angular, crearemos un servicio simple y lo inyectaremos en un componente.

Paso 1: Crear un Servicio

Primero, creamos un servicio utilizando el Angular CLI:

ng generate service my-service

Esto generará un archivo my-service.service.ts con el siguiente contenido:

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

@Injectable({
  providedIn: 'root'
})
export class MyService {
  constructor() { }

  getMessage(): string {
    return 'Hello from MyService!';
  }
}

Paso 2: Inyectar el Servicio en un Componente

Ahora, inyectamos MyService en un componente. Supongamos que tenemos un componente llamado AppComponent.

import { Component, OnInit } from '@angular/core';
import { MyService } from './my-service.service';

@Component({
  selector: 'app-root',
  template: `<h1>{{ message }}</h1>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  message: string;

  constructor(private myService: MyService) {}

  ngOnInit(): void {
    this.message = this.myService.getMessage();
  }
}

En este ejemplo, MyService se inyecta en el constructor de AppComponent. Angular se encarga de crear una instancia de MyService y proporcionarla al componente.

Inyectores Jerárquicos

Angular utiliza un sistema de inyectores jerárquicos que permite definir proveedores a diferentes niveles de la aplicación. Esto permite un control granular sobre el alcance de los servicios.

Proveedor a Nivel de Componente

Podemos definir un proveedor a nivel de componente para limitar el alcance del servicio a ese componente y sus hijos.

@Component({
  selector: 'app-child',
  template: `<p>{{ message }}</p>`,
  providers: [MyService]
})
export class ChildComponent implements OnInit {
  message: string;

  constructor(private myService: MyService) {}

  ngOnInit(): void {
    this.message = this.myService.getMessage();
  }
}

En este caso, MyService será una instancia diferente en ChildComponent y no compartirá la misma instancia que otros componentes.

Ejercicio Práctico

Ejercicio 1: Crear e Inyectar un Servicio

  1. Crear un Servicio: Utiliza el Angular CLI para generar un nuevo servicio llamado GreetingService.
  2. Agregar un Método: En GreetingService, agrega un método getGreeting que devuelva un saludo.
  3. Inyectar el Servicio: Inyecta GreetingService en un componente y utiliza el método getGreeting para mostrar el saludo en la plantilla del componente.

Solución

  1. Crear el servicio:
ng generate service greeting
  1. Agregar el método getGreeting:
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class GreetingService {
  constructor() { }

  getGreeting(): string {
    return 'Hello, Angular!';
  }
}
  1. Inyectar el servicio en un componente:
import { Component, OnInit } from '@angular/core';
import { GreetingService } from './greeting.service';

@Component({
  selector: 'app-greeting',
  template: `<h1>{{ greeting }}</h1>`,
  styleUrls: ['./greeting.component.css']
})
export class GreetingComponent implements OnInit {
  greeting: string;

  constructor(private greetingService: GreetingService) {}

  ngOnInit(): void {
    this.greeting = this.greetingService.getGreeting();
  }
}

Retroalimentación y Consejos

  • Error Común: Olvidar agregar el decorador @Injectable al servicio. Sin este decorador, Angular no podrá inyectar el servicio.
  • Consejo: Utiliza el alcance de los proveedores sabiamente. Define servicios a nivel de componente solo cuando sea necesario para evitar instancias innecesarias.

Conclusión

La inyección de dependencias es una característica poderosa de Angular que facilita la creación de aplicaciones modulares, mantenibles y testables. Al comprender cómo funciona y cómo utilizarla correctamente, puedes mejorar significativamente la arquitectura de tus aplicaciones Angular. En el próximo tema, exploraremos los inyectores jerárquicos en mayor detalle y cómo pueden ser utilizados para gestionar el alcance de los servicios en una aplicación Angular.

◄ Anterior
◄
Siguiente ►
►

Curso de Angular

Módulo 1: Introducción a Angular

Módulo 2: Componentes de Angular

Módulo 3: Enlace de Datos y Directivas

Módulo 4: Servicios e Inyección de Dependencias

Módulo 5: Enrutamiento y Navegación

Módulo 6: Formularios en Angular

Módulo 7: Cliente HTTP y Observables

Módulo 8: Gestión de Estado

Módulo 9: Pruebas en Angular

Módulo 10: Conceptos Avanzados de Angular

Módulo 11: Despliegue y Mejores Prácticas

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados