Services & DI
Providers & @Injectable
DI Configuration
💡 Provider ek "recipe book" hai jo Angular ko batाता hai KAISE ek dependency BANANI hai — jaise "jab bhi koi UserService maange, IS specific recipe se banaओ" (ya "already bani hui EK copy do sabko").
providedIn: 'root' (@Injectable mein) service ko poore app mein SINGLETON banata hai — ek hi instance, sab jagah share hoti hai. Providers module/component LEVEL par bhi define ho sakte hain — jab SCOPED instances chahiye (jaise har component ka apna alag instance).
// App-wide singleton (most common):
@Injectable({ providedIn: 'root' })
export class LoggerService { }
// Component-level provider — is component (aur uske children) ke liye NAYA instance:
@Component({
selector: 'app-isolated',
providers: [CounterService] // har baar naya instance
})
export class IsolatedComponent { }
// useValue, useClass, useFactory — advanced provider configurations:
// { provide: API_URL, useValue: 'https://api.example.com' }🏭
Provider ek "recipe book" hai jo Angular ko batाता hai KAISE ek dependency BANANI hai — jaise "jab bhi koi UserService maange, IS specific recipe se banaओ" (ya "already bani hui EK copy do sabko").
1 / 2
⚡ झट से Recap
- providedIn: 'root' = app-wide singleton (most common)
- Component providers[] = scoped, naya instance per component
- useValue/useClass/useFactory = advanced configuration options
इस page में (2 subtopics)
DI sirf CLASSES ke liye nahi — InjectionToken se strings, objects, ya configuration values bhi inject kar sakte ho (jaise API URLs, feature flags).
import { InjectionToken } from '@angular/core';
export const API_URL = new InjectionToken<string>('apiUrl');
// app.module.ts (ya bootstrapApplication config) mein provide karo:
// { provide: API_URL, useValue: 'https://api.example.com' }
// Component/service mein inject karo:
// constructor(@Inject(API_URL) private apiUrl: string) { }Tip: InjectionToken especially useful hai environment-specific configuration ke liye — development mein ek URL, production mein doosra, bina code change kiye, sirf provider configuration badalके.
useFactory ek FUNCTION deता hai jo dependency ka instance BANAता hai — jab simple useClass/useValue kaafi na ho (jaise conditional logic based on environment).
export function loggerFactory(isProduction: boolean) {
return isProduction ? new ProductionLogger() : new DevLogger();
}
// Provider configuration:
// {
// provide: LoggerService,
// useFactory: () => loggerFactory(environment.production)
// }Tip: useFactory advanced pattern hai — zyadatar apps mein simple providedIn: 'root' (@Injectable ke andar) kaafi hota hai, useFactory sirf genuinely complex initialization logic ke liye.