آموزش انگولار جلسه ۳ — بررسی ساختار فایل‌های پروژه Angular ۱۷

در این جلسه با ساختار فایل‌ها و پوشه‌های یک پروژه Angular 17 آشنا می‌شویم. زمانی که با استفاده از Angular CLI یک پروژه جدید ایجاد می‌کنید، مجموعه‌ای از فایل‌ها و پوشه‌ها به صورت خودکار ساخته می‌شوند که هر کدام وظیفه مشخصی در اجرای اپلیکیشن دارند. شناخت این ساختار برای هر توسعه‌دهنده Angular ضروری است، زیرا بیشتر کار شما در طول توسعه پروژه در همین فایل‌ها انجام می‌شود.

در Angular 17 ساختار پروژه نسبت به نسخه‌های قدیمی ساده‌تر و مدرن‌تر شده است. استفاده از Standalone Components، فایل‌های config جدید و ساختار بهینه‌تر باعث شده مدیریت پروژه آسان‌تر شود.

ساخت پروژه Angular 17

برای ایجاد یک پروژه جدید ابتدا از Angular CLI استفاده می‌کنیم. دستور زیر یک پروژه جدید ایجاد می‌کند.

ng new my-angular-app

بعد از اجرای این دستور، CLI مجموعه‌ای از فایل‌ها و پوشه‌ها را می‌سازد که ساختار اصلی پروژه را تشکیل می‌دهند.

ساختار کلی پروژه Angular 17

بعد از ساخت پروژه، ساختار آن تقریباً به شکل زیر خواهد بود.

my-angular-app
src
app
assets
favicon.ico
index.html
main.ts
styles.css

angular.json
package.json
tsconfig.json
tsconfig.app.json
tsconfig.spec.json

node_modules

این ساختار شامل تنظیمات پروژه، فایل‌های سورس برنامه و وابستگی‌های npm است.

پوشه node_modules

این پوشه شامل تمام پکیج‌هایی است که توسط npm یا yarn نصب شده‌اند. کتابخانه Angular، RxJS و سایر وابستگی‌ها در این پوشه قرار دارند.

معمولاً این پوشه بسیار بزرگ است و در سیستم کنترل نسخه مانند Git ذخیره نمی‌شود.

پوشه src

پوشه src مهم‌ترین بخش پروژه Angular است زیرا تمام کدهای اپلیکیشن در این پوشه قرار می‌گیرند.

در این پوشه فایل‌های اصلی برنامه قرار دارند:

app
assets
index.html
main.ts
styles.css

فایل main.ts

این فایل نقطه شروع اجرای برنامه Angular است. Angular از این فایل برای بوت‌استرپ کردن اپلیکیشن استفاده می‌کند.

در Angular 17 معمولاً از تابع bootstrapApplication برای اجرای اپلیکیشن استفاده می‌شود.

نمونه ساده:

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent);

در نسخه‌های جدید Angular دیگر نیازی به AppModule در بسیاری از پروژه‌ها نیست و اپلیکیشن مستقیماً با کامپوننت اصلی اجرا می‌شود.

فایل index.html

این فایل صفحه اصلی HTML اپلیکیشن است. Angular در زمان اجرا، کامپوننت اصلی را داخل این فایل رندر می‌کند.

به طور معمول داخل این فایل تگ مربوط به کامپوننت اصلی قرار می‌گیرد.

مثال:

Angular محتوای کامپوننت اصلی را در این تگ قرار می‌دهد.

پوشه assets

این پوشه برای فایل‌های استاتیک پروژه استفاده می‌شود. مانند:

تصاویر
فونت‌ها
آیکون‌ها
فایل‌های JSON

هر فایلی که داخل این پوشه قرار بگیرد بدون پردازش در خروجی build قرار می‌گیرد.

فایل styles.css

این فایل برای استایل‌های سراسری پروژه استفاده می‌شود. هر CSS که در این فایل نوشته شود روی کل اپلیکیشن اعمال خواهد شد.

معمولاً در این فایل موارد زیر قرار می‌گیرند:

استایل‌های عمومی
ریست CSS
فونت‌ها
تنظیمات تم پروژه

پوشه app

این پوشه مهم‌ترین بخش برنامه Angular است زیرا تمام منطق اپلیکیشن در آن قرار دارد.

در Angular 17 معمولاً ساختار ساده‌تری دارد و شامل موارد زیر است:

app.component.ts
app.component.html
app.component.css
app.config.ts
app.routes.ts

فایل app.component.ts

این فایل کامپوننت اصلی اپلیکیشن است. اولین کامپوننتی که Angular اجرا می‌کند همین کامپوننت است.

نمونه ساده:

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
standalone: true,
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'my-angular-app';
}

در Angular 17 معمولاً از standalone: true استفاده می‌شود تا کامپوننت مستقل باشد.

فایل app.component.html

این فایل قالب HTML کامپوننت اصلی است. هر چیزی که در این فایل قرار بگیرد در صفحه نمایش داده می‌شود.

در پروژه‌های واقعی این فایل معمولاً شامل Router Outlet است تا صفحات مختلف در آن رندر شوند.

مثال:

فایل app.config.ts

این فایل در Angular 17 برای تنظیمات اصلی اپلیکیشن استفاده می‌شود. در این فایل سرویس‌ها، Router و سایر Provider ها تعریف می‌شوند.

نمونه:

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
providers: [provideRouter(routes)]
};

این فایل جایگزین بسیاری از تنظیماتی شده که قبلاً در AppModule قرار می‌گرفتند.

فایل app.routes.ts

این فایل مسیرهای اپلیکیشن را تعریف می‌کند.

مثال ساده:

import { Routes } from '@angular/router';

export const routes: Routes = [
{ path: '', loadComponent: () => import('./home/home.component').then(m => m.HomeComponent) }
];

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

فایل angular.json

این فایل تنظیمات Angular CLI را نگهداری می‌کند. مواردی که در این فایل تعریف می‌شوند شامل:

تنظیمات build
مسیر assets
تنظیمات styles
تنظیمات production

CLI هنگام build یا serve از این فایل استفاده می‌کند.

فایل package.json

در این فایل اطلاعات پروژه و وابستگی‌های npm قرار دارند.

همچنین اسکریپت‌های اجرای پروژه نیز در همین فایل تعریف می‌شوند.

نمونه اسکریپت‌های مهم:

npm start
npm run build
npm run test

فایل tsconfig.json

این فایل تنظیمات TypeScript پروژه را مشخص می‌کند. TypeScript از این تنظیمات برای کامپایل کدها استفاده می‌کند.

مواردی مانند:

target JavaScript
مسیر فایل‌ها
strict mode

در این فایل تعریف می‌شوند.

نکات مهم درباره ساختار پروژه Angular 17

در Angular 17 استفاده از Standalone Components باعث شده ساختار پروژه ساده‌تر شود. دیگر الزاماً نیازی به NgModule نیست و بسیاری از تنظیمات مستقیماً در فایل‌های config انجام می‌شوند.

همچنین Angular CLI ساختار استانداردی ایجاد می‌کند که رعایت آن باعث می‌شود پروژه شما قابل نگهداری و توسعه‌پذیرتر باشد.

بهتر است همیشه کامپوننت‌ها، سرویس‌ها و ماژول‌های خود را به صورت مرتب در پوشه‌های جداگانه سازماندهی کنید.

جمع‌بندی

در این جلسه با ساختار فایل‌ها و پوشه‌های یک پروژه Angular 17 آشنا شدیم. یاد گرفتیم که فایل‌هایی مانند main.ts، app.component.ts، app.config.ts و angular.json چه نقشی در اجرای اپلیکیشن دارند.

شناخت این ساختار کمک می‌کند هنگام توسعه پروژه بدانیم هر بخش از برنامه در کجا قرار دارد و چگونه باید آن را مدیریت کنیم.

دسترسی به ویدیوهای کامل دوره

برای مشاهده ویدیوهای کامل هر جلسه، دریافت تمرین‌ها، فایل‌ها و پشتیبانی، می‌توانید دوره کامل را تهیه کنید.