ویژگی های جدید انگولار

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

افزودن Title دلخواه برای صفحه

قدیما برای اینکه به هرکدوم از صفحات یک Title بدیم یا باید داخل اون صفحه سرویس Title رو فراخونی میکردیم و بهش مقدار میدادیم یا باید به صورت زیر عمل میکردیم:

const routes: Routes = [{
path: '',
component: AppComponent,
data: {
  title: 'Title'
}}]

در ادامه هم باید این مقدار رو هنگام Routing میخوندیم و با مقدار Title جایگزین میکردیم، خلاصه داستانی بود برای خودش ولی از نسخه 14 به بعد Title رو میشه مستقیم مقدار دهی کرد:

const appRoutes: Routes = [
{
component:AppComponent,
path:'',
title:'New Title'
}]

بهینه سازی عکس ها

یک directive جدید با نام NgOptimizedImage که باعث افزایش سرعت بارگذاری صفحه با بهبود سرعت بارگذاری عکس ها میشه.

import { NgOptimizedImage } from '@angular/common';
@NgModule({  
    ...       
    imports: [NgOptimizedImage]
})class AppModule {}

و در ادامه کافیه به جای src از ngSrc استفاده کنیم:

<img ngSrc="logo.png" width="200" height="100">

برای درک بهتر موضوع میتونید مستندات فنی این بخش رو اینجا ببینید.

standalone component

این ویژگی که فعلا به صورت آزمایشی داخل انگولار 14 قرار شده میشه گفت باحالترین ویژگی جدید انگولار هستش. اگه شما یک کامپوننت سبک داشته باشید که وابستگی های زیادی نداره و میخوایید اون رو به صورت مستقل از ماژول تعریف کنید standalone component اینجاست تا به شما کمک کنه. کافیه به صورت زیر عمل کنید:

@Component({   
   standalone: true,   
   selector: 'photo-gallery',   
   imports: [AnotherComponent],
   template: `
      <h1>My first standalone component, yeaaah!</h1>
      <another-component></another-component>
   `,
 }) export class MyComponent {   
  ...
}

این یک راه حل عالی برای کاهش فایل های برنامه و خوانایی بهتره کد هاتونه.

خب از اونجایی که صحبت هایی در مورد انگولار 15 هستش و یک سری ویژگی های باحال براش معرفی شده میخوام به یک مورد اشاره کنم که داخل لینکدین آقای Minko Gechev به اشتراک گذاشته شده.

پیغام های کاربر پسند برای رفع خطا

مطمئن باشید این ویژگی خیلی باحال تر از این اسمیه که من این بالا نوشتم. با این ویژگی شما میتونید به سرعت مشکل کد خودتونو پیدا کنید. به نظر میرسه این ویژگی برای Chrome devTools قابل دسترس باشه.

مرسی که تا اینجا با من همراه بودید.

این مقاله یک برگردان از مقاله Top New Features in Angular بود.