موارد جدید در Angular 18

از زمانی که من منتشر کردم

تیم Angular نسخه اصلی جدید را منتشر کرد: Angular 18.

🎯تغییرات و ویژگی های جدید

در این مقاله، مهم‌ترین تغییرات و ویژگی‌های جدید را فهرست می‌کنم، همچنین منابعی را به اشتراک می‌گذارم که نحوه عملکرد این ویژگی‌های جدید Angular را به شما آموزش می‌دهند:

• سینتکس جریان کنترل و بلوک‌های تعویق اکنون پایدار هستند
• Angular Material 3 اکنون پایدار است، material.angular.io با مضامین و اسناد جدید به روز می شود
• تشخیص تغییرات تجربی بدون ZoneJS: provideZonelessChangeDetection
• رویدادهای تغییر حالت کنترل یکپارچه
• محتوای بازگشتی برای ng-content
• توابع تغییر مسیر مسیر
• ادغام به طور پیش فرض فعال است
• HttpClientModule منسوخ شدن
• پشتیبانی از Typescript 5.4

اکنون angular.dev وب سایت رسمی اسناد Angular است.

📌تشخیص تغییرات تجربی بدون ZoneJS: provideZonelessChangeDetection

اسناد رسمی: Angular بدون ZoneJS (Zoneless)
درخواست ادغام / تعهد: feat(core): ارائه دهنده تشخیص تغییر بدون ناحیه را به عنوان آزمایشی اضافه کنید

Angular 18 یک راه جدید و بدون منطقه برای شناسایی تغییرات معرفی می کند. هنگام استفاده از provideExperimentalZonelessChangeDetection، Angular از Angular API برای زمانبندی تشخیص تغییرات استفاده خواهد کرد، از جمله:

• ChangeDetectorRef.markForCheck
• ComponentRef.setInput
• به روز رسانی سیگنالی که در یک الگو خوانده می شود
• هنگامی که شنوندگان میزبان یا الگو فعال می شوند
• هنگام پیوست کردن نمایی که با یکی از موارد بالا کثیف مشخص شده است
• هنگام حذف یک نما
• هنگام ثبت رندر هوک (الگوها فقط در صورتی به روز می شوند که قلاب های رندر یکی از موارد بالا را انجام دهند)

می توانید تشخیص تغییر بدون ناحیه را با جدید امتحان کنید provideExperimentalZonelessChangeDetection ارائه دهنده، و اجزای مورد استفاده OnPush استراتژی تشخیص تغییر:

 bootstrapApplication(App, { 
   providers: [
     provideExperimentalZonelessChangeDetection(),
   ]
 });

Angular CDK و Angular Material نیز معرفی شده دارای پشتیبانی بدون زون هستند.

📌رویدادهای تغییر حالت کنترل یکپارچه

اسناد رسمی: AbstractControl.events
درخواست ادغام / تعهد: شاهکار (فرم): رویدادهای تغییر حالت کنترل یکپارچه

در Angular 18، AbstractControl کلاس (کلاس پایه برای FormControl، FormGroup، و FormArray) جدید معرفی کرد events: Observable> ویژگی. این ویژگی قابل مشاهده است که برای تغییرات ارزش، وضعیت، بکر یا لمس منتشر می شود.

اگر روی فیلد ورودی در مثال کلیک کنید، یک کاراکتر وارد کنید، سپس خارج از فیلد ورودی کلیک کنید، رویدادهای زیر در کنسول مرورگر ثبت می‌شوند:

PristineChangeEvent {pristine: false, source: FormControl2}
ValueChangeEvent {value: 'a', source: FormControl2}
StatusChangeEvent {status: 'VALID', source: FormControl2}
TouchedChangeEvent {touched: true, source: FormControl2}

📌محتوای بازگشتی برای ng-content

اسناد رسمی: نمایش محتوا با ng-content
درخواست ادغام / تعهد: feat(core): پشتیبانی از محتوای بازگشتی را در ng-content اضافه کنید

در Angular 18، می‌توانیم یک محتوای بازگشتی برای آن مشخص کنیم ، این محتوا زمانی ارائه می شود که محتوایی برای نمایش در مؤلفه والد مشخص نشده باشد:

@Component({  
  selector: 'app-header',  
  template: `  
    Default tilte  
    There is no explanation for this title  
  `,  
})  
export class HeaderComponent {}

@Component({  
  selector: 'app-wrapper',  
  template: `  
      
      First chapter  
    
  `,  
})  
export class WrapperComponent {}

این اجزا به صورت زیر ارائه می شوند:

  
     class="title">First chapter
    There is no explanation for this title  
  

📌توابع تغییر مسیر مسیر

اسناد رسمی: وظایف رایج روتر: تنظیم تغییر مسیرها
درخواست ادغام / تعهد: feat(router): اجازه می دهد تا Route.redirectTo تابعی باشد که یک رشته یا UrlTree را برمی گرداند.

در Angular 18، یک مسیر redirectTo ویژگی می تواند تابعی باشد که یک رشته یا UrlTree، ما را قادر می سازد تا تغییر مسیرهای پویاتری بر اساس وضعیت برنامه ایجاد کنیم:

export const routes: Routes = [
  // ...,
  {
    path: "prods", //legacy path
    redirectTo: ({ queryParams }) => {
      const productId = queryParams['id'];      
      if (productId) {
        return `/products/${productId}`;
      } else {
        return `/`;
      }
    }
  },
  // ...,
];

📌Coalescing به طور پیش فرض فعال است

اسناد رسمی: NgZoneOptions

با شروع از Angular 18، ادغام منطقه به طور پیش فرض فعال است (eventCoalescing: true) برای برنامه های جدید ایجاد شده. ادغام منطقه می تواند تعداد چرخه های تشخیص تغییر را کاهش دهد و عملکرد برنامه را بهبود بخشد.

📌HttpClientModule منسوخ شدن

درخواست ادغام / تعهد: refactor(http): منسوخ کردن HttpClientModule و ماژول های مرتبط، شماتیک های مهاجرت برای HttpClientModule

با شروع نسخه 18، روش ارجح برای ارائه سرویس گیرنده HTTP هستند provideHttpClient() و provideHttpClientTesting(). HttpClientModule و HttpClientTestingModule اکنون منسوخ شده اند.

وقتی می دوی ng update @angular/core، Angular می تواند به طور خودکار کد شما را برای استفاده از ترجیح داده منتقل کند provideHttpClient() و provideHttpClientTesting() به جای ماژول های منسوخ عمل می کند.

📌پشتیبانی از تایپ اسکریپ 5.4

درخواست ادغام / تعهد: feat(compiler-cli): پشتیبانی از TypeScript قدیمی‌تر از 5.4 را حذف کنید

دانیل روزنواسر جالب‌ترین ویژگی‌های جدید Typescript 5.4 را در اطلاعیه خود برجسته کرد:

• باریک شدن حفظ شده در بسته های پس از آخرین تکالیف
• را NoInfer نوع سودمند
• Object.groupBy و Map.groupBy
• پشتیبانی از require() تماس می گیرد --moduleResolution bundler و --module preserve
• ویژگی ها و ادعاهای واردات بررسی شد
• رفع سریع برای اضافه کردن پارامترهای از دست رفته
• پشتیبانی از واردات خودکار برای واردات Subpath

👨‍💻درباره نویسنده

نام من Gergely Szerovay است، من سال‌ها به‌عنوان یک دانشمند داده و توسعه‌دهنده فول استک کار کرده‌ام، و به‌عنوان سرپرست فناوری frontend کار کرده‌ام و بر توسعه frontend مبتنی بر Angular تمرکز کرده‌ام. به‌عنوان بخشی از نقشم، من دائماً چگونگی پیشرفت Angular و صحنه توسعه frontend را دنبال می‌کنم.

Angular در چند سال گذشته بسیار سریع پیشرفت کرده است و در سال گذشته، با ظهور هوش مصنوعی مولد، گردش کار توسعه نرم افزار ما نیز به سرعت تکامل یافته است. برای اینکه از نزدیک تکامل توسعه نرم افزار به کمک هوش مصنوعی را دنبال کنم، تصمیم گرفتم ساخت ابزارهای هوش مصنوعی را به صورت عمومی شروع کنم و پیشرفت خود را در AIBoosted.dev منتشر کنم، در اینجا مشترک شوید 🚀

من را در Substack (Angular Addicts)، Substack (AIBoosted.dev)، Medium، Dev.to، دنبال کنید. ایکس یا لینکدین برای کسب اطلاعات بیشتر در مورد Angular و نحوه ساخت برنامه های هوش مصنوعی با AI، Typescript، React و Angular!