⭐Angular 17 ویژگی ⭐ – انجمن DEV

Summarize this content to 400 words in Persian Lang
سلام،

نسخه 17.0.0 اینجا است و دارای به روز رسانی های عالی برای توسعه دهندگان Angular در همه جا است. 🎉🎉

✅ هویت آینده‌نگر

✅ جریان کنترل داخلی

✅نماهای معوق

✅ تجربه رندر هیبریدی بازسازی شده

✅ پکیج جدید @angular/ssr

✅ قلاب چرخه عمر جدید

✅ پیش فرض پروژه های جدید را مشاهده و esbuild کنید

✅ اشکال زدایی تزریق وابستگی در DevTools

✅ بهبود تجربه توسعه دهندگان

برای اطلاعات دقیق و راهنمایی به update.angular.io مراجعه کنید. برای داشتن بهترین تجربه به روز رسانی،

به روز رسانی به 17

ng update @angular/cli @angular/core

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

برای به‌روزرسانی زاویه‌ای جهانی،

npm i -g @angular/cli

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این نسخه چیست؟

✅ هویت آینده‌نگر

با Angular 17، توسعه دهندگان اکنون می توانند به یک پلتفرم اسناد به روز شده در angular.dev دسترسی داشته باشند

وب سایت جدید دارای ساختار جدید، راهنماهای جدید، محتوای بهبود یافته است و بستری برای یک سفر یادگیری تعاملی ساخته است که به شما امکان می دهد Angular و Angular CLI را با سرعت خود و مستقیماً در مرورگر یاد بگیرید.
در حال حاضر در پیش نمایش بتا قرار دارد و قصد دارد آن را به وب سایت پیش فرض Angular در نسخه 18 تبدیل کند.
اطلاعات بیشتر در مورد آن را اینجا بخوانید 👉 پست وبلاگ

✅ جریان کنترل داخلی

جریان کنترل داخلی در نسخه 17 تحت پیش‌نمایش توسعه‌دهنده امروز در دسترس است!
Angular 17 یک ساختار قالب بلوک جدید را معرفی می کند که با ارائه ویژگی های قدرتمند تجربه توسعه دهنده را بهبود می بخشد.
یک نحو قالب بلوک جدید که ویژگی‌های قدرتمندی را با APIهای ساده و آشکار به شما می‌دهد منتشر شد
در زیر هود، کامپایلر Angular، نحو را به دستورالعمل های جاوا اسکریپت کارآمد تبدیل می کند که می تواند جریان کنترل، بارگذاری تنبل و موارد دیگر را انجام دهد.
جریان کنترل داخلی این امکان را فراهم می کند:

نحو ارگونومیک بیشتر که به جاوا اسکریپت نزدیکتر است، بنابراین بصری تر است و نیاز به جستجوی اسناد کمتری دارد.
بررسی نوع بهتر به لطف باریک کردن بهینه نوع
این مفهومی است که عمدتاً در زمان ساخت وجود دارد، که ردپای زمان اجرا را کاهش می‌دهد (که باعث ناپدید شدن آن می‌شود) که می‌تواند اندازه بسته شما را تا 30 کیلوبایت کاهش دهد و امتیازات Core Web Vital شما را بیشتر بهبود بخشد.
این به طور خودکار در قالب های شما بدون واردات اضافی در دسترس است

✅ اظهارات مشروط

<div *ngIf=”loggedIn; else anonymousUser”>
The user is logged in
</div>
<ng-template #anonymousUser>
The user is not logged in
</ng-template>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

با دستور if داخلی، این شرط به صورت زیر خواهد بود:

@if (loggedIn) {
The user is logged in
} @else {
The user is not logged in
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

امکان ارائه مستقیم محتوا برای @else یک ساده‌سازی بزرگ در مقایسه با بند else از جایگزین *ngIf است.
جریان کنترل فعلی نیز داشتن @else if را بی اهمیت می کند، که از نظر تاریخی غیرممکن بوده است.
ارگونومی بهبود یافته با *ngSwitch حتی بیشتر قابل مشاهده است:

[ngSwitch]=”accessLevel”>
*ngSwitchCase=”admin”/>
*ngSwitchCase=”moderator”/>
*ngSwitchDefault/>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

که با جریان کنترل داخلی تبدیل به:

@switch (accessLevel) {
@case (‘admin’) { }
@case (‘moderator’) { }
@default { }
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

جریان کنترل جدید، باریک‌سازی قابل‌توجهی بهتری را در شاخه‌های جداگانه در @switch امکان‌پذیر می‌کند که در *ngSwitch امکان‌پذیر نیست.

✅ حلقه داخلی

@for (user of users; track user.id) {
{{ user.name }}
} @empty {
Empty list of users
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ما اغلب به دلیل عدم وجود عملکرد trackBy در *ngFor مشکلات عملکردی را در برنامه ها می بینیم.
چند تفاوت در @for این است که آهنگ برای اطمینان از عملکرد تغییر سریع اجباری است.
علاوه بر این، استفاده از آن بسیار ساده‌تر است، زیرا فقط یک عبارت است تا یک متد در کلاس مؤلفه.
حلقه for داخلی داخلی همچنین دارای یک میانبر برای مجموعه هایی با آیتم های صفر از طریق یک بلوک @empty اختیاری است.
دستور @for از یک الگوریتم جدید متفاوت استفاده می‌کند و در مقایسه با *ngFor پیاده‌سازی بهینه‌تری دارد، که باعث می‌شود زمان اجرا تا 90 درصد برای معیارهای چارچوب جامعه سریع‌تر شود!

✅نماهای معوق

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

@defer (on viewport) {

} @loading {
Loading…
} @error {
Loading failed 🙁
} @placeholder {
src=”comments-placeholder.png”>
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

پیچیدگی زیادی در زیر کاپوت وجود دارد که Angular برای شما مدیریت می کند.

نماهای معوق چند محرک دیگر ارائه می دهند:

در حالت بیکار – زمانی که مرورگر هیچ کار سنگینی انجام نمی دهد، بلوک را با تنبلی بارگذاری کنید
در فوری – بدون مسدود کردن مرورگر، بارگیری خودکار را با تنبلی شروع کنید
روی تایمر() – تاخیر در بارگیری با تایمر

در viewport و در viewport() – viewport همچنین اجازه می دهد تا یک مرجع برای یک عنصر لنگر تعیین کنید. هنگامی که عنصر لنگر قابل مشاهده است، Angular با تنبلی کامپوننت را بارگذاری می کند و آن را رندر می کند
on interaction و on interaction() – شما را قادر می سازد تا زمانی که کاربر با یک عنصر خاص تعامل دارد، بارگذاری تنبل را آغاز کنید.
on hover و on hover() – وقتی کاربر یک عنصر را شناور می‌کند، بارگذاری تنبل را راه‌اندازی می‌کند
When — شما را قادر می سازد تا شرایط خود را از طریق یک عبارت بولی مشخص کنید

نماهای معوق همچنین امکان واکشی اولیه وابستگی ها را قبل از رندر کردن آنها فراهم می کند.
افزودن واکشی اولیه به سادگی افزودن یک دستور prefetch به بلوک defer است و از همه محرک‌های مشابه پشتیبانی می‌کند.

@defer (on viewport; prefetch on idle) {
/>
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

✅ تجربه رندر هیبریدی بازسازی شده

Angular 17 یک تجربه رندر هیبریدی احیا شده را به ارمغان می آورد و پشتیبانی از رندر سمت سرور (SSR) و تولید سایت استاتیک (SSG) را ارائه می دهد.

✅ پکیج جدید @angular/ssr

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

ng add @angular/ssr

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

✅ قلاب چرخه عمر جدید

2 قلاب چرخه زندگی جدید در این نسخه معرفی شده است

afterRender – یک تماس برگشتی ثبت کنید تا هر بار که برنامه به پایان می رسد، فراخوانی شود
afterNextRender – یک تماس برگشتی ثبت کنید تا دفعه بعد که برنامه رندر به پایان می رسد فراخوانی شود

فقط مرورگر این قلاب ها را فراخوانی می کند، که به شما امکان می دهد منطق DOM سفارشی را به طور ایمن مستقیماً به اجزای خود متصل کنید.

✅ پیش فرض پروژه های جدید را مشاهده و esbuild کنید

تجربه ساخت esbuild plus Vite به طور پیش‌فرض برای همه برنامه‌های جدید فعال است
فواید

بهبود 67 درصدی در زمان ساخت.
بهبود سرعت 87٪ با SSR و SSG.
یک فرآیند ساخت سبک و کارآمد.

✅ اشکال زدایی تزریق وابستگی در DevTools

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

بر اساس این APIها، ما یک رابط کاربری بازرسی ایجاد کردیم که به شما امکان می دهد پیش نمایش موارد زیر را مشاهده کنید:

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

✅ بهبود تجربه توسعه دهندگان

مقدار ورودی تبدیل می شود

یک الگوی رایج داشتن یک جزء است که ورودی بولی را دریافت می کند.
با این حال، این محدودیت هایی را برای نحوه ارسال یک مقدار به چنین مؤلفه ای ایجاد می کند.
برای مثال اگر تعریف زیر را از یک جزء Expander داشته باشیم:

@Component({
standalone: true,
selector: ‘my-expander’,
template: `…`
})
export class Expander {
@Input() expanded: boolean = false;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

expanded/>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

شما یک خطا دریافت خواهید کرد که “رشته قابل انتساب به boolean نیست”.
تبدیل مقدار ورودی به شما امکان می دهد این مشکل را با پیکربندی دکوراتور ورودی برطرف کنید:

@Component({
standalone: true,
selector: ‘my-expander’,
template: `…`
})
export class Expander {
@Input({ transform: booleanAttribute }) expanded: boolean = false;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

Style و styleUrls به عنوان رشته

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

@Component({
styles: [`
…
`] })

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

@Component({
styleUrls: [‘styles.css’] })

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

به ساده تر و منطقی تر

@Component({
styles:“
})

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

@Component({
styleUrl: ‘styles.css’
})

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

برای اطلاعات بیشتر اجازه دهید آن را از سازندگان بشنویم

اعتبار: اطلاعیه رسمی 😄

Changelog: مخزن

ng update @angular/cli @angular/core

npm i -g @angular/cli

<div *ngIf="loggedIn; else anonymousUser">
  The user is logged in
</div>
<ng-template #anonymousUser>
  The user is not logged in
</ng-template>

@if (loggedIn) {
  The user is logged in
} @else {
  The user is not logged in
}

 [ngSwitch]="accessLevel">
   *ngSwitchCase="admin"/>
   *ngSwitchCase="moderator"/>
   *ngSwitchDefault/>

@switch (accessLevel) {
  @case ('admin') {  }
  @case ('moderator') {  }
  @default {  }
}

@for (user of users; track user.id) {
  {{ user.name }}
} @empty {
  Empty list of users
}

@defer (on viewport) {
  
} @loading {
  Loading…
} @error {
  Loading failed :(
} @placeholder {
   src="comments-placeholder.png">
}

@defer (on viewport; prefetch on idle) {
   />
}

ng add @angular/ssr

@Component({
  standalone: true,
  selector: 'my-expander',
  template: `…`
})
export class Expander {
  @Input() expanded: boolean = false;
}

 expanded/>

@Component({
  standalone: true,
  selector: 'my-expander',
  template: `…`
})
export class Expander {
  @Input({ transform: booleanAttribute }) expanded: boolean = false;
}

@Component({
  styles: [`
    ...
  `]
})

@Component({
  styleUrls: ['styles.css']
})

@Component({
  styles:``
})

@Component({
  styleUrl: 'styles.css'
})