رهام رفیعی تهرانی
رهام رفیعی تهرانی
خواندن ۲ دقیقه·۱ سال پیش

مرور ویژگی های Angular 17

نسخه جدید انگولار دو روز پیش ( 6th November ) منتشر شد. نسخه 17 قراره بترکونه

  • قراره راحت تر بشه و حجم learning curve رو برای تازه کارها تا حد زیادی کم کنه
  • قراره توسعه اپلیکیشن ها به صورت zoneless امکان پذیر بشه
  • قراره لودینگ های اولیه غیرضروری رو تا حد امکان کمتر کنه تا برنامه نویس ها بتونند تجربه بهتری رو برای کاربران اپلیکیشن هاشون فراهم کنند.

در این مقاله مهمترین تغییرات و ویژگی های جدیدش رو لیست کردم. یک تعداد منبع هم معرفی میکنم که ببینیم فیچرهای جدید چطوری کار میکنند.


فیچرهای جدید نسخه ۱۷:

  • مدل جدید declarative control flow
  • بلاک های deferred loading
  • پشتیبانی از View Transactions API برای انیمیشن بین صفحه ها
  • پشتیبانی از تعریف متنی component.styles
  • مدل lazy-loadable برای Angular Animation ها
  • پشتیبانی از TypeScript 5.2


تغییرات مهم نسخه ۱۷:

  • نسخه پایدار signal API رسیده
  • متاسفانه کامپوننت های signal-based به نسخه ۱۷ نرسید!
  • نشخه ۱۷ از Node 16 پشتیبانی نمیکنه و به نسخه Node 18 و بالاتر نیاز داره
  • برای dev server به صورت پیش فرض از Vite استفاده میشه


برای آشنایی با control flow میتونید اینجا رو مطالعه کنید

https://angular.dev/guide/templates/control-flow

  • رندر شرطی یا conditional ( @if, @else, @switch, @case and @default )
  • رندر لیست ها توسط @for و @empty

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


برای آشنایی بیشتر با بلاک @defer و موضوع deferred loading میتونید اینجا رو مطالعه کنید:

https://angular.dev/guide/defer


پشتیبانی از View Transition API

در مورد پشتیبانی از View Transition API میتونید مقاله Netanel Basal رو بخوانید.

https://netbasal.com/angular-v17s-view-transitions-navigate-in-elegance-f2d48fd8ceda


پشتیبانی از component styles ها به صورت متن

در واقع اتفاقی که افتاده اینه که شما میتونید در component decorator آدرس فایل یا محتوای استایل تون رو بجای آرایه ای از string ها، به صورت string تعریف کنید.


مدل lazy loading برای Angular animation ها

برای آشنایی با lazy loading در Angular Animation ها و آشنایی با providerAnimationAsync میتونید مقاله زیر رو بخوانید

https://riegler.fr/blog/2023-10-04-animations-async


این مقاله خلاصه ای از تغییرات نسخه ۱۷ انگولار هست. امیدوارم براتون مفید باشه.

اگر دوست دارید میتونید از طریق صفحه لینکدین با من در ارتباط باشید :)

angularانگولارfrontendآموزش انگولار
برنامه نویسی یک شغل نیست، یک هنره.
شاید از این پست‌ها خوشتان بیاید