Proveedores y ámbitos
Controle dónde viven los servicios en el árbol.
Proveedores y ámbitos es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 3 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.
Proveedores y ámbitos
Un proveedor indica a Angular cómo crear una dependencia. El ámbito en el que la registra determina cuántas instancias existen y quién las comparte.
Ámbito raíz
providedIn: root registra un servicio en el inyector raíz: un singleton compartido por toda la aplicación. Es la opción más habitual.
@Injectable({ providedIn: 'root' })
export class AppStore {}Proveedores de componentes
Puede limitar el ámbito de un servicio a un componente incluyéndolo en el array providers del componente. Cada instancia de ese componente obtiene su propia instancia del servicio.
import { Component } from '@angular/core';
import { LocalStore } from './local-store';
@Component({
selector: 'app-panel',
providers: [LocalStore],
template: ''
})
export class PanelComponent {}Por qué usar el ámbito del componente
Use proveedores con ámbito de componente cuando cada instancia del componente necesite su propio estado aislado, como el estado de un formulario o un almacén independiente para cada widget.
Raíz frente a componente
Raíz: una instancia compartida en todas partes. Componente: una instancia por cada instancia del componente (y sus elementos secundarios). Elija según si el estado debe compartirse o aislarse.
La jerarquía de inyectores
Los inyectores de Angular forman un árbol. Al resolver una dependencia, Angular busca en el inyector del componente, luego sube por los elementos principales y finalmente llega a la raíz.
Los componentes secundarios heredan
Un servicio proporcionado en un componente también está disponible para los elementos secundarios de ese componente, a menos que uno de ellos proporcione su propia instancia, que oculta la del elemento principal.
Proveedores a nivel de aplicación
También puede registrar proveedores durante el arranque en el array providers de bootstrapApplication, de forma similar al ámbito raíz, normalmente mediante funciones provide*.
// bootstrapApplication(AppComponent, {
// providers: [provideHttpClient()]
// });useClass y useValue
Los proveedores pueden asociar un token con una clase mediante useClass, con un valor fijo mediante useValue o con una fábrica mediante useFactory, lo que permite realizar sustituciones y configurar la aplicación.
// providers: [{ provide: Logger, useClass: ConsoleLogger }]Cambiar implementaciones
Como un proveedor asocia un token con una implementación, puede cambiar las implementaciones (por ejemplo, usar un mock en las pruebas) sin modificar los consumidores.
Elegir un ámbito
Use root de forma predeterminada para los singletons compartidos. Recurra a los proveedores de componentes solo cuando necesite un estado aislado para cada instancia.
Comprobación rápida: ámbitos
Estado por instancia.
Resumen: proveedores y ámbitos
Ha aprendido que los proveedores describen cómo crear dependencias y que el ámbito controla la creación de instancias: root para singletons de toda la aplicación y proveedores de componentes para el aislamiento por instancia. Angular resuelve las dependencias mediante una jerarquía de inyectores, y useClass/useValue/useFactory permiten cambiar las implementaciones. Siguiente: tokens de inyección.
Preguntas frecuentes
¿La lección «Proveedores y ámbitos» es gratis?
Sí — el texto completo de «Proveedores y ámbitos» 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 «Proveedores y ámbitos»?
Controle dónde viven los servicios en el árbol. 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 3 de 4.
¿Cuánto tiempo toma la lección «Proveedores y ámbitos»?
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