تهیه شده توسط sajjadmaneshi.ir

انگولار – فریم وورک توسعه وب برای ساخت آینده

---

سرفصل های دوره

---

انگولار چیست؟

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

اگر دنبال ساخت اپلیکیشن‌های قدرتمند، مقیاس‌پذیر و حرفه‌ای هستی، به احتمال زیاد اسم Angular رو شنیدی.
اما واقعاً Angular چیست و چرا اینقدر محبوبه؟ این مقاله دقیق‌ترین راهنمایی هست که می‌تونی درباره Angular پیدا کنی – با توضیحات عمیق، مثال‌های کاربردی .

---

تاریخچه‌ای کوتاه از Angular

نسخه‌ی اولیه‌ی Angular که به اسم AngularJS شناخته می‌شد، در سال ۲۰۱۰ معرفی شد.
ین نسخه مبتنی بر JavaScript بود و هدف اصلیش ساخت اپلیکیشن‌های تک ‌صفحه‌ای (SPA) بود. اما با گذشت زمان، تیم توسعه‌دهنده به این نتیجه رسید که بازنویسی کامل فریمورک ضروریه. نتیجه‌ی این بازنویسی، انتشار Angular 2 در سال ۲۰۱۶ بود --- که با typescript نوشته شد و از اون به بعد، با نام Angular شناخته می‌شه (بدون پسوند JS).
از اون موقع به بعد، Angular به‌صورت منظم با انتشار نسخه‌های جدید در حال بهبود و ارتقاست.
آخرین نسخه‌ی پایدار این فریمورک، Angular 20 هست (تا زمان نگارش این مقاله).

---

تفاوت Angular با AngularJS

• AngularJS (نسخه 1.x) بر اساس JavaScript ساخته شده بود و از سال 2010 توسعه داده شد.

• Angular (نسخه 2 به بعد) کاملاً بازنویسی شده و با TypeScript توسعه پیدا کرده و ساختار جدیدی داره.

توجه: AngularJS از ژانویه 2022 رسماً به پایان عمر خودش رسید و دیگه پشتیبانی نمی‌شه.
پس بهتره مستقیم سراغ Angular جدید بری!

---

یک مثال ساده از یک کامپوننت در Angular

                      
// app.component.ts
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
template: `<h1>سلام به دنیای Angular!</h1>`,
styles: [`h1 { color: blue; }`]
})
export class AppComponent {}
                      
                    

💡 در اینجا:

• :selector نام تگ HTML برای این کامپوننت

• : template ساختار نمایشی HTML

• : styles استایل داخلی

---

مهم‌ترین قابلیت‌های Angular

🔃 Data Binding

اتصال بین داده و رابط کاربری به‌صورت خودکار و زنده انجام میشه. انواع Binding:

• Interpolation :{{ name }}

• Property Binding : [src]="imagePath"

• Event Binding : (click)="onClick()"

• two-way Binding : [(ngModel)]="userName"

---

🧠 Dependency Injection

Angular دارای سیستم DI داخلی هست. به جای ساخت مستقیم سرویس‌ها، Angular اون‌ها رو تزریق می‌کنه.

مثال :

                         
constructor(private userService: UserService) {}
//OR
private userService = inject(UserService)
                      
                    

---

🌐 Routing

Angular برای اپلیکیشن‌های SPA از سیستم مسیردهی داخلی استفاده می‌کنه.

مثال :

                         
const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];
                      
                    

---

📊 RxJS و Observables

Angular برای اپلیکیشن‌های SPA از سیستم مسیردهی داخلی استفاده می‌کنه.

مثال :

                         
this.http.get('api/users').subscribe(data => {
  this.users = data;
});
                    

---

ویژگی	Angular	React	Vue
نوع ابزار	فریمورک کامل	کتابخانه	فریمورک
زبان اصلی	TypeScript	JavaScript/TS	JavaScript
ساختار دهی	Opinionated	آزاد	نیمه‌ساختار یافته
یادگیری	نسبتاً سخت‌تر	آسان‌تر	بسیار آسان
جامعه و پشتیبانی	خیلی قوی	بسیار قوی	متوسط

---

---

موارد استفاده از Angular

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

• اپلیکیشن‌های تک‌صفحه‌ای (SPA)
• پنل‌های مدیریتی و داشبوردها
• اپلیکیشن‌های پیچیده شرکتی (Enterprise apps)
• وب‌اپلیکیشن‌های مترقی (PWA)
• پروژه‌هایی با تیم‌های بزرگ که نیاز به ساختار و مقیاس‌پذیری دارن

---

مثالی از control flow

رندر شرطی ( @if, @else, @switch, @case and @default )

                            
@if (a > b) {
  {{a}} is greater than {{b}}
} @else if (b > a) {
  {{a}} is less than {{b}}
} @else {
  {{a}} is equal to {{b}}
}
                            
                        

رندر لیست ها توسط @for و @empty

                            
@for (item of items; track item.name) {
  
 {{ item.name }} 
} @empty {
  
 There are no items. 
}
                            
                        

مهم ترین مزیت این بلاک ها این است که خارج از zone پشتیبانی میشوند. در واقع استفاده از zone در انگولار کمرنگ تر و کمرنگ تر میشود

برای آشنایی بیشتر با View Transaction Api می توانید مقاله زیر را مطالعه کنید

مطالعه مقاله

---

جمع‌بندی: آیا Angular برای تو مناسبه؟

---

یادگیری انگولار

انگولار فریموورک مناسبی برای یادگیری فرانت اند می باشد , با وجود پیچیدگی هایی که دارد اما مسیر راه روشن و مشخصی دارد , منابع انگلیسی برای این فریموورک زیاد میش باشد اما متاسفانه منبع فارسی مناسبی وجود ندارد. اما جای نگرانی ندارد ما یک دوره فارسی انگولار برای شما تدارک دیده ایم که از طریق لینک زیر میتوانید ثبت نام کنید.

ثبت نام دوره فارسی انگولار