Angular Academy · درس

إنشاء مكتبة باستخدام ng generate

أنشئ الهيكل الأساسي لمشروع مكتبة

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

لماذا ننشئ مكتبة

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

مساحات العمل تحتوي على المكتبات

توجد المكتبات داخل مساحة عمل في Angular: وهي مجلد تديره وحدة angular.json واحدة، ويمكن أن يحتوي على عدة تطبيقات ومكتبات. يمكنك إضافة مكتبة إلى مساحة عمل موجودة أو إنشاء مساحة عمل مخصصة لها.

ng new my-workspace --create-application=false
# a workspace with no app, ready to hold libraries

إنشاء مكتبة

يُنشئ المخطط ng generate library (والاسم المختصر ng g lib) هيكل مشروع مكتبة جديدًا ضمن projects/.

ng generate library ui-kit
# creates projects/ui-kit with a sample component, module, and public-api.ts

ما الذي يتم إنشاؤه

تأتي المكتبة مع مجلد src/lib خاص بها، وملف تجميعي public-api.ts، وملف ng-package.json (لعملية البناء)، وإدخال في angular.json. وهي مشروع مستقل قابل للبناء.

projects/ui-kit/
  src/
    lib/        # your components & services
    public-api.ts
  ng-package.json
  package.json

إضافة المكوّنات إلى المكتبة

أنشئ الشيفرة داخل المكتبة باستهدافها باستخدام --project. تضع CLI الملفات في المجلد الصحيح.

ng generate component button --project=ui-kit
ng generate service theme --project=ui-kit

المكوّنات المستقلة في المكتبات

تفضّل المكتبات الحديثة المكوّنات المستقلة، التي يستوردها المستهلكون مباشرةً دون NgModule. عيّن للمكوّن standalone: true حتى تتمكن التطبيقات من استخدامه باستيراد بسيط.

@Component({
  selector: 'lib-button',
  standalone: true,
  template: '<button class="lib-btn"><ng-content></ng-content></button>',
})
export class ButtonComponent {}

ملف package.json الخاص بالمكتبة

لكل مكتبة ملف package.json خاص بها، يحدد اسمها وإصدارها والتبعيات النظيرة مثل @angular/core. وتعني التبعيات النظيرة أن التطبيق المستهلك يوفّر Angular، مما يتجنب وجود نسخ مكررة.

{
  "name": "ui-kit",
  "version": "0.0.1",
  "peerDependencies": { "@angular/core": "^18.0.0" }
}

التطوير باستخدام تطبيق محلي

احتفظ بتطبيق تجريبي في مساحة العمل نفسها لاختبار المكتبة أثناء بنائها. يؤدي الاستيراد باستخدام اسم المكتبة إلى حلّها إلى الشيفرة المصدرية المحلية عبر تعيينات المسارات في TypeScript داخل tsconfig.

المكتبة مقابل التطبيق

يُعدّ التطبيق للنشر، بينما تُعدّ المكتبة للاستهلاك. لا يمكن تشغيل المكتبات مباشرةً، بل تُبنى في حزمة قابلة للتوزيع ثم تُنشر أو تستوردها التطبيقات الموجودة في مساحة العمل.

حافظ على تركيز المكتبات

تتمتع المكتبة الجيدة بغرض واضح (مثل مجموعة واجهة مستخدم أو طبقة وصول إلى البيانات). تجنّب جمع شيفرات غير مترابطة معًا؛ فالمكتبات المتماسكة أسهل في إدارة إصداراتها وتوثيقها وإعادة استخدامها.

الخطوات التالية

بعد إنشاء هيكل المكتبة، تتمثل المهام المتبقية في تحديد واجهة برمجتها العامة، وبنائها وفق Angular Package Format، ونشرها. تغطي الدروس التالية كل جانب منها.

تحقق سريع

كيف تنشئ مكتبة؟

مراجعة

تجمع المكتبات الشيفرة القابلة لإعادة الاستخدام لعدة تطبيقات. أنشئ مكتبة باستخدام ng generate library داخل مساحة عمل؛ إذ ينشئ هيكل src/lib وpublic-api.ts وng-package.json وملف package.json الذي يحتوي على التبعيات النظيرة. أضف الشيفرة عبر --project، وفضّل المكوّنات المستقلة، وحافظ على تركيز كل مكتبة.

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

هل درس «إنشاء مكتبة باستخدام ng generate» مجاني؟

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

ماذا ستتعلم في «إنشاء مكتبة باستخدام ng generate»؟

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

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

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

كم من الوقت يستغرق درس «إنشاء مكتبة باستخدام ng generate»؟

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

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

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

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

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