Skip to main content Início Criadores comeonoliver skillshub angular-di
angular-di Implement dependency injection in Angular v20+ using inject(), injection tokens, and provider configuration. Use for service architecture, providing dependencies at different levels, creating injectable tokens, and managing singleton vs scoped services. Triggers on service creation, configuring providers, using injection tokens, or understanding DI hierarchy.
Ir para a instalação Skills Marketplace Descubra e explore skills de IA criadas pela comunidade.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Mostrar detalhes do prompt Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
npx skills add https://github.com/ComeOnOliver/skillshub --skill angular-diO comando permanece em uma só linha. Role horizontalmente para revisá-lo antes de copiar.
Prefere uma cópia local? Baixe os arquivos disponíveis atualmente no SkillsMP.
Baixar Zip Baixando... Ocupações relacionadas SOC
Baseado na classificação ocupacional SOC
name angular-di description Implement dependency injection in Angular v20+ using inject(), injection tokens, and provider configuration. Use for service architecture, providing dependencies at different levels, creating injectable tokens, and managing singleton vs scoped services. Triggers on service creation, configuring providers, using injection tokens, or understanding DI hierarchy.
Angular Dependency Injection
Configure and use dependency injection in Angular v20+ with inject() and providers.
Basic Injection
Using inject()
Prefer inject() over constructor injection:
import { Component , inject } from '@angular/core' ;
import { HttpClient } from '@angular/common/http' ;
import { User } from './user.service' ;
@Component ({
selector : 'app-user-list' ,
template : `...` ,
})
export class UserList {
private http = inject (HttpClient );
private userService = inject
User
this
userService
getUsers
Injectable Services import { Injectable , inject, signal } from '@angular/core' ;
import { HttpClient } from '@angular/common/http' ;
@Injectable ({
providedIn : 'root' ,
})
export class User {
private http = inject (HttpClient );
private users = signal<User []>([]);
readonly users$ = this .users .asReadonly ();
async loadUsers (const users = await firstValueFrom (
this .http .get <User []>('/api/users' )
);
this .users .set (users);
}
}
Provider Scopes
Root Level (Singleton)
@Injectable ({
providedIn : 'root' ,
})
export class Auth {}
export const appConfig : ApplicationConfig = {
providers : [
Auth ,
],
};
Component Level (Instance per Component) @Component ({
selector : 'app-editor' ,
providers : [EditorState ],
template : `...` ,
})
export class Editor {
private editorState = inject (EditorState );
}
Route Level export const routes : Routes = [
{
path : 'admin' ,
providers : [Admin ],
children : [
{ path : '' , component : AdminDashboard },
{ path : 'users' , component : AdminUsers },
],
},
];
Injection Tokens
Creating Tokens import { InjectionToken } from '@angular/core' ;
export const API_URL = new InjectionToken <string >('API_URL' );
export interface AppConfig {
apiUrl : string ;
features : {
darkMode : boolean ;
analytics : boolean ;
};
}
export const APP_CONFIG = new InjectionToken <AppConfig >('APP_CONFIG' );
export const WINDOW = new InjectionToken <Window >('Window' , {
providedIn : 'root' ,
factory : () => window ,
});
export const LOCAL_STORAGE = new InjectionToken <Storage >('LocalStorage' , {
providedIn : 'root' ,
factory : () => localStorage ,
});
Providing Token Values
export const appConfig : ApplicationConfig = {
providers : [
{ provide : API_URL , useValue : 'https://api.example.com' },
{
provide : APP_CONFIG ,
useValue : {
apiUrl : 'https://api.example.com' ,
features : { darkMode : true , analytics : true },
},
},
],
};
Injecting Tokens @Injectable ({ providedIn : 'root' })
export class Api {
private apiUrl = inject (API_URL );
private config = inject (APP_CONFIG );
private window = inject (WINDOW );
getBaseUrl (): string {
return this .apiUrl ;
}
}
Provider Types
useClass
{ provide : Logger , useClass : ConsoleLogger }
{
provide : Logger ,
useClass : environment.production
? ProductionLogger
: ConsoleLogger ,
}
useValue
{ provide : API_URL , useValue : 'https://api.example.com' }
{ provide : APP_CONFIG , useValue : { theme : 'dark' , language : 'en' } }
useFactory
{
provide : User ,
useFactory : (http : HttpClient , config : AppConfig {
return new User (http, config.apiUrl );
},
deps : [HttpClient , APP_CONFIG ],
}
{
provide : CONFIG ,
useFactory : () => fetch ('/config.json' ).then (r =>json ()),
}
useExisting
{ provide : AbstractLogger , useExisting : ConsoleLogger }
providers : [
ConsoleLogger ,
{ provide : Logger , useExisting : ConsoleLogger },
{ provide : ErrorLogger , useExisting : ConsoleLogger },
]
Injection Options
Optional Injection @Component ({...})
export class My {
private analytics = inject (Analytics , { optional : true });
trackEvent (name : string this .analytics ?.track (name);
}
}
Self, SkipSelf, Host @Component ({
providers : [Local ],
})
export class Parent {
private local = inject (Local , { self : true });
}
@Component ({...})
export class Child {
private parentService = inject (ParentSvc , { skipSelf : true });
private hostService = inject (Host , { host : true });
}
Multi Providers Collect multiple values for same token:
export const VALIDATORS = new InjectionToken <Validator []>('Validators' );
providers : [
{ provide : VALIDATORS , useClass : RequiredValidator , multi : true },
{ provide : VALIDATORS , useClass : EmailValidator , multi : true },
{ provide : VALIDATORS , useClass : MinLengthValidator , multi : true },
]
@Injectable ()
export class Validation {
private validators = inject (VALIDATORS );
validate (value : string ): ValidationError [] {
return this .validators
.map (v =>validate (value))
.filter (Boolean );
}
}
HTTP Interceptors (Multi Provider)
export const appConfig : ApplicationConfig = {
providers : [
provideHttpClient (
withInterceptors ([
authInterceptor,
loggingInterceptor,
errorInterceptor,
])
),
],
};
App Initializers Run async code before app starts using provideAppInitializer:
import { provideAppInitializer, inject } from '@angular/core' ;
export const appConfig : ApplicationConfig = {
providers : [
Config ,
provideAppInitializer (() => {
const configService = inject (Config );
return configService.loadConfig ();
}),
],
};
Multiple Initializers providers : [
provideAppInitializer (() => {
const config = inject (Config );
return config.load ();
}),
provideAppInitializer (() => {
const auth = inject (Auth );
return auth.checkSession ();
}),
]
Environment Injector Create injectors programmatically:
import { createEnvironmentInjector, EnvironmentInjector , inject } from '@angular/core' ;
@Injectable ({ providedIn : 'root' })
export class Plugin {
private parentInjector = inject (EnvironmentInjector );
loadPlugin (providers : Provider []): EnvironmentInjector {
return createEnvironmentInjector (providers, this .parentInjector );
}
}
runInInjectionContext Run code with injection context:
import { runInInjectionContext, EnvironmentInjector , inject } from '@angular/core' ;
@Injectable ({ providedIn : 'root' })
export class Utility {
private injector = inject (EnvironmentInjector );
executeWithDI<T>(fn : () => T): T {
return runInInjectionContext (this .injector , fn);
}
}
utilityService.executeWithDI (() => {
const http = inject (HttpClient );
});
