ما هي الخدمات والحقن التبعي في Angular؟

Question

Accepted Answer

**الخدمة** هي class لـ **منطق غير واجهة المستخدم** — جلب البيانات، القواعد التجارية، الحالة المشتركة، logging — والتي يمكن للمكونات إعادة استخدامها. **الحقن التبعي (Dependency Injection)** هو كيفية **توفير** Angular لتلك الخدمات للمكونات التي تحتاجها، بدلاً من قيام المكونات بإنشاؤها يدويًا.

## تعريف الخدمة

```ts
import { Injectable } from "@angular/core";

@Injectable({ providedIn: "root" }) // makes it a singleton available app-wide
export class UserService {
  private users = [];
  getUsers() { return this.users; }
  addUser(u) { this.users.push(u); }
}
```

معامل `@Injectable({ providedIn: "root" })` يسجل الخدمة مع نظام DI في Angular كمثيل واحد مشترك (singleton) للتطبيق بأكمله.

## حقنها في مكون

```ts
@Component({ ... })
export class UserListComponent {
  // Angular sees this constructor param and INJECTS the singleton automatically
  constructor(private userService: UserService) {}

users = this.userService.getUsers(); // just use it
}
```

أنت ببساطة تصرح بالخدمة كمعامل في constructor؛ DI في Angular **ينشئ ويوفر** المثيل. لن تكتب أبدًا `new UserService()`. (يمكن لـ Angular الحديث أيضًا استخدام دالة `inject()` بدلاً من constructor injection.)

```ts
import { inject } from "@angular/core";
export class UserListComponent {
  private userService = inject(UserService); // alternative injection style
}
```

## لماذا DI قيّم

```text
✓ Single source of truth — one shared UserService instance across components
✓ Loose coupling — components depend on the type, not on constructing it
✓ Testability — swap in a mock service in tests easily
✓ Lifecycle management — Angular handles creation and sharing
```

لأن المكون لا ينشئ تبعياته، يمكنك حقن خدمة **مزيفة** في الاختبارات، أو تغيير التنفيذ على مستوى التطبيق في مكان واحد.

## لماذا يهم

الخدمات + DI هي المركز في معمارية Angular: المكونات تبقى مركزة على الواجهة بينما الخدمات تحتفظ بالمنطق والحالة، و DI يربطها معًا بأقل قدر من التزاوج.

هذا الفصل (والاختبارية التي يجلبها) هو أحد نقاط قوة Angular المميزة — مستعار من frameworks الـ backend — و `@Injectable({ providedIn: 'root' })` هو النمط اليومي لـ singleton مشترك وقابل للحقن.