Angular 18: ویژگی‌ها، پیشرفت‌ها و مقایسه‌ها

Summarize this content to 400 words in Persian Lang
Angular 18 با معرفی ویژگی هایی که توسعه را ساده می کند، عملکرد را بهبود می بخشد و مدیریت حالت را ساده می کند، یک گام مهم به جلو در تکامل Angular است. در زیر به تفصیل به‌روزرسانی‌های Angular 18، مقایسه با Angular 17 و مثال‌های عملی می‌پردازیم.

1. اجزای مستقل

اجزای مستقل وابستگی به NgModules را حذف می کنند و یک معماری ماژولار را برای توسعه دهندگان ارائه می دهند. این به ویژه برای کاربردهای کوچک یا هنگام ساخت اجزای قابل استفاده مجدد مفید است.

مزایای کلیدی:معماری اپلیکیشن را ساده می کند.امکان پذیرش تدریجی در پروژه های موجود بدون تغییر تغییرات را فراهم می کند.

مثال:

import { Component } from ‘@angular/core’;

@Component({
standalone: true,
selector: ‘app-standalone’,
template: ”,
})
export class StandaloneComponent {}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

دستور ایجاد اپلیکیشن مستقل:ng new my-app –standalone

2. Signals API

Signals API مدیریت حالت واکنشی را در Angular ساده می کند و جایگزینی برای RxJS ارائه می دهد. سیگنال‌ها به‌عنوان اولیه‌های واکنشی برای به‌روزرسانی یکپارچه UI کار می‌کنند.

مقایسه با Angular 17:

Angular 17 برای واکنش پذیری به خطوط لوله پیچیده RxJS نیاز داشت.
سیگنال ها نیاز به دیگ بخار گسترده را کاهش می دهند و رویکرد تمیزتر و سریعتر را ممکن می سازند.

مثال:

import { signal } from ‘@angular/core’;

const counter = signal(0);
counter.update(value => value + 1);
console.log(counter()); // Output: 1

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

3. رندر سمت سرور بهبود یافته (SSR)

Angular 18 SSR را با افزایش هیدراتاسیون و ایجاد امکان تولید سایت استاتیک (SSG) اصلاح می کند. این ویژگی‌ها زمان بارگذاری و سئو را بهبود می‌بخشند، که برای برنامه‌های پر محتوا بسیار مهم است.

بهبودهای کلیدی:

هیدراتاسیون کارآمد برنامه های رندر شده توسط سرور.
راه اندازی ساده برای SSG.

دستور فعال کردن SSR:ng new my-app –ssr

4. Angular CLI پیشرفته

Angular CLI در نسخه 18 شامل چندین پیشرفت برای راه اندازی آسان تر پروژه و یکپارچه سازی ابزار است، مانند:

پشتیبانی بومی برای Tailwind CSS.
راه اندازی SCSS در طول اولیه سازی پروژه.
درخواست برای تنظیمات SSR/SSG.

به عنوان مثال دستور CLI:ng new my-app –style=scss

5. محافظ مسیر در سطح کامپوننت

Angular 18 محافظ های مسیر را در سطح جزء معرفی می کند که انعطاف پذیری و امنیت را افزایش می دهد. این به توسعه دهندگان اجازه می دهد تا به جای تعریف محافظ ها صرفاً در سطح مسیر، از اجزای جداگانه محافظت کنند

مثال:

import { CanActivateFn } from ‘@angular/router’;

export const authGuard: CanActivateFn = (route, state) => {
return checkAuthentication(); // Returns true or false
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

6. یکپارچه سازی با اجزای Syncfusion

Syncfusion کتابخانه Angular خود را برای پشتیبانی از نسخه 18 به روز کرده است و اجزای رابط کاربری مانند شبکه ها، فرم ها و نمودارها را ارائه می دهد. این اجزا از ماژول های مستقل برای ادغام بهتر استفاده می کنند.

مثال: شبکه همگام سازی

import { Component } from ‘@angular/core’;

@Component({
selector: ‘app-root’,
template: `

`,
})
export class AppComponent {
public data = [
{ OrderID: 101, CustomerID: ‘A123’ },
{ OrderID: 102, CustomerID: ‘B456’ },
];
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

7. بهبود عملکرد

Angular 18 عملکرد را با موارد زیر بهینه می کند:

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

مقایسه با Angular 17:

Angular 17 پشتیبانی اولیه هیدراتاسیون را معرفی کرد اما فاقد بهینه سازی دقیق موجود در نسخه 18 بود.
بهبود API و SSR سیگنال ها در Angular 18 باعث کارایی بهتر زمان اجرا می شود.

نتیجه گیری

Angular 18 یک به روز رسانی جامع با هدف بهبود بهره وری و عملکرد برنامه است. با اجزای مستقل، Signals API، بهبود یافته SSR و CLI، توسعه وب مدرن را ساده می کند. توسعه‌دهندگانی که از Angular 17 مهاجرت می‌کنند، سازگاری با عقب را پیدا می‌کنند و انتقال را روان می‌کنند.

import { Component } from '@angular/core';

@Component({
  standalone: true,
  selector: 'app-standalone',
  template: '',
})
export class StandaloneComponent {}

import { signal } from '@angular/core';

const counter = signal(0);
counter.update(value => value + 1);
console.log(counter()); // Output: 1

import { CanActivateFn } from '@angular/router';

export const authGuard: CanActivateFn = (route, state) => {
  return checkAuthentication(); // Returns true or false
};

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    
      
        
        
      
    
  `,
})
export class AppComponent {
  public data = [
    { OrderID: 101, CustomerID: 'A123' },
    { OrderID: 102, CustomerID: 'B456' },
  ];
}