آموزش انگولار جلسه ۱۰ — Angular 17 و کنترل جریان جدید (Control Flow Syntax)

از نسخه‌ی Angular 17 یک سیستم کاملاً جدید برای کنترل جریان (Control Flow) معرفی شد که جایگزین ساختار قدیمی *ngIf ، *ngFor و *ngSwitch می‌شود.
این ساختار جدید:

• سریع‌تر است (Compile-time)
• خواناتر است
• خطای کمتری ایجاد می‌کند
• nested کردن را بسیار ساده‌تر می‌کند
• از Blockهای مستقل استفاده می‌کند

در این جلسه تمام قابلیت‌ها را با مثال‌های واقعی بررسی می‌کنیم.

۱. چرا Angular کنترل جریان را تغییر داد؟

در ساختار قدیمی:

• لازم بود جلوی هر دستور علامت * بزنیم
• تودرتو کردن کدها سریع بهم می‌ریخت
• بازنویسی مکرر کلمات کلیدی آزاردهنده بود
• مجبور بودیم از <ng-container> زیاد استفاده کنیم

مثلاً:

<div *ngIf="user; else noUser">
  <div *ngFor="let item of user.items">

اما ساختار جدید تمام این مشکلات را اصلاح کرد و دستورات شبیه زبان‌های مدرن (Swift، Rust) شدند.

۲. دستور جدید @if در Angular 17

نسخه جدید (مورد توصیه Angular)

@if (isLoggedIn) {
  <p>Welcome!</p>
} @else {
  <p>Please log in</p>
}

نسخه قدیمی (Deprecated)

<p *ngIf="isLoggedIn; else noLogin">Welcome!</p>
<ng-template #noLogin>Please log in</ng-template>

مزایا:

• خوانایی بهتر
• حذف ng-template
• پشتیبانی از چندین حالت @else if

مثال:

@if (score > 90) {
  <p>A</p>
} @else if (score > 80) {
  <p>B</p>
} @else {
  <p>Try harder</p>
}

۳. ساختار جدید @for (جایگزین ngFor)

نسخه جدید:

@for (user of users; track user.id) {
  <p>{{ user.name }}</p>
}

نسخه قدیمی:

<div *ngFor="let user of users; trackBy: trackUser">

مزایای دستور جدید:

• سریع‌تر (compile-time)
• بدون نیاز به trackBy توابع جداگانه
• امکان استفاده از بلاک @empty

مثال کامل:

@for (product of products; track product.id) {
  <div>{{ product.title }}</div>
} @empty {
  <p>No products available.</p>
}

۴. کنترل جریان جدید @switch

نسخه جدید:

@switch (status) {
  @case ('success') { <p>Done!</p> }
  @case ('error') { <p>Error happened</p> }
  @default { <p>Loading…</p> }
}

مزایا:

• حذف ng-containerهای تودرتو
• کاملاً شبیه switch در زبان‌های برنامه‌نویسی

۵. بلاک جدید @let (جایگزین let در ng-template)

این دستور برای تعریف متغیرهای محلی بسیار مفید است.

مثال:

@let user = selectedUser();

@if (user) {
  <p>Name: {{ user.name }}</p>
}

یا:

@let fullName = firstName + " " + lastName;

<p>{{ fullName }}</p>

۶. مقایسه سریع ساختار قدیم و جدید

۷. مثال عملی کامل: لیست کاربران

نسخه Angular 17:

@for (user of users; track user.id) {
  <div class="card">
    @if (user.isActive) {
      <span class="active">●</span>
    } @else {
      <span class="inactive">○</span>
    }

    <strong>{{ user.name }}</strong>

    @switch (user.role) {
      @case ('admin') { <small>Administrator</small> }
      @case ('writer') { <small>Writer</small> }
      @default { <small>User</small> }
    }
  </div>
} @empty {
  <p>No users found</p>
}

۸. نکات مهم برای پروژه‌ها

• ساختار قدیمی هنوز کار می‌کند اما deprecated شده
• توصیه رسمی Angular این است که از ساختار جدید استفاده شود
• تمام Template DSL جدید در SSR هم سریع‌تر است
• برای پروژه‌های آموزشی استفاده از این ساختار الزامی است
• در Standalone Components کاملاً سازگار و تمیزتر است

۹. تمرین (برای دانشجوها)

تمرین ۱:

یک لیست Todos بسازید که:

• با @for رندر شود
• با @if وضعیت Done نمایش داده شود
• با @switch رنگ هر todo تنظیم شود
• اگر لیست خالی بود، @empty پیغام بدهد

تمرین ۲:

یک <select> بسازید که نقش کاربر را انتخاب کند و با @switch پیام مناسب نشان دهد.

۱۰. جمع‌بندی جلسه

در این جلسه یاد گرفتیم:

• Angular 17 سیستم جدید کنترل جریان را معرفی کرده
• این سیستم سریع‌تر، تمیزتر و قابل‌خواندن‌تر است
• دستورهای جدید شامل:
• @if, @else, @else if
• @for و بلاک @empty
• @switch, @case, @default
• @let
• این ساختار جایگزین کامل *ngIf, *ngFor, *ngSwitch می‌شود
• برای پروژه‌های جدید باید از بلوک‌های جدید استفاده شود

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

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