مقدمه‌ای بر Angular

در مقاله مقدمه‌ای بر Angular، به معرفی Angular و جنبه‌های مختلف آن از سطح مبتدی تا پیشرفته خواهیم پرداخت. اگر شما به دنبال آموزش Angular هستید، این مقاله می‌تواند نقطه شروعی عالی برای شما باشد. “مقدمه‌ای بر Angular” به شما کمک می‌کند تا مفاهیم پایه‌ای را درک کرده و به تسلط در این فریم‌ورک پرکاربرد برسید.

Angular چیست؟

در ابتدای مقاله مقدمه‌ای بر Angular میتوان گفت Angular یک فریم‌ورک متن‌باز است که توسط تیم توسعه Google برای ساخت وب‌اپلیکیشن‌های پیچیده و قدرتمند طراحی شده است. این فریم‌ورک به توسعه‌دهندگان این امکان را می‌دهد تا برنامه‌های تک‌صفحه‌ای (SPA) با کارایی بالا، قابلیت مقیاس‌پذیری و مدیریت مؤثر حالت (state management) بسازند. با استفاده از Angular، می‌توان برنامه‌هایی با معماری ساختاریافته، تمیز و قابل نگهداری طراحی کرد که برای اپلیکیشن‌های تجاری و صنعتی بسیار مناسب هستند.

ویژگی‌های برجسته Angular عبارتند از:

TypeScript: به طور کامل با TypeScript نوشته شده است که مزایای تایپ ایمن را ارائه می‌دهد و باعث می‌شود کدهای پیچیده راحت‌تر قابل مدیریت و اشکال‌زدایی باشند.
قابلیت مقیاس‌پذیری: Angular به شما این امکان را می‌دهد که پروژه‌ها را از کوچکترین اپلیکیشن‌های تک‌صفحه‌ای تا پروژه‌های بزرگ و پیچیده با هزاران کاربر مدیریت کنید.
رابط کاربری پویا: Angular از دیتابایندینگ (data binding) و تغییرات خودکار در رابط کاربری استفاده می‌کند که به برنامه‌ها اجازه می‌دهد به‌صورت خودکار به تغییرات داده‌ها واکنش نشان دهند.
ماژول‌ها و کامپوننت‌ها: این فریم‌ورک از یک ساختار ماژولار استفاده می‌کند که کد را به واحدهای کوچک‌تر تقسیم می‌کند و نگهداری آن را ساده‌تر می‌کند.

در نهایت، Angular به عنوان یکی از محبوب‌ترین فریم‌ورک‌ها برای ساخت اپلیکیشن‌های وب شناخته می‌شود که توسط شرکت‌های بزرگ و پروژه‌های پیچیده استفاده می‌شود.

تاریخچه Angular (از AngularJS تا Angular مدرن)

AngularJS اولین نسخه از فریم‌ورک Angular بود که در سال 2010 منتشر شد. این نسخه به‌طور خاص برای ساخت برنامه‌های وب تک‌صفحه‌ای (SPA) طراحی شده بود و از JavaScript برای ساخت اپلیکیشن‌ها استفاده می‌کرد. با گذشت زمان و با گسترش نیاز به اپلیکیشن‌های پیچیده‌تر و مدرن‌تر، نیاز به فریم‌ورکی به‌روزتر و انعطاف‌پذیرتر احساس شد.

در نتیجه، Angular نسخه جدید این فریم‌ورک بود که در سال 2016 منتشر شد. این نسخه با استفاده از TypeScript طراحی شد که مزایای بسیاری از جمله تایپ ایمن، استفاده از قابلیت‌های OOP (برنامه‌نویسی شی‌گرا)، و امکان بهبود قابلیت‌های ابزارهای اشکال‌زدایی را به همراه داشت. علاوه بر این، Angular جدید نسبت به AngularJS بهبودهای قابل توجهی در عملکرد، ساختار کد و سهولت استفاده داشت.

Angular 2 و نسخه‌های بعدی آن اساساً یک فریم‌ورک جدید با معماری و ویژگی‌های کاملاً متفاوت از AngularJS بودند. با این حال، نام Angular همچنان به عنوان برند اصلی این فریم‌ورک باقی ماند.

تفاوت‌های اصلی بین AngularJS و Angular

اگرچه AngularJS و Angular هر دو جزء فریم‌ورک‌های توسعه وب هستند، اما تفاوت‌های زیادی در نحوه کارکرد آن‌ها وجود دارد که به طور عمده در زیر اشاره شده است:

زبان برنامه‌نویسی:

AngularJS: از JavaScript برای توسعه استفاده می‌کرد که به آن محدودیت‌هایی در قابلیت‌های برنامه‌نویسی پیچیده وارد می‌کرد.
Angular: به TypeScript تبدیل شده است. TypeScript یک زبان برنامه‌نویسی است که بر پایه JavaScript ساخته شده و ویژگی‌هایی مانند تایپ ایمن، کلاس‌ها و اینترفیس‌ها را به توسعه‌دهندگان ارائه می‌دهد که کدنویسی را آسان‌تر و خطاها را کاهش می‌دهد.

عملکرد:

AngularJS به دلیل استفاده از دوطرفه داده‌پردازی (two-way data binding) و تغییرات در مدل داده‌ها، عملکرد نسبتاً پایین‌تری داشت، به‌ویژه در پروژه‌های بزرگ.
Angular بهبودهای چشمگیری در عملکرد داشته است. به طور مثال، Angular از change detection بهینه‌شده‌ای استفاده می‌کند که باعث می‌شود داده‌ها سریع‌تر و بهینه‌تر به‌روزرسانی شوند.

ماژولار بودن و ساختار:

در AngularJS، هر چیزی به صورت یک فایل واحد و با ساختار ساده‌ای نگهداری می‌شد که در پروژه‌های بزرگ مشکلاتی به وجود می‌آورد.
در Angular، استفاده از ماژول‌ها (modules) و کامپوننت‌ها (components) باعث شده تا کدها به صورت ماژولار و قابل نگهداری درآیند. این ویژگی به شما این امکان را می‌دهد که پروژه‌ها را به بخش‌های کوچکتر تقسیم کنید و هر بخش را به‌صورت مستقل مدیریت کنید.

معرفی SPA (Single Page Application) و نقش Angular در آن

SPA (برنامه‌های تک‌صفحه‌ای) نوعی از برنامه‌ها هستند که در آن، همه تعاملات و عملیات‌ها در یک صفحه وب انجام می‌شود و هیچ‌گاه نیازی به بارگذاری مجدد صفحه نیست. در یک SPA، زمانی که کاربر با برنامه تعامل می‌کند، تنها بخش‌هایی از صفحه که نیاز به تغییر دارند، بارگذاری می‌شوند و به این ترتیب تجربه کاربری سریع‌تری فراهم می‌شود.

Angular به‌طور ویژه برای ساخت SPAها طراحی شده است. برخی از ویژگی‌های Angular که آن را برای توسعه SPA مناسب می‌کنند عبارتند از:

Routing: Angular به طور پیش‌فرض از Routing پشتیبانی می‌کند که به شما این امکان را می‌دهد که بدون بارگذاری مجدد صفحه، به بخش‌های مختلف برنامه بروید.
Data binding: Angular از یک‌طرفه و دوطرفه data binding برای همگام‌سازی خودکار داده‌ها و رابط کاربری استفاده می‌کند.
Services: Angular از سرویس‌ها برای ارسال درخواست‌ها و مدیریت داده‌ها استفاده می‌کند که به شما این امکان را می‌دهد که اطلاعات را به‌صورت دینامیک از سرور دریافت کرده و بدون نیاز به بارگذاری مجدد صفحه آن‌ها را نمایش دهید.

Angular برای ساخت و توسعه SPAها بهترین گزینه است زیرا به توسعه‌دهندگان این امکان را می‌دهد که برنامه‌هایی با کارایی بالا، رابط‌های کاربری روان و تجربه کاربری سریع بسازند.

ساختار پروژه Angular

درک ساختار پروژه Angular یکی از مهم‌ترین قدم‌ها برای شروع کار با این فریم‌ورک است. ساختار فایل‌ها به گونه‌ای طراحی شده که امکان مدیریت و نگهداری پروژه‌های بزرگ را فراهم می‌کند و به توسعه‌دهندگان کمک می‌کند تا کدها را به صورت مرتب، ماژولار و مقیاس‌پذیر سازماندهی کنند. در این بخش به بررسی ساختار فایل‌های پیش‌فرض در پروژه‌های Angular و توضیح نقش فایل‌های اصلی پروژه می‌پردازیم.

بررسی ساختار فایل‌های پروژه

وقتی شما یک پروژه Angular جدید ایجاد می‌کنید، ساختار فایل‌ها به‌طور پیش‌فرض به صورت زیر است:

/node_modules
/src
    /app
        app.component.ts
        app.module.ts
    /assets
    /environments
angular.json
package.json
tsconfig.json

/node_modules: این پوشه شامل تمام وابستگی‌های پروژه است که توسط npm (Node Package Manager) نصب می‌شود. این وابستگی‌ها شامل فریم‌ورک Angular، کتابخانه‌ها و سایر ابزارهای مورد استفاده در پروژه است. این پوشه به طور خودکار در زمان نصب پکیج‌ها ایجاد می‌شود و معمولاً نباید آن را تغییر دهید.

/src/app: این پوشه حاوی تمام کدهای برنامه شماست. شامل کامپوننت‌ها، ماژول‌ها، سرویس‌ها و سایر کدهای مرتبط با اپلیکیشن شما است. هر کامپوننت، سرویس یا ماژول به طور جداگانه در این پوشه قرار می‌گیرد. ساختار این پوشه به شما کمک می‌کند که کدهایتان را به صورت ماژولار و قابل نگهداری سازماندهی کنید.
app.component.ts: این فایل کامپوننت اصلی اپلیکیشن شماست که معمولاً برای مدیریت و نمایش محتوا در صفحه اصلی استفاده می‌شود.
app.module.ts: این فایل، ماژول اصلی اپلیکیشن را معرفی می‌کند و تمامی بخش‌های مختلف پروژه (مانند کامپوننت‌ها و سرویس‌ها) در این فایل مدیریت می‌شوند.

/assets: این پوشه برای ذخیره فایل‌های استاتیک مانند تصاویر، فایل‌های CSS، فونت‌ها و سایر منابعی است که ممکن است در پروژه شما استفاده شوند.

/environments: این پوشه معمولاً حاوی فایل‌هایی است که تنظیمات مربوط به محیط‌های مختلف پروژه (مثلاً محیط توسعه و محیط تولید) را نگهداری می‌کند. این فایل‌ها به شما کمک می‌کنند تا پیکربندی‌ها را برای محیط‌های مختلف به راحتی مدیریت کنید.

angular.json: این فایل پیکربندی اصلی پروژه Angular است که اطلاعات مربوط به ساخت، منابع، سرویس‌ها و مسیرهای فایل‌ها را نگهداری می‌کند. در این فایل می‌توانید تنظیمات مربوط به ورودی‌ها، خروجی‌ها و ابزارهای مورد استفاده در فرآیند ساخت پروژه را پیکربندی کنید.

package.json: این فایل حاوی اطلاعات مربوط به وابستگی‌ها، اسکریپت‌ها و پیکربندی‌های مختلف پروژه است. در این فایل می‌توانید پکیج‌های npm مورد نیاز پروژه و نسخه‌های مختلف آن‌ها را مشخص کنید.

tsconfig.json: این فایل پیکربندی TypeScript است که به کامپایلر TypeScript می‌گوید چگونه کدهای TypeScript را به کد جاوااسکریپت تبدیل کند. این فایل به شما این امکان را می‌دهد تا تنظیمات مربوط به پشتیبانی از TypeScript، تنظیمات کامپایلر و مسیرهای فایل‌ها را مدیریت کنید.

اهمیت فایل‌های main.ts، app.module.ts و angular.json

main.ts: این فایل نقطه شروع برنامه Angular شما است. هنگامی که اپلیکیشن راه‌اندازی می‌شود، فایل main.ts به عنوان ورودی اصلی عمل کرده و اپلیکیشن را با استفاده از Angular bootstrapped می‌کند. در این فایل معمولاً ماژول اصلی اپلیکیشن (که در ادامه توضیح داده می‌شود) بارگذاری می‌شود.

به‌طور خلاصه، در این فایل Angular از platformBrowserDynamic().bootstrapModule(AppModule) برای بارگذاری و شروع به کار ماژول اصلی استفاده می‌کند.

app.module.ts: در Angular، ماژول‌ها بخش‌های مختلف اپلیکیشن شما را مدیریت می‌کنند. AppModule ماژول اصلی پروژه است که در آن کامپوننت‌ها، سرویس‌ها، ماژول‌ها و سایر بخش‌های اپلیکیشن تعریف و مدیریت می‌شوند. این فایل نقطه مرکزی برای تمام بخش‌های برنامه است که باید در آن پیکربندی شوند. برای مثال، در این فایل ماژول‌هایی مانند BrowserModule، FormsModule، و دیگر ماژول‌ها برای استفاده در برنامه وارد می‌شوند.

به‌طور کلی، AppModule به Angular می‌گوید کدام کامپوننت‌ها و سرویس‌ها باید در برنامه بارگذاری شوند و نحوه ساختاردهی به آن‌ها را مشخص می‌کند.

angular.json: این فایل پیکربندی اصلی پروژه است که برای مدیریت تنظیمات مختلف از جمله ورودی‌ها، خروجی‌ها، و نحوه ساخت پروژه استفاده می‌شود. به عنوان مثال، مسیرهای فایل‌ها، تنظیمات مربوط به ابزارهایی مانند Webpack و نیز اطلاعات مربوط به محیط‌های مختلف (توسعه و تولید) در این فایل ذخیره می‌شود.

مفهوم AppModule و بوت‌استرپ اولیه

در Angular، AppModule به‌عنوان ماژول اصلی و قلب اپلیکیشن شما شناخته می‌شود. این ماژول مسئول مدیریت و بارگذاری تمامی بخش‌های برنامه است، مانند:

کامپوننت‌ها: هر صفحه یا بخش از برنامه شما در Angular معمولاً یک کامپوننت است.
خدمات (Services): این خدمات به اشتراک‌گذاری داده‌ها و منطق تجاری میان کامپوننت‌ها کمک می‌کنند.
ماژول‌ها: این ماژول‌ها به شما کمک می‌کنند که کدهای خود را به صورت سازماندهی‌شده و ماژولار نگهداری کنید.

در فرآیند بوت‌استرپ، فایل main.ts به‌طور خاص AppModule را بارگذاری کرده و اپلیکیشن را راه‌اندازی می‌کند. این فرآیند به شما این امکان را می‌دهد که به‌راحتی و بدون نیاز به رفرش مجدد صفحه، اپلیکیشن خود را به‌روز کنید و تعاملات را مدیریت کنید.

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

نصب و راه‌اندازی Angular

برای شروع کار با Angular، ابتدا باید فریم‌ورک Angular و ابزارهای مورد نیاز را نصب کنید. این کار از طریق Angular CLI (Command Line Interface) انجام می‌شود. Angular CLI یک ابزار قدرتمند و مفید است که توسعه‌دهندگان را قادر می‌سازد تا پروژه‌های Angular را به راحتی مدیریت، راه‌اندازی و نگهداری کنند. در این بخش، مراحل نصب و راه‌اندازی Angular و استفاده از دستورات CLI برای مدیریت پروژه توضیح داده خواهد شد.

نصب Angular CLI

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

برای نصب Angular CLI به صورت سراسری (global) روی سیستم خود، دستور زیر را در ترمینال وارد کنید:

npm install -g @angular/cli

این دستور Angular CLI را به طور جهانی بر روی سیستم شما نصب می‌کند. اگر از npm (Node Package Manager) استفاده نمی‌کنید، ابتدا باید آن را نصب کنید. پس از نصب موفق Angular CLI، می‌توانید از دستورات مختلف آن برای مدیریت پروژه‌های Angular خود استفاده کنید.

ایجاد یک پروژه جدید

پس از نصب Angular CLI، می‌توانید یک پروژه جدید Angular ایجاد کنید. برای انجام این کار، دستور ng new را به همراه نام پروژه وارد می‌کنید. برای مثال، برای ایجاد یک پروژه جدید به نام my-angular-app، دستور زیر را وارد کنید:

ng new my-angular-app

این دستور یک پوشه جدید به نام my-angular-app ایجاد می‌کند و تمام فایل‌ها و ساختار مورد نیاز برای یک پروژه Angular جدید را در آن قرار می‌دهد. هنگام اجرای این دستور، از شما خواسته می‌شود که برخی از گزینه‌ها را انتخاب کنید، از جمله انتخاب روش برای مدیریت فایل‌های CSS (CSS، SCSS، یا SASS) و تنظیمات اضافی مانند استفاده از Routing و تست‌ها.

پس از اتمام فرآیند، به پوشه پروژه جدید بروید:

cd my-angular-app

حالا شما آماده‌اید که کد نویسی و توسعه اپلیکیشن خود را آغاز کنید.

دستورات CLI برای مدیریت پروژه

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

ng serve: این دستور برای اجرای پروژه و مشاهده تغییرات به‌صورت زنده در مرورگر استفاده می‌شود. پس از اجرای دستور ng serve، پروژه شما در سرور محلی (معمولاً در http://localhost:4200) اجرا می‌شود و هر بار که تغییراتی در فایل‌ها ایجاد کنید، صفحه به‌طور خودکار رفرش می‌شود تا تغییرات را نمایش دهد.

دستور:

ng serve

این دستور به شما این امکان را می‌دهد که بلافاصله تغییرات را در مرورگر مشاهده کنید و روند توسعه بسیار سریع‌تر شود.

ng generate: این دستور برای ایجاد کامپوننت‌ها، سرویس‌ها، ماژول‌ها، و دیگر اجزای برنامه به‌صورت خودکار استفاده می‌شود. به عنوان مثال، برای ایجاد یک کامپوننت جدید به نام example، می‌توانید از دستور زیر استفاده کنید:

ng generate component example

یا به‌طور مخفف:

ng g c example

این دستور به‌طور خودکار فایل‌های مربوط به کامپوننت شامل HTML، CSS، TypeScript و تست‌ها را ایجاد کرده و در پوشه مناسب قرار می‌دهد. همچنین این دستور به‌طور خودکار کامپوننت را در app.module.ts ثبت می‌کند.

ng build: این دستور برای ساخت نسخه آماده به انتشار پروژه استفاده می‌شود. پس از انجام تمام تغییرات و توسعه پروژه، برای آماده‌سازی اپلیکیشن جهت استقرار در سرور، باید از دستور ng build استفاده کنید. این دستور کدهای اپلیکیشن را بهینه‌سازی کرده و فایل‌های مربوط به آن را در پوشه dist/ ایجاد می‌کند.

دستور:

ng build --prod

 

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

ng test: این دستور برای اجرای تست‌ها و اطمینان از عملکرد صحیح اپلیکیشن استفاده می‌شود. Angular از فریم‌ورک تست Karma برای اجرای تست‌ها استفاده می‌کند.

دستور:

ng test

این دستور تمام تست‌های پروژه را اجرا کرده و نتایج را در ترمینال یا مرورگر نمایش می‌دهد.

ng lint: این دستور برای بررسی کدهای پروژه و اعمال استانداردهای کدنویسی استفاده می‌شود. این ابزار به شما کمک می‌کند تا از نوشتن کدهای بی‌کیفیت و غیرمنظم جلوگیری کنید.

دستور:

ng lint

ng add: این دستور برای افزودن پکیج‌ها یا کتابخانه‌ها به پروژه استفاده می‌شود. مثلاً اگر بخواهید Angular Material را به پروژه خود اضافه کنید، از دستور زیر استفاده می‌کنید:

ng add @angular/material

این دستور پکیج را نصب کرده و تنظیمات مربوطه را به‌طور خودکار در پروژه شما اعمال می‌کند.

با نصب Angular CLI و استفاده از دستورات آن، شما می‌توانید به راحتی پروژه‌های Angular را ایجاد، توسعه و مدیریت کنید. دستورات CLI ابزارهای بسیار مفیدی هستند که به شما در توسعه سریع‌تر اپلیکیشن کمک می‌کنند. از ng serve برای مشاهده تغییرات در زمان واقعی گرفته تا ng generate برای ایجاد اجزای جدید، Angular CLI ابزارهایی قدرتمند است که کار با Angular را بسیار ساده‌تر می‌کند.

نتیجه‌گیری

در این مقاله، با مقدمه‌ای بر Angular آشنا شدیم و مراحل نصب، راه‌اندازی، و بررسی ساختار پروژه را به‌صورت کامل توضیح دادیم. Angular به عنوان یک فریم‌ورک قدرتمند و مدرن، ابزارهای جامعی برای توسعه برنامه‌های تک‌صفحه‌ای (SPA) ارائه می‌دهد و انتخابی ایده‌آل برای پروژه‌های پیچیده و پویا است. با یادگیری اصول اولیه این فریم‌ورک و استفاده از ابزارهایی مانند Angular CLI، می‌توانید به‌سرعت پروژه‌های خود را شروع کرده و آن‌ها را به‌طور حرفه‌ای مدیریت کنید.

اگرچه این مقاله تنها یک مقدمه‌ای بر Angular ارائه داد، یادگیری عمیق‌تر این فریم‌ورک نیازمند مطالعه و تمرین بیشتر است. شما می‌توانید با مراجعه به مستندات رسمی Angular و استفاده از منابع معرفی‌شده، دانش خود را گسترش دهید و مهارت‌های توسعه‌دهندگی خود را به سطح بالاتری برسانید.