2025‑ci ilin ən böyük Angular yeniləmələrindən biri v21 nəhayətki gəldi. Bu məqalədədə rəsmi Angular bloqunda qeyd edilən bütün vacib yenilikləri (Signal‑Forms, Angular Aria, MCP Server, Vitest, zoneless, və s.) Azərbaycan dilində izah etməyə çalışacam. Hər bölmədə praktik nümunələr olacaq ki, məqaləni oxuyub tətbiq edə biləsiniz.
1) Experimental: Signal FormsQısa desək Signal Forms signal‑lar əsasında qurulmuş form idarəetməsidır. form modeli bir signal kimi verilir və bu model avtomatik olaraq template‑dəki sahələrə synchronization olunur.
Bəs bizə faydası nə olacaq?a. Tam type‑safe təmin edir.b. ControlValueAccessor yazmağa ehtiyac azalır və custom komponentlərlə bağlamaq daha sadələşir.c. Mərkəzləşdirilmiş schema‑based validasiya imkanları yaradır.
import { Component, signal, computed } from '@angular/core';import { form, Field } from '@angular/forms/signals';@Component({ selector: 'app-register', imports: [Field], template: ` <form (ngSubmit)="submit()"> <input [field]="registerForm.username" /> <input [field]="registerForm.email" /> <input type="password" [field]="registerForm.password" /> <input type="password" [field]="registerForm.confirmPassword" /> @if(passwordsDontMatch()){ Şifrələr bir birilə uyğun gəlmir } <button type="submit" [disabled]="!canSubmit()">Yeni istifadəçi</button> </form> `})export class RegisterComponent { // 1) Signal obyekti. form state-i burada saxlanılır. // Bu obyekt dəyişdikcə, computed-lər və template avtomatik yenilənir. register = signal({ username: '', email: '', password: '', confirmPassword: '' }); // 2) form(). Signal Forms-un əsas funksiyasıdır. // register() obyektini Field directive vasitəsilə input-lara bağlayır. registerForm = form(this.register); // 3) computed(). // Şifrələrin uyğun olub-olmadığını dinamik şəkildə qaytarır. passwordsDontMatch = computed(() => this.register().password && this.register().confirmPassword && this.register().password !== this.register().confirmPassword ); // 4) computed(). // Submit düyməsinin aktiv olub-olmadığını müəyyən edir. canSubmit = computed(() => this.register().username.length >= 3 && this.register().email.includes('@') && !this.passwordsDontMatch() ); submit() { }}
Custom validator nümunəsi:
import { Validators } from '@angular/forms/signals';const loginForm = form(signal({ email: '', password: '' }), { validators: { email: [Validators.required, Validators.email], password: [Validators.required, (v) => v.length >= 8 || 'Şifrə 8 simvoldan az ola bilməz'] }});
Qeyd: Signal Forms hələ eksperimentaldir API dəyişə bilər. Yeni layihələrdə yox amma prototiplərdə və araşdırma layihələrində sınamağı tövsiyə edirəm.
Köhnə nümunə:
import { Component, forwardRef } from '@angular/core';import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';@Component({ selector: 'app-custom-input', template: ` <input [value]="value" (input)="onInput($event)" /> `, providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CustomInputComponent), multi: true } ]})export class CustomInputComponent implements ControlValueAccessor { value = ''; onChange = (_: any) => {}; onTouched = () => {}; writeValue(value: any): void { this.value = value; } registerOnChange(fn: any): void { this.onChange = fn; } registerOnTouched(fn: any): void { this.onTouched = fn; } onInput(event: any) { const newValue = event.target.value; this.value = newValue; this.onChange(newValue); this.onTouched(); }}
Signal Forms-da CVA + registerOnChange + writeValue hamısı avtomatik edilir.
2. Angular Aria və AccessibilityAngular Aria developer preview‑da təqdim olunur: unstyled, accessibility‑first komponentlər toplusu (Accordion, Combobox, Grid, Listbox, Menu, Tabs, Toolbar, Tree və s.). Bu komponentlər behavior və a11y funksiyalarını təmin edir. Siz isə öz temanızla stil verirsiniz(Məsələn angular material ilə).
<!-- Quraşdırmaq üçün: -->npm i @angular/aria<!-- Combobox (sadə istifadə): --><ng-combobox [items]="countries" [(ngModel)]="selected"></ng-combobox><!-- Directive əsaslı nümunə: --><div ariaCombobox> <input ariaComboboxInput /> <ul ariaComboboxList> @for (c of countries; track $index) { <li ariaComboboxOption>{{ c }}</li> } </ul></div>
Həmçinin, yeni versiyada şablonlarda (template) Regular Expressions (Regex) dəstəyi gəldi:
@let isValidNumber = /\d+/.test(someValue);@if (!isValidNumber) { <div class="error">Rəqəm daxil edin!</div>}
3) MCP Server: AI agentlər üçün daha çox toolMCP Server artıq CLI‑də möhkəmləndirilmişdir: AI agentlərə sənədlər, nümunələr və migration planları vermək üçün bir neçə tool mövcuddur. Əsas istifadə hallarından bəziləri:
a). get_best_practices: Angular best practices qaydalarını geri qaytarırb). list_projects: workspace‑dəki layihələri tapır.c). search_documentation və find_examples angular.dev‑dəkı ən yeni nümunələri tapır.d). onpush_zoneless_migration: mövcud kodu OnPush, zoneless‑ə keçirmək üçün plan yaradır.e). modernize (eksperimental): mövcud kod üçün avtomatik migrasiyalar təklif edir.
Nümunə: MCP server vasitəsilə onpush_zoneless_migration çalışdırmaq (CLI vasitəsilə) nəticə olaraq sizə addım‑addım plan verilir. MCP server haqqında daha çox məlumat angular.dev‑də mövcuddur.
4) Vitest: yeni default test runnerArtıq Angular CLI-da rəsmi və stabil test icraçısı (test runner) olaraq Vitest təyin edilib. Karma və Jasmine hələ də dəstəklənir amma yeni proyektlər Vitest ilə başlayacaq.Mövcud testləri Vitest‑ə çevirmək üçün:ng g @schematics/angular:refactor-jasmine-vitest
5) Zoneless default olduAngular 18-də eksperimental olaraq gələn “Zoneless” rejimi Angular 21-də artıq yeni yaradılan tətbiqlər üçün standart (default) halına gəldi. Signals və OnPush sayəsində Angular artıq zone.js‑ə bağlı deyil v21‑də yeni app‑lar zoneless olaraq yaradılacaq.Artıq zone.js kitabxanası tətbiqinizə daxil edilməyəcək. Bu nə deməkdir?a). Daha kiçik bundle ölçüsü: zone.js yüklənmir.b). Daha sürətli işləmə: Brauzer event-lərinin (click, mouseover) hər dəfə bütün tətbiqi yoxlamasına (dirty check) ehtiyac qalmır.c). Daha dəqiq və hədəfli render prosesi: zone.js istifadə ediləndə hər view update zamanı Angular bütün komponenti yuxarıdan aşağıya yoxlayırdı. Lakin zoneless və Angular Signals ilə dəyişikliklər reaktiv şəkildə mənbədən komponentə qədər dəqiq izlənir. Tətbiqin bütün component tree-si yoxlanmır əksinə dəyişiklik yalnız siqnalı istifadə edən komponentlərə tətbiq olunur və artıq lazımsız render prosesi olmur. Buda həm performans artır həm də UI daha sabit və proqnozlaşdırıla bilən olur.
6) Digər mühüm yenilikləra). @defer on viewport options. @defer üçün IntersectionObserver opsiyalarını özəlləşdirmək mümkündür:
@defer (on viewport({ trigger, rootMargin: '100px' })) { <section>Content</section>}
b). SimpleChanges generics. simpleChanges indi generikdir və daha yaxşı type checking təmin edir:
ngOnChanges(changes: SimpleChanges<MyInputs>) { // changes.myInput.currentValue düzgün tipə malikdir}
c). KeyValue pipe optional keys. KeyValue pipe indi optional key‑li obyektləri də dəstəkləyir. Buda dinamik obyektləri göstərərkən rahatlıq verir.
d). native [class] və [style]: Angular v21 ilə birlikdə performanslı bir sintaksis təqdim olunur. Artıq [ngClass] və [ngStyle] yerinə native [class] və [style] bindinqlərini istifadə etmək tövsiyə olunur. Bu yanaşma Signals və zoneless rejimi ilə daha uyğun işləyir və unnecessary change detection-ləri azaldır.
Əvvəllər:
<div [ngClass]="{ 'active': isActive, 'disabled': isDisabled }"> Button</div><div [ngStyle]="{ 'color': color, 'font-size.px': fontSize }"> Hello</div>
İndi:
<div [class.active]="isActive" [class.disabled]="isDisabled"> Button</div><div [style.color]="color" [style.font-size.px]="fontSize"> Hello</div>
NəticəAngular v21 böyük strateji bir buraxılışdır: Signals-form , zoneless‑in default olması və Vitest‑in default test runner kimi seçilməsi gələcəyin Angular tətbiqlərini daha yüngül, sürətli və AI‑dostu edir. Signal Forms və Angular Aria kimi yeni alətlər həm developer‑ə həm də istifadəçiyə fayda verəcəkyini düşünürəm xüsusilədə a11y və tip təhlükəsizliyi sahələrində.
PS. Nəsə sualınız yaranarsa respond edə bilərsiniz və yaxud mənə linkedin üzərindən yaza bilərsiniz.
