Angular کی hierarchical dependency injection کیسے کام کرتی ہے؟

Question

Accepted Answer

Angular کا DI **hierarchical** ہے: injectors ایک درخت بناتے ہیں جو component/module درخت کو ظاہر کرتی ہے۔ جب کوئی component کسی dependency کی درخواست کرتا ہے، Angular **اوپر** کی طرف injector درخت میں چلتا ہے جب تک کہ اسے ایک provider نہ مل جائے — جو یہ کنٹرول کرتا ہے کہ آپ کو shared singleton ملتا ہے یا ہر component کے لیے الگ instance۔ ## injector hierarchy ```text Root injector (app-wide) ← providedIn: 'root' lives here (one singleton) └─ Module/Route injectors └─ Component injector ← providers: [...] in @Component └─ Child component injector ``` ایک lookup درخواست کرنے والے component سے شروع ہوتی ہے اور root تک بلبلے کی طرح جاتی ہے۔ **پہلا** provider جو ملتا ہے وہ جیتا ہے۔ ## جہاں آپ provide کرتے ہیں وہ scope کا تعین کرتا ہے ```ts // 1. App-wide singleton — ONE instance shared everywhere @Injectable({ providedIn: "root" }) export class AuthService {} // 2. Component-scoped — a NEW instance per component (and its children) @Component({ selector: "app-widget", providers: [DataService], // each gets its OWN DataService }) export class WidgetComponent {} ``` yہ اہم لیور ہے: `providedIn: 'root'` ایک shared instance دیتا ہے؛ کسی component کے `providers` array میں ایک provider درج کرنا اس component subtree تک محدود ایک نیا instance بناتا ہے (state کو ہر component میں علیحدہ رکھنے کے لیے مفید)۔ ## Injection modifiers ```ts constructor( @Optional() private logger: Logger, // null instead of error if not provided @Self() private local: LocalService, // only look in THIS injector @SkipSelf() private parent: ParentService, // skip self, start at the parent @Host() private host: HostService, // stop at the host component ) {} ``` یہ decorators کنٹرول کرتے ہیں کہ Angular injector درخت میں *کتنی دور* تک تلاش کرتا ہے — مثال کے طور پر `@Optional` جب dependency غائب ہو تو خرابی سے بچاتا ہے، `@SkipSelf` والدین کا instance استعمال کرنے پر مجبور کرتا ہے۔ ## Non-class dependencies کے لیے Injection tokens ```ts export const API_URL = new InjectionToken("apiUrl"); // provide: { provide: API_URL, useValue: "https://api.example.com" } constructor(@Inject(API_URL) private apiUrl: string) {} ``` Tokens آپ کو values/config inject کرنے دیتے ہیں (صرف classes نہیں) اور implementations کو تبدیل کرتے ہیں (`useClass`, `useValue`, `useFactory`)۔ ## یہ کیوں اہم ہے Hierarchical injector کو سمجھنے سے یہ واضح ہوتا ہے کہ *کیوں* ایک service app-wide میں shared ہے یا ہر component میں duplicate ہے — یہ "یہ components state کو share/not-share کیوں کرتے ہیں؟" کے الجھن کا اکثر سبب ہے۔ Provider scope کو کنٹرول کرنا (`root` بمقابلہ component `providers`)، modifiers استعمال کرنا (`@Optional`, `@SkipSelf`)، اور config/swappable implementations کے لیے injection tokens Angular کے DI کو architecture اور testing دونوں کے لیے طاقتور بناتا ہے۔