نوفيل
الرئيسيةالكورساتالتحديات⚔️ المبارزاتالمقالاتالأدواتتغريداتالمجتمع
دخولابدأ مجاناً
نوفيل

منصة تعليم البرمجة الأولى بالعربي. تعلم من الصفر حتى الاحتراف مع كورسات احترافية وتحديات ذكاء اصطناعي.

المنصة

  • الكورسات
  • التحديات
  • المقالات
  • الأدوات

الحساب

  • إنشاء حساب
  • تسجيل الدخول
  • لوحة التحكم
  • الملف الشخصي

روابط

  • سياسة الخصوصية
  • شروط الاستخدام
  • عن نوفيل
  • تواصل معنا

© 2026 نوفيل. جميع الحقوق محفوظة.

صُنع بـ في مصر

نوفيل
الرئيسيةالكورساتالتحديات⚔️ المبارزاتالمقالاتالأدواتتغريداتالمجتمع
دخولابدأ مجاناً
AN

منهج Angular v22.1

دليل مرجعي شامل

كل اللغات
مدرسة البرمجة/منهج Angular v22.1/توليد الخدمات الأنابيب والتوجيهات

توليد الخدمات الأنابيب والتوجيهات

وليد الخدمات في أنجلرAngular CLI generate service and pipeإنشاء Services و Pipes تلقائياًمعمارية Angular 22.1

جدول مرجعي سريع

1
الأمر البرمجيالوظيفة الأساسيةالتأثير على المشروع
ng g s service-nameإنشاء خدمة جديدة مع تفعيل الحقن على مستوى الجذر (providedIn: 'root')ينشئ ملف الخدمة وملف الاختبار الخاص بها ويهيئها للحقن الفوري
ng g p pipe-nameتوليد أنبوب مخصص (Custom Pipe) لتنسيق وتعديل نصوص وعرض البياناتينشئ ملف الـ Pipe مع صياغة الدالة الأساسية transform جاهزة للاستخدام
ng g d directive-nameإنشاء توجيه مخصص لتعديل سلوك أو مظهر العناصر في القوالبيضيف ملف الـ Directive ويربطه بنظام المحددات (Selectors)

الشرح

نستكمل في هذا الدرس استكشاف القوة الهائلة لأداة Angular CLI مع التركيز على توليد العناصر البرمجية الأساسية الأخرى التي لا غنى عنها في أي تطبيق Angular 22.1 متكامل، وهي: الخدمات (Services) لإدارة منطق البيانات والاتصال بالخوادم، الأنابيب (Pipes) لتنسيق عرض البيانات للمستخدم، والتوجيهات (Directives) للتحكم في سلوك عناصر واجهة المستخدم.

تفصيل العناصر المُولّدة عبر سطر الأوامر

الخدمات (Services):

تُستخدم لفصل منطق الأعمال عن مكونات واجهة المستخدم (Business Logic). باستخدام أداة CLI، يتم ربط الخدمة تلقائياً بنظام الحقن (Dependency Injection) عبر الاعتماد على providedIn: 'root', مما يجعلها متاحة في جميع أنحاء التطبيق دون الحاجة لتسجيلها يدوياً.

الأنابيب والتوجيهات (Pipes & Directives):

الـ Pipes تمكنك من إعادة تشكيل البيانات قبل عرضها في قالب HTML (مثل تحويل النصوص لأحرف كبيرة أو تنسيق التواريخ). الـ Directives تتيح لك التحكم في العناصر وتغيير سلوكها أو مظهرها بشكل ديناميكي مرن.

أمثلة برمجية: تطبيق عملي لتوليد الخدمات والأنابيب

المثال الأول: توليد خدمة لجلب بيانات المستخدمين

bash
1# إنشاء خدمة إدارة بيانات المستخدمين داخل مجلد النواة أو الخدمات
2ng generate service core/services/user

ℹ️ معلومة

أو باستخدام الاختصار السريع:

bash
1ng g s core/services/user

المثال الثاني: توليد أنبوب مخصص وتوجيه برمجي

bash
1# توليد أنبوب لتنسيق العملات أو النصوص
2ng g p shared/pipes/filter-search
3
4# توليد توجيه مخصص لتغيير لون الخلفية عند المرور بالماوس
5ng g d shared/directives/highlight

نصائح احترافية

  • —استفد من الحقن التلقائي في الخدمات الحديثة!
  • —عندما تولد خدمة جديدة باستخدام الـ CLI، تأكد من الاعتماد على الدالة الحديثة inject() داخل المكونات أو الخدمات الأخرى بدلاً من الاعتماد التقليدي على الـ Constructor، فهذا يتماشى تماماً مع معمارية Angular 22.1 النظيفة ويسهل عملية كتابة الشفرة واختبارها.

الدرس السابق

التوليد التلقائي للمكونات

الدرس التالي

تشغيل واختبار التطبيق

نوفيل

منصة تعليم البرمجة الأولى بالعربي. تعلم من الصفر حتى الاحتراف مع كورسات احترافية وتحديات ذكاء اصطناعي.

المنصة

  • الكورسات
  • التحديات
  • المقالات
  • الأدوات

الحساب

  • إنشاء حساب
  • تسجيل الدخول
  • لوحة التحكم
  • الملف الشخصي

روابط

  • سياسة الخصوصية
  • شروط الاستخدام
  • عن نوفيل
  • تواصل معنا

© 2026 نوفيل. جميع الحقوق محفوظة.

صُنع بـ في مصر