چه چیزی در Angular v16 جدید است؟

Angular v16 در ابتدای ماه می عرضه شد. دریابید که این نسخه چه پیشرفت های قابل توجهی را به ارمغان می آورد.

Angular که توسط گوگل نگهداری می شود، یک چارچوب متن باز پر استفاده برای توسعه برنامه های کاربردی وب است. این ابزار یک جعبه ابزار قوی و طیف وسیعی از ویژگی ها را به شما ارائه می دهد که به شما امکان می دهد برنامه های وب پویا، پاسخگو و مقیاس پذیر ایجاد کنید.

راه اندازی اخیر Angular نسخه 16 به روز رسانی ها و بهبودهای هیجان انگیزی را در تجربه توسعه و همچنین عملکرد و پایداری بهتر برنامه ارائه می دهد.

1. سیگنال های زاویه ای

Angular Signals کتابخانه ای است که امکان تعریف مقادیر واکنشی و ایجاد وابستگی بین آنها را فراهم می کند. در اینجا یک مثال ساده از نحوه استفاده از سیگنال های زاویه ای در یک برنامه Angular آورده شده است:

@Component ({
   selector: 'my-app',
   standalone: true,
   template: `
{{ fullName() }} <button (click)="setName('John')">Click</button>
`,
})
export class App {
   firstName = signal('Jane');
   lastName = signal('Doe');
   fullName = computed(() => `${this.firstName()} ${this.lastName()}`);
   constructor() {
       effect(() => console.log('Name changed:', this.fullName()));
   }
   setName(newName: string) {
       this.firstName.set(newName);
   }
}

قطعه کد بالا یک مقدار محاسبه شده به نام fullName ایجاد می کند که به سیگنال های firstName و lastName متکی است. علاوه بر این، یک افکت تعریف می‌کند، یک تابع فراخوانی که هر زمان که مقدار سیگنال‌هایی که می‌خواند تغییر کند، اجرا می‌شود.

در این مورد، مقدار fullName به firstName و lastName بستگی دارد، بنابراین تغییر هر یک از آنها باعث ایجاد اثر می شود. هنگامی که مقدار firstName روی John تنظیم می شود، مرورگر پیام زیر را در کنسول ثبت می کند:

Name changed: John Doe.

2. مجموعه جدید Ng مستقل

با شروع از Angular v16، می توانید پروژه های مستقل جدیدی را از همان ابتدا ایجاد کنید! برای آزمایش پیش‌نمایش توسعه‌دهنده شماتیک‌های مستقل، مطمئن شوید که Angular CLI v16 را نصب کرده‌اید و دستور زیر را اجرا کنید:

ng new --standalone

با انجام این کار، ساختار پروژه ساده تری را بدون NgModules به دست خواهید آورد. علاوه بر این، تمام ژنراتورهای پروژه دستورالعمل‌ها، قطعات و لوله‌های مستقل تولید می‌کنند!

3. نگاشت پارامترهای مسیر خودکار

یک پیکربندی مسیریابی را به صورت زیر در نظر بگیرید:

export const routes: Routes = [{
   path: 'search:/id',
   component: SearchComponent,
   resolve: {
       searchDetails: searchResolverFn
   }
}];


قبل از Angular 16، باید سرویس ActivatedRoute را برای بازیابی پارامترهای URL، پارامترهای پرس و جو یا داده های مرتبط برای یک URL خاص تزریق کنید.

در اینجا یک مثال از نحوه انجام این کار آورده شده است:

@Component({
   ...
})
export class SearchComponent {
   readonly #activatedRoute = inject(ActivatedRoute);
   readonly id$ = this.#activatedRoute.paramMap(map(params => params.get('id')));
   readonly data$ = this.#activatedRoute.data.map(({
       searchDetails
   }) => searchDetails);
}

با Angular 16، دیگر نیازی به تزریق سرویس ActivatedRoute برای بازیابی پارامترهای مسیر مختلف ندارید، زیرا می توانید آنها را مستقیماً به ورودی های مؤلفه متصل کنید.

برای فعال کردن این قابلیت در برنامه‌ای که از سیستم ماژول استفاده می‌کند، مقدار مربوطه را در گزینه‌های RouterModule تنظیم کنید:

RouterModule.forRoot(routes, {
   bindComponentInputs: true
})


برای یک برنامه مستقل، باید یک تابع را فراخوانی کنید:

provideRoutes(routes, withComponentInputBinding());

هنگامی که این عملکرد را فعال می کنید، مؤلفه بسیار ساده تر می شود:

@Component({
   ...
})
export class SearchComponent {
   @Input() id!: string;
   @Input() searchDetails!: SearchDetails;
}

4. ورودی مورد نیاز

یکی از ویژگی‌های مورد انتظار برای جامعه Angular، امکان علامت‌گذاری ورودی‌های خاص در صورت نیاز است. تا به حال، برای رسیدن به این هدف باید از راه‌حل‌های مختلفی استفاده می‌کردید، مانند ایجاد خطا در چرخه عمر NgOnInit اگر متغیر تعریف نشده بود یا تغییر انتخابگر مؤلفه برای گنجاندن ورودی‌های اجباری.

با این حال، هر دوی این راه حل ها مزایا و معایب خود را داشتند. با شروع از نسخه 16، ایجاد یک ورودی مورد نیاز به سادگی ارائه یک شیء پیکربندی در فراداده حاشیه نویسی ورودی است:

@Input({
   required: true
}) name!: string;


5. Vite به عنوان Dev Server

Angular 14 یک باندلر جاوا اسکریپت جدید به نام EsBuild را معرفی کرد که زمان ساخت را به میزان قابل توجهی تقریباً 40٪ بهبود بخشید. با این حال، شما فقط می توانید این افزایش عملکرد را در مرحله ساخت و نه در طول توسعه با سرور توسعه دهنده متوجه شوید.

در نسخه آتی Angular، ابزار ساخت Vite امکان استفاده از EsBuild را در طول توسعه نیز فراهم می‌کند.

برای فعال کردن این ویژگی، پیکربندی سازنده را در فایل angular.json به صورت زیر به روز کنید:

"architect": {
   "build": {
       "builder": "@angular-devkit/build-angular:browser-esbuild",
       "options": {
           ...
       }
   }

لطفاً توجه داشته باشید که این عملکرد هنوز آزمایشی است.

افزایش تجربه و عملکرد توسعه

Angular نسخه 16 به‌روزرسانی‌های هیجان‌انگیزی مانند Angular Signals را برای مدیریت داده‌ها، ایجاد پروژه مستقل، نگاشت پارامترهای مسیر خودکار، ورودی‌های مورد نیاز و ادغام Vite برای توسعه بهبودیافته به ارمغان می‌آورد. این پیشرفت ها تجربه توسعه را بهبود می بخشد و عملکرد برنامه را افزایش می دهد.

منبع مقاله