دوره‌ها / Angular / ساختار پروژه (Project Structure)

ساختار پروژه (Project Structure)

15 دقیقه Article

ساختار پروژه Angular: آشنایی با فایل‌ها 📂

وقتی با ng new یک پروژه می‌سازید، فایل‌های زیادی تولید می‌شود. نترسید! بیایید مهم‌ترین آن‌ها را بررسی کنیم.

فایل‌ها و پوشه‌های اصلی:

  • 📁 node_modules/: پکیج‌های npm نصب شده (کتابخانه‌های پروژه).
  • 📁 src/: کد اصلی برنامه شما اینجاست.
    • 📁 app/: کامپوننت‌ها، سرویس‌ها و ماژول‌های برنامه شما.
    • 📁 assets/: تصاویر، فونت‌ها و فایل‌های استاتیک.
    • 📄 index.html: فایل HTML اصلی برنامه (تنها فایل HTML که مرورگر بارگذاری می‌کند).
    • 📄 main.ts: نقطه شروع اجرای برنامه (Entry point).
    • 📄 styles.css: استایل‌های سراسری (Global Styles).
  • 📄 angular.json: تنظیمات پیکربندی Angular CLI.
  • 📄 package.json: لیست وابستگی‌ها (Dependencies) و اسکریپت‌های پروژه.
  • 📄 tsconfig.json: تنظیمات کامپایلر TypeScript.

نگاهی دقیق‌تر به پوشه src/app:

بیشتر کار شما در این پوشه انجام می‌شود. به صورت پیش‌فرض شامل فایل‌های زیر است:

  • app.component.ts: منطق (Logic) کامپوننت اصلی.
  • app.component.html: قالب (Template) یا ظاهر کامپوننت اصلی.
  • app.component.css: استایل‌های مخصوص این کامپوننت.
  • app.module.ts: ماژول اصلی برنامه (Root Module) که کامپوننت‌ها را گروه‌بندی می‌کند.

جریان اجرا (Bootstrapping):

  1. مرورگر index.html را بارگذاری می‌کند.
  2. main.ts اجرا می‌شود.
  3. main.ts ماژول اصلی (AppModule) را راه‌اندازی (Bootstrap) می‌کند.
  4. AppModule کامپوننت اصلی (AppComponent) را اجرا می‌کند.
  5. AppComponent در تگ <app-root> در فایل index.html نمایش داده می‌شود.
💡 نکته: Angular یک فریم‌ورک SPA (Single Page Application) است. یعنی فقط یک فایل index.html وجود دارد و Angular محتویات صفحه را به صورت پویا تغییر می‌دهد، بدون اینکه صفحه رفرش شود.
✅ یاد گرفتید: حالا با نقشه راه فایل‌های پروژه آشنا شدید و می‌دانید کجا باید دنبال کدها بگردید!

آماده رفتن به درس بعدی هستید؟

این درس را به پایان رساندید و می‌توانید به درس بعدی بروید.

برای ذخیره پیشرفت وارد شوید
درس قبلی درس بعدی