Angular Academy · درس

الموفّرون والنطاقات

تحكّموا في موضع وجود الخدمات ضمن الشجرة

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

المزوّدات والنطاقات

يُخبر المزوّد Angular بكيفية إنشاء تبعية. ويحدد النطاق الذي تسجّلونها فيه عدد النسخ الموجودة والجهات التي تتشاركها.

نطاق الجذر

يسجّل providedIn: root الخدمةَ في حاقن الجذر، ويوفر singleton واحدًا مشتركًا للتطبيق بأكمله. وهذا هو الخيار الأكثر شيوعًا.

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

مزوّدات المكوّنات

يمكنكم تحديد نطاق خدمة ليقتصر على مكوّن بإدراجها في مصفوفة providers الخاصة بالمكوّن. وتحصل كل نسخة من ذلك المكوّن على نسختها الخاصة من الخدمة.

import { Component } from '@angular/core';
import { LocalStore } from './local-store';

@Component({
  selector: 'app-panel',
  providers: [LocalStore],
  template: ''
})
export class PanelComponent {}

لماذا نستخدم نطاق المكوّن؟

استخدموا المزوّدات ذات نطاق المكوّن عندما تحتاج كل نسخة من المكوّن إلى حالة معزولة خاصة بها، مثل كائن حالة نموذج أو مخزن خاص بكل أداة.

الجذر مقابل المكوّن

الجذر: نسخة واحدة مشتركة في كل مكان. المكوّن: نسخة واحدة لكل نسخة من المكوّن (ولأبنائه). اختاروا النطاق وفقًا لما إذا كانت الحالة يجب أن تكون مشتركة أو معزولة.

هرمية الحاقنات

تشكّل حاقنات Angular شجرة. وعند حل تبعية، تبحث Angular في حاقن المكوّن، ثم تصعد إلى الحاقنات الأصلية، وأخيرًا إلى الجذر.

ترث المكوّنات الابنة

تكون الخدمة الموفّرة على مكوّن متاحةً أيضًا لأبناء ذلك المكوّن، ما لم يوفّر أحد الأبناء نسخته الخاصة، فتحجب هذه النسخة نسخةَ الأصل.

المزوّدات على مستوى التطبيق

يمكنكم أيضًا تسجيل المزوّدات عند التمهيد في مصفوفة providers الخاصة بـ bootstrapApplication، على نحو مشابه لنطاق الجذر، وغالبًا باستخدام دوال provide*.

// bootstrapApplication(AppComponent, {
//   providers: [provideHttpClient()]
// });

useClass وuseValue

يمكن للمزوّدات ربط رمز بفئة باستخدام useClass، أو بقيمة ثابتة باستخدام useValue، أو بمصنع باستخدام useFactory، مما يتيح الاستبدال والتهيئة.

// providers: [{ provide: Logger, useClass: ConsoleLogger }]

تبديل التطبيقات

بما أن المزوّد يربط الرمز بتطبيق، يمكنكم تبديل التطبيقات، مثل استخدام تطبيق وهمي في الاختبارات، من دون تغيير المستهلكين.

اختيار النطاق

اجعلوا الخيار الافتراضي هو root للـ singletons المشتركة. واستخدموا مزوّدات المكوّن فقط عند الحاجة إلى حالة معزولة لكل نسخة.

تحقّق سريع: النطاقات

حالة لكل نسخة.

مراجعة: المزوّدات والنطاقات

تعلّمتم أن المزوّدات تصف كيفية إنشاء التبعيات، وأن النطاق يتحكم في إنشاء النسخ: root للـ singletons على مستوى التطبيق، ومزوّدات المكوّن للعزل لكل نسخة. تحل Angular التبعيات عبر هرمية الحاقنات، وتتيح useClass وuseValue وuseFactory تبديل التطبيقات. التالي: رموز الحقن.

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

هل درس «الموفّرون والنطاقات» مجاني؟

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

ماذا ستتعلم في «الموفّرون والنطاقات»؟

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

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

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

كم من الوقت يستغرق درس «الموفّرون والنطاقات»؟

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

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

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

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

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