Servicios e Injectable
Cree servicios inyectables para la lógica compartida.
Servicios e Injectable es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.
Servicios e Injectable
Un servicio es una clase que contiene lógica o estado reutilizable, como la obtención de datos o un almacén compartido. Angular crea y comparte servicios mediante la inyección de dependencias.
Por qué usar servicios
Los componentes deben centrarse en la vista. Traslade la lógica de negocio, las llamadas a API y el estado compartido a servicios para poder reutilizarlos y probarlos de forma independiente.
El decorador Injectable
Marque una clase de servicio con @Injectable para que Angular pueda crearla e inyectarla donde sea necesario.
import { Injectable } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class DataService {}providedIn root
providedIn: 'root' registra el servicio en el inyector raíz de la aplicación. Angular crea una única instancia compartida (un singleton) para toda la aplicación.
Proveedores eliminables mediante tree-shaking
Como el proveedor se declara en la clase mediante providedIn, los servicios que no se usan pueden eliminarse automáticamente del bundle mediante tree-shaking.
Un servicio con estado
Los servicios suelen contener estado. Con signals, exponga el estado reactivo desde el servicio.
import { Injectable, signal } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class CounterStore {
count = signal(0);
increment() { this.count.update(v => v + 1); }
}Un servicio con métodos
Añada métodos que los componentes puedan llamar para realizar acciones u obtener datos.
@Injectable({ providedIn: 'root' })
export class GreetingService {
greet(name: string): string {
return 'Hello, ' + name;
}
}Generar un servicio
La CLI crea la estructura de un servicio con el decorador Injectable ya añadido.
ng g service dataLos singletons comparten el estado
Como un servicio raíz es un singleton, todos los componentes que lo inyectan ven la misma instancia y el mismo estado. Así es como los componentes comparten datos.
Los servicios pueden inyectar servicios
Un servicio puede depender de otros servicios. Por ejemplo, un servicio de datos puede usar el servicio HttpClient para realizar solicitudes.
Mantenga los servicios centrados
Asigne a cada servicio una única responsabilidad clara. Los servicios pequeños y centrados son más fáciles de probar y reutilizar que los grandes que hacen muchas cosas.
Comprobación rápida: Injectable
Registrar un servicio singleton.
Resumen: servicios
Ha aprendido que los servicios contienen lógica y estado reutilizables, se marcan con @Injectable y usan providedIn: root para registrar un singleton para toda la aplicación. Los servicios comparten estado entre componentes y pueden depender de otros servicios. Siguiente: la función inject.
Preguntas frecuentes
¿La lección «Servicios e Injectable» es gratis?
Sí — el texto completo de «Servicios e Injectable» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Servicios e Injectable»?
Cree servicios inyectables para la lógica compartida. Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Angular Academy?
No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Servicios e Injectable»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Angular Academy?
Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Servicios e Injectable
- La función inject
- Proveedores y ámbitos
- Tokens de inyección