در این جلسه با فریمورک Angular آشنا میشویم، معماری آن را بررسی میکنیم و میبینیم چرا Angular یکی از قدرتمندترین ابزارها برای توسعه برنامههای وب مدرن است.
مقدمه
Angular یکی از محبوبترین فریمورکهای Frontend است که توسط شرکت Google توسعه داده شده و برای ساخت Single Page Application (SPA) استفاده میشود.
در سالهای اخیر Angular تغییرات مهمی داشته است و نسخههای جدید آن (از Angular 17 به بعد) با معماری مدرنتری ارائه شدهاند. مهمترین تغییر این نسخهها معرفی Standalone Components و سادهتر شدن ساختار پروژه است.
در این دوره قصد داریم Angular را از پایه تا سطح پیشرفته یاد بگیریم و در طول مسیر یک پروژه واقعی نیز پیادهسازی کنیم.
در این دوره چه چیزهایی یاد میگیریم؟
در این دوره به صورت کامل با مفاهیم زیر آشنا میشوید:
- نصب و راهاندازی Angular
- ساختار پروژه Angular
- Componentها و Templateها
- Data Binding
- Lifecycle Hooks
- Routing در Angular
- کار با فرمها
- ارتباط با API
- RxJS و مدیریت دادهها
- ساخت پروژه واقعی با Angular
هدف این دوره این است که بعد از پایان آن بتوانید یک پروژه واقعی Frontend با Angular طراحی و پیادهسازی کنید.
Angular چیست؟
Angular یک فریمورک توسعه Frontend مبتنی بر TypeScript است که برای ساخت برنامههای وب مدرن استفاده میشود.
برخلاف کتابخانههایی مثل React که بیشتر روی UI تمرکز دارند، Angular یک فریمورک کامل است و امکانات زیادی را به صورت پیشفرض در اختیار توسعهدهندگان قرار میدهد.
برخی از قابلیتهای Angular:
- معماری Component-Based
- سیستم Routing داخلی
- Dependency Injection
- مدیریت فرمها
- ابزارهای قدرتمند برای تست
- ارتباط ساده با API
به همین دلیل Angular گزینه بسیار مناسبی برای پروژههای بزرگ و سازمانی محسوب میشود.
معماری Angular چگونه است؟
Angular بر اساس Component-Based Architecture طراحی شده است.
یعنی رابط کاربری برنامه به بخشهای کوچکتری به نام Component تقسیم میشود.
برای مثال یک صفحه فروشگاه اینترنتی میتواند شامل این بخشها باشد:
- Header
- Sidebar
- Product List
- Product Card
- Footer
هر کدام از این بخشها یک Component مستقل هستند.
مزایای این معماری:
- خوانایی بهتر کد
- نگهداری آسانتر پروژه
- امکان استفاده مجدد از کامپوننتها
- توسعه سریعتر پروژه
Component در Angular چیست؟
Component مهمترین بخش Angular است.
هر کامپوننت معمولاً از سه بخش تشکیل شده است:
- Template (HTML) → ساختار ظاهری
- Logic (TypeScript) → منطق برنامه
- Style (CSS) → استایل
نمونه یک کامپوننت ساده:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<h1>Hello Angular</h1>`
})
export class AppComponent {}در این مثال یک کامپوننت ساده ساخته شده که یک عنوان را در صفحه نمایش میدهد.
معماری Standalone در Angular 17
در نسخههای قدیمی Angular تمام کامپوننتها باید داخل NgModule تعریف میشدند.
اما از Angular 14 به بعد مفهوم Standalone Components معرفی شد و در Angular 17 این معماری به شکل گستردهتری استفاده میشود.
در این معماری میتوان کامپوننتها را بدون استفاده از Module تعریف کرد.
مثال:
@Component({
selector: 'app-home',
standalone: true,
template: `<h1>Home Page</h1>`
})
export class HomeComponent {}مزایای معماری Standalone:
- کاهش پیچیدگی پروژه
- سادهتر شدن ساختار فایلها
- یادگیری آسانتر Angular
- توسعه سریعتر برنامه
در این دوره ما از همین معماری مدرن استفاده خواهیم کرد.
پروژهای که در این دوره میسازیم
در طول این دوره یک پروژه فروشگاه آنلاین را به صورت قدمبهقدم پیادهسازی میکنیم.
در این پروژه با موارد زیر کار خواهیم کرد:
- نمایش لیست محصولات
- دستهبندی محصولات
- صفحه جزئیات محصول
- ارتباط با API
- مدیریت فرمها
- مدیریت state
برای شبیهسازی Backend نیز از یک Fake API با PHP و فایل JSON استفاده خواهیم کرد.
جمعبندی جلسه
در این جلسه با Angular آشنا شدیم و دیدیم که این فریمورک چگونه برای ساخت برنامههای وب مدرن استفاده میشود.
همچنین با معماری Component-Based و مفهوم Standalone Components در Angular 17 آشنا شدیم.
دسترسی به ویدیوهای کامل دوره
برای مشاهده ویدیوهای کامل هر جلسه، دریافت تمرینها، فایلها و پشتیبانی، میتوانید دوره کامل را تهیه کنید.
اگر این آموزش برای شما مفید بود میتوانید با خرید دوره کامل Angular به تمام جلسات و ویدیوهای آموزشی دسترسی داشته باشید.
