Angular Academy · درس

الخدمات وInjectable

أنشئوا خدمات قابلة للحقن للمنطق المشترك

الخدمات وInjectable درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.

الخدمات وInjectable

إن الخدمة فئة تحتوي على منطق أو حالة قابلة لإعادة الاستخدام، مثل جلب البيانات أو مخزن مشترك. تنشئ Angular الخدمات وتشاركها من خلال حقن التبعيات.

لماذا نستخدم الخدمات؟

ينبغي أن تركز المكوّنات على العرض. انقلوا منطق الأعمال واستدعاءات API والحالة المشتركة إلى الخدمات حتى يمكن إعادة استخدامها واختبارها بشكل مستقل.

المزيّن Injectable

ضعوا علامة @Injectable على فئة الخدمة حتى تتمكن Angular من إنشائها وحقنها حيثما تدعو الحاجة.

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class DataService {}

providedIn root

يسجّل providedIn: 'root' الخدمةَ لدى حاقن جذر التطبيق. وتنشئ Angular نسخة واحدة مشتركة (singleton) للتطبيق بأكمله.

المزوّدات القابلة للإزالة عبر Tree-Shaking

بما أن المزوّد مُعلن على الفئة باستخدام providedIn، يمكن إزالة الخدمات غير المستخدمة من الحزمة تلقائيًا عبر tree-shaking.

خدمة ذات حالة

غالبًا ما تحتوي الخدمات على حالة. وباستخدام signals، يمكنكم إتاحة حالة تفاعلية من الخدمة.

import { Injectable, signal } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class CounterStore {
  count = signal(0);
  increment() { this.count.update(v => v + 1); }
}

خدمة ذات أساليب

أضيفوا أساليب يمكن للمكوّنات استدعاؤها لتنفيذ الإجراءات أو استرداد البيانات.

@Injectable({ providedIn: 'root' })
export class GreetingService {
  greet(name: string): string {
    return 'Hello, ' + name;
  }
}

إنشاء خدمة

تنشئ CLI هيكل خدمة مع إضافة المزيّن Injectable مسبقًا.

ng g service data

تشارك Singleton الحالة

بما أن خدمة الجذر singleton، فإن كل مكوّن يحقنها يرى النسخة والحالة نفسيهما. وهذه هي الطريقة التي تتشارك بها المكوّنات البيانات.

يمكن للخدمات حقن خدمات أخرى

يمكن أن تعتمد خدمة على خدمات أخرى. فعلى سبيل المثال، يمكن لخدمة بيانات استخدام خدمة HttpClient لإجراء الطلبات.

حافظوا على تركيز الخدمات

امنحوا كل خدمة مسؤولية واحدة واضحة. فاختبار الخدمات الصغيرة والمركّزة وإعادة استخدامها أسهل من اختبار الخدمات الكبيرة التي تنفّذ مهام كثيرة.

تحقّق سريع: Injectable

تسجيل خدمة singleton.

مراجعة: الخدمات

تعلّمتم أن الخدمات تحتوي على منطق وحالة قابلين لإعادة الاستخدام، وأنه يُشار إليها باستخدام @Injectable، وتستخدم providedIn: root لتسجيل singleton على مستوى التطبيق. وتتشارك الخدمات الحالة بين المكوّنات، ويمكن أن تعتمد على خدمات أخرى. التالي: دالة inject.

الأسئلة الشائعة

هل درس «الخدمات وInjectable» مجاني؟

نعم — نص درس «الخدمات وInjectable» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.

ماذا ستتعلم في «الخدمات وInjectable»؟

أنشئوا خدمات قابلة للحقن للمنطق المشترك تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟

لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «الخدمات وInjectable»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟

نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Angular Academy