Angular دون مناطق
شغّل Angular دون Zone.js
Angular دون مناطق درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.
ما بعد Zone.js
تفرض Zone.js تكلفة إضافية وتعدّل واجهات برمجة التطبيقات العامة. يوفّر Angular الحديث وضعًا zoneless تُدار فيه آلية اكتشاف التغييرات باستخدام Signals والإشعارات الصريحة بدلًا من تعديل النطاق.
تفعيل Zoneless
وفّر مزوّد اكتشاف التغييرات zoneless في إعدادات بدء التشغيل.
bootstrapApplication(AppComponent, {
providers: [
provideExperimentalZonelessChangeDetection()
]
});إزالة Zone.js
في وضع zoneless، تزيل أيضًا polyfill zone.js من إعدادات البناء، مما يقلل حجم الحزمة وتكلفة بدء التشغيل.
// angular.json: remove "zone.js" from polyfills
// main.ts: do not import 'zone.js'ما الذي يطلق اكتشاف التغييرات الآن؟
من دون النطاقات، يجدول Angular اكتشاف التغييرات عند حدوث أحد الأمور التالية: تغيّر signal مقروء في قالب، أو إصدار أنبوب async قيمة، أو إطلاق ربط حدث، أو استدعاء markForCheck().
Signals في صميم العملية
تعتمد تطبيقات zoneless بدرجة كبيرة على Signals لإدارة الحالة. تؤدي قراءة signal في القالب إلى إنشاء اعتماد؛ ويؤدي تحديثها إلى إعلام Angular بتحديث ذلك العرض.
count = signal(0);
// template: {{ count() }}
this.count.set(5); // schedules CDتستمر الأحداث في إرسال الإشعارات
تُعلم روابط أحداث القالب Angular مباشرةً، لذا تواصل تفاعلات المستخدم تحديث واجهة المستخدم من دون نطاقات.
<button (click)="count.update(c => c + 1)">+</button>التنفيذ غير المتزامن من دون نطاقات
لم تعد استدعاءات setTimeout المباشرة أو العمليات غير المتزامنة التي لا تستخدم Signals تطلق اكتشاف التغييرات تلقائيًا. غلّف هذه الحالة داخل Signals أو استدعِ markForCheck().
setTimeout(() => this.ready.set(true), 1000);توافق أنبوب async
يستمر أنبوب async في العمل في وضع zoneless لأنه يضع العرض صراحةً ضمن العناصر المطلوب التحقق منها عند كل إصدار.
<p>{{ data$ | async }}</p>مكتبات الجهات الخارجية
تفترض بعض المكتبات أن Zone.js يتولى الاكتشاف تلقائيًا. في وضع zoneless، قد تحتاج إلى تغليف عمليات الاستدعاء الخاصة بها لتحديث signal أو استدعاء markForCheck() يدويًا.
الفوائد
يعني وضع zoneless حزمًا أصغر، وبدء تشغيل أسرع، وعددًا أقل من الدورات الإضافية غير المتوقعة، ونموذجًا ذهنيًا أوضح: لا تتحدث واجهة المستخدم إلا عندما تتغير الحالة التي تتابعها فعليًا.
الحالة التجريبية
يحمل المزوّد الاسم provideExperimentalZonelessChangeDetection لأن واجهة برمجة التطبيقات لا تزال قيد الاستقرار. استخدمه في التطبيقات الجديدة التي تضع Signals في المقام الأول، واختبر التطبيق جيدًا.
تحقق سريع
اختبر مدى فهمك لـ Angular في وضع zoneless.
مراجعة
تعلّمت أن provideExperimentalZonelessChangeDetection() يلغي الحاجة إلى Zone.js، ويدير التحديثات عبر Signals والأحداث وأنبوب async وmarkForCheck()، لإنشاء تطبيقات أصغر وأسرع وأكثر قابلية للتنبؤ.
الأسئلة الشائعة
هل درس «Angular دون مناطق» مجاني؟
نعم — نص درس «Angular دون مناطق» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.
ماذا ستتعلم في «Angular دون مناطق»؟
شغّل Angular دون Zone.js تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟
لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «Angular دون مناطق»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟
نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.