10 سنگ قیمتی پنهان در زاویه ای که باید از آنها استفاده کنید

همه در مورد ویژگی های جدید جدید در هر نسخه زاویه ای ، مانند اجزای مستقل ، سیگنال ها یا نحو جریان کنترل صحبت می کنند. اما آیا می دانید که Angular نیز سنگهای پنهان زیادی دارد؟ این ویژگی ها بسیار محبوب نیستند ، اما می توانند کد شما را تمیز تر ، سریعتر و نگهداری آسان تر کنند.

در این مقاله ، من لیست می کنم 10 ویژگی زاویه ای مفید اما مشهور نیست که شما باید در پروژه های خود استفاده کنید! من همچنین ذکر خواهم کرد که کدام نسخه زاویه ای آنها را معرفی کرده است ، بنابراین می دانید که آیا می توانید از آنها در پروژه خود استفاده کنید.

بیا بریم!

1 – عملکرد تزریق () (زاویه ای 14+)

این یکی از قدرتمندترین ویژگی های پنهان در Angular است. قبل از زاویه 14 ، ما همیشه از تزریق وابستگی در سازندگان استفاده می کردیم. اما اکنون ، تزریق () به شما امکان می دهد وابستگی هایی را بدون سازنده بدست آورید ، و کد را ساده تر و انعطاف پذیر تر می کند.
مثال:

import { inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

const http = inject(HttpClient);

=> چرا از آن استفاده می کنید؟

• در خارج از مؤلفه ها ، مانند توابع یا خدمات مستقل کار می کند.
• آزمایش واحد را آسان تر می کند.

2 – ارائه httpclient () (زاویه 15+)

به جای وارد کردن httpclientmodule در AppModule ، اکنون می توانید مشتری HTTP را مستقیماً در Main.ts ارائه دهید.
مثال:

import { bootstrapApplication } from '@angular/platform-browser';
import { provideHttpClient } from '@angular/common/http';
import { AppComponent } from './app.component';

bootstrapApplication(AppComponent, {
  providers: [provideHttpClient()]
});

=> چرا از آن استفاده می کنید؟

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

3 – دستورالعمل OptimizedImage (زاویه 15+)

استفاده صحیح از تصاویر برای عملکرد و سئو مهم است. ngoptimizedImage باعث می شود که به طور خودکار تنبل و بهینه سازی تصاویر را آسان کنید.
مثال:

=> چرا از آن استفاده می کنید؟

• تصاویر تنبل به طور خودکار.
• بدون تلاش اضافی ، ویتامان های اصلی بهتر را تضمین می کند.

4 – نگهبانان و حل کننده های عملکردی (زاویه 15+)

اکنون می توانید به جای خدمات ، نگهبانان و حل کننده ها را به عنوان کارکردهای ساده بنویسید.
مثال:

export const authGuard = () => inject(AuthService).isLoggedIn();

=> چرا از آن استفاده می کنید؟

• نیازی به خدمات تزریقی نیست.
• کمتر دیگ بخار ، ساخت کد ساده تر.

عملکرد 5 – مدل () (زاویه 17+)

یک روش جدید و تمیزتر برای اتصال ورودی های فرم بدون ngmodel یا activeforms.
مثال:

import { signal } from '@angular/core';
const name = signal('Angular');

=> چرا از آن استفاده می کنید؟

• بدون FormsModule کار می کند و برنامه ها را سبک تر می کند.
• از سیگنال ها استفاده می کند و آن را واکنش پذیر و سریع می کند.

6 – debouncing رویداد داخلی (زاویه 16+)

به جای استفاده از debouncetime () در RXJS ، Angular اکنون اجازه می دهد تا رویداد مستقیماً در قالب ها انجام شود.
مثال:

=> چرا از آن استفاده می کنید؟

• ورودی های جستجو را ساده می کند و تماس های API غیر ضروری را کاهش می دهد.
• نیازی به نوشتن منطق debounce در TypeScript نیست.

7 – عملکرد ارائه دهنده () (زاویه 14+)

یک روش تمیزتر برای تعریف مسیرها بدون روترمودول.
مثال:

import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home.component';

bootstrapApplication(AppComponent, {
  providers: [provideRouter([{ path: '', component: HomeComponent }])]
});

=> چرا از آن استفاده می کنید؟

• برای اجزای مستقل بسیار عالی کار می کند.
• نیازی به وارد کردن Routermodule در همه جا نیست.

8 – ورودی های مورد نیاز در قطعات (زاویه 16+)

اکنون می توانید ورودی ها را مطابق آنچه لازم است برای جلوگیری از داده های گمشده علامت گذاری کنید.
مثال:

@Component({
  selector: 'app-card',
  template: `
{{ title }}
`
})
export class CardComponent {
  @Input({ required: true }) title!: string;
}

=> چرا از آن استفاده می کنید؟

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

9 – tosignal () برای تبدیل مشاهدات (زاویه 16+)

برای واکنش بهتر به راحتی قابل مشاهده را به یک سیگنال تبدیل کنید.
مثال:

import { toSignal } from '@angular/core/rxjs-interop';
import { interval } from 'rxjs';

const count = toSignal(interval(1000));
console.log(count()); // Updates every second

=> چرا از آن استفاده می کنید؟

• RXJ ها و سیگنال ها را با هم هموار می کنند.
• نیاز به لوله async را در قالب ها برطرف می کند.

10 -View Transitions API (زاویه 17+)

یک روش ساده برای افزودن انیمیشن های صفحه صاف هنگام حرکت بین مسیرها.

مثال:

import { provideRouter, withViewTransitions } from '@angular/router';
bootstrapApplication(AppComponent, {
  providers: [provideRouter(routes, withViewTransitions())]
});

=> چرا از آن استفاده می کنید؟

• انیمیشن های زیبا را بدون CSS یا کتابخانه اضافی ایجاد می کند.
• تجربه کاربر را برای ناوبری بهبود می بخشد.

افکار نهایی

این سنگهای پنهان به اندازه اجزای مستقل یا سیگنال مشهور نیستند ، اما می توانند پروژه های زاویه ای شما را بسازند سریعتربا پاک کنندهوت آسان تر برای حفظ!

کدام یک از این ویژگی ها شما را بیشتر شگفت زده کرده است؟ در نظرات به من اطلاع دهید!