شرح بنية المشروع
تجوّلوا بين الملفات التي ينشئها CLI
شرح بنية المشروع درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.
شرح بنية المشروع
تتميز مساحة عمل Angular بتخطيط متوقع. ويساعدكم الإلمام بالملفات والمجلدات الأساسية على التنقل في أي مشروع.
مجلد src
يحتوي مجلد src/ على الشفرة المصدرية لتطبيقكم: نقطة الإدخال، وشفرة التطبيق، والأصول العامة مثل index.html وstyles.
main.ts
يُعد src/main.ts نقطة إدخال التطبيق. وهو يهيّئ المكوّن الجذر باستخدام bootstrapApplication.
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent, appConfig);index.html
يُعد src/index.html صفحة HTML الوحيدة. ويحتوي body فيها على محدد المكوّن الجذر، حيث يعرض Angular التطبيق.
<!-- inside body -->
<!-- <app-root></app-root> -->مجلد app
يحتوي src/app/ على المكوّنات والخدمات والمسارات والإعدادات. ويتضمن المشروع الجديد app.component وapp.config.ts وapp.routes.ts.
ملفات app.component
يحتوي المكوّن الجذر عادةً على فئة بامتداد .ts، وقالب بامتداد .html، وملف أنماط بامتداد .css (أو .scss)، بالإضافة إلى ملف اختبار بامتداد .spec.ts.
app.config.ts
يصدّر app.config.ts كائنًا من النوع ApplicationConfig يحتوي على مصفوفة providers المستخدمة عند التهيئة، مثل جهاز التوجيه وعميل HTTP.
app.routes.ts
يصدّر app.routes.ts مصفوفة تعريفات المسارات التي تستخدمها provideRouter.
import { Routes } from '@angular/router';
export const routes: Routes = [];angular.json
في جذر مساحة العمل، يضبط angular.json إعدادات CLI، مثل أهداف البناء، ومسارات الإخراج، والأصول، والأنماط، وخيارات التشغيل لكل مشروع.
package.json وtsconfig
يسرد package.json الاعتماديات ونصوص npm البرمجية. وتضبط ملفات tsconfig.json مُصرّف TypeScript للتطبيق والاختبارات.
public أو assets
توجد الملفات الثابتة، مثل الصور والخطوط والأيقونة المفضلة، في مجلد public أو assets، وتُنقل إلى ناتج البناء وفقًا للإعدادات في angular.json.
تحقق سريع: البنية
حدّد نقطة الإدخال.
مراجعة: البنية
استكشفتم مساحة العمل: مجلد src/ للشفرة المصدرية، وmain.ts كنقطة إدخال، وindex.html كصفحة مضيفة، ومجلد app للمكوّنات والإعدادات، وangular.json لإعداد CLI. التالي: إنشاء الشفرة باستخدام CLI.
الأسئلة الشائعة
هل درس «شرح بنية المشروع» مجاني؟
نعم — نص درس «شرح بنية المشروع» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.
ماذا ستتعلم في «شرح بنية المشروع»؟
تجوّلوا بين الملفات التي ينشئها CLI تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟
لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «شرح بنية المشروع»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟
نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.