Angular 17+ i Signals

Granularna reaktywność bez Zone.js

Zastępuje: Zone.js Change Detection

Komponenty bez NgModule

Zastępuje: NgModule declarations

Lazy loading bloków w template z triggers

Zastępuje: Manualne lazy imports

Nowe dyrektywy kontrolne w template

Zastępuje: *ngIf, *ngFor, *ngSwitch

Pełna reaktywność bez Zone.js overhead

Zastępuje: Zone.js (async patching)

Ścisłe typowanie FormControl

Zastępuje: Untyped FormControl

Co to jest Angular Signals i dlaczego zmienia reaktywność w Angular?

Angular Signals: nowy system reaktywności w Angular 16+ (stabilny w Angular 17). Inspirowany SolidJS signals. Problem przed Signals: Angular używał Zone.js do wykrywania zmian. Change Detection biegł przez całe drzewo komponentów. Nieefektywne dla dużych aplikacji. Signals: reaktywne wartości z automatycznym dependency tracking. Granularne aktualizacje (tylko co się zmieniło). Brak Zone.js (opcjonalnie, Zoneless w Angular 18+). Podstawowe API: signal(initialValue) — tworzy signal. const count = signal(0). Odczyt: count() — wywołanie jak funkcja. Zapis: count.set(5). count.update(prev => prev + 1). count.mutate() dla obiektów/tablic. computed(): reaktywna wartość pochodna. const double = computed(() => count() * 2). Automatyczne dependency tracking. Lazy (obliczana przy odczycie). effect(): efekt uboczny reagujący na signals. effect(() => console.log('Count:', count())). Template integration: interpolation {count()} lub {double()}. Automatyczne subskrypcje w template. Brak ChangeDetectorRef.markForCheck(). Untracked(): wyłącz tracking. untracked(() => counter()). Signals vs RxJS Observable: Signals — proste, synchroniczne, automatyczny tracking. Observable — asynchroniczne, strumienie, composable. toSignal(observable$) — Observable -> Signal. toObservable(signal) — Signal -> Observable.

Angular 17+ — Standalone Components, Defer i nowe API?

Standalone Components (Angular 14+, stable 17+): komponenty bez NgModule. @Component({standalone: true, imports: [CommonModule, RouterModule], ...}). Zalety: mniej boilerplate. Lazy loading prostszy. Treeshaking lepszy. Angular 17 domyślnie standalone. Migracja z NgModule: ng generate @angular/core:standalone. Automatyczna migracja. @defer (Angular 17): lazy loading bloków w template. @defer {HeavyComponent} — ładuje tylko gdy potrzebny. Triggery: @defer (on viewport) — gdy wejdzie w viewport. @defer (on interaction) — gdy user interaguje. @defer (on idle) — idle czas przeglądarki. @defer (when condition) — gdy warunek spełniony. Placeholders i loading: @placeholder {SkeletonComponent}. @loading {Spinner}. @error {ErrorMessage}. Nowe Control Flow (Angular 17): @if (condition) {...} @else {...}. @for (item of items; track item.id) {...}. @switch (value) {@case 'a' {...} @default {...}}. Zastępuje ngIf, ngFor, ngSwitch dyrektyw. Szybszy (nowy compiler). Wymagane track w @for (wydajność). Angular SSR (17+): hydration wbudowany. @angular/ssr (nowy pakiet). Non-destructive hydration. Defer bloki SSR-compatible. Angular 18+: Zoneless change detection (eksperymentalny). provideExperimentalZonelessChangeDetection(). Pełne Signal-based components. Incremental hydration. Material 3 (Angular Material).

RxJS — co to jest i jak używać Observable w Angular?

RxJS (Reactive Extensions for JavaScript): biblioteka do reaktywnego programowania z Observable. Angular używa RxJS intensywnie (HttpClient, Forms, Router). Observable: strumień asynchronicznych wartości. Subskrybujesz -> otrzymujesz wartości. Kompletuje (complete) lub błęd (error). Typy Observables: Observable.of(1,2,3) — synchroniczne. interval(1000) — co sekundę. fromEvent(button, 'click') — DOM events. HttpClient.get() — HTTP request. Subject: Subject: multicasted Observable. BehaviorSubject: trzyma ostatnią wartość. ReplaySubject: trzyma N ostatnich. AsyncSubject: emituje ostatnią przy complete. Operators (pipe): map, filter, switchMap, mergeMap, concatMap, exhaustMap. tap (side effects). debounceTime, throttleTime. distinctUntilChanged. combineLatest, forkJoin, merge, zip. takeUntil, take, first. catchError, retry. switchMap: canceluje poprzedni Observable. Idealny dla search (wpisywanie = cancel poprzedniego requestu). mergeMap: równolegle, nie canceluje. concatMap: sequential. exhaustMap: ignoruje nowe gdy trwa poprzedni. Unsubscribe: memory leaks! takeUntilDestroyed() (Angular 16+) — auto-cleanup. async pipe w template — auto-subscribe i unsubscribe. RxJS + Signals: toSignal(obs$) — Observable -> Signal z auto-unsubscribe. httpResource() (Angular 19) — HTTP request jako Signal.

Angular Forms — Reactive Forms vs Template-driven Forms?

Reactive Forms: FormGroup, FormControl, FormArray. Definicja w TypeScript. Synchroniczna walidacja + asynchroniczna. Immutable: każda zmiana tworzy nowy obiekt. Testowalny. TypeScript-friendly. Przykład: this.form = this.fb.group({email: ['', [Validators.required, Validators.email]], password: ['', [Validators.required, Validators.minLength(8)]]}). FormBuilder: skrótowy syntax. this.fb.nonNullable.group({...}) — bezpieczniejszy. template: form [formGroup]='form', input formControlName='email'. Walidacja: form.get('email')?.hasError('required'). form.invalid, form.valid, form.touched. Asynchroniczna walidacja: AsyncValidatorFn. return (control) => this.authService.checkEmail(control.value).pipe(map(exists => exists ? {emailTaken: true} : null)). Template-driven Forms: ngModel. Less TypeScript, więcej template. Prostszy setup. Mniej kontroli. Kiedy: proste formularze. Prototypy. Reactive Forms dla: złożone formularze. Dynamiczne pola. Walidacja cross-field. Testowanie. FormArray: dynamiczne listy pól. addControl(), removeAt(). Iteracja w template. Angular 14+ typed forms: strict typing dla FormControl. FormControl value type znany. Signals + Forms: signal-based forms (eksperymentalny). injectValidators(). Angular Material Forms: mat-form-field, mat-input, mat-select, mat-datepicker. Standaryzacja UI.

Angular vs React vs Vue — kiedy wybrać Angular dla projektu?

Angular (Google): pełny framework (all-batteries-included). TypeScript mandatory. DI (Dependency Injection) wbudowane. Opinionated (jeden sposób na każdy problem). Duży boilerplate (historycznie, coraz mniej z v17+). Skalowalny dla dużych zespołów. Enterprise choice. Angular kiedy: duże enterprise aplikacje. Duże zespoły (10+ devs). Java/Spring background. DI patterns preferowane. Google Cloud/Firebase ekosystem. Angular Material design system. React kiedy: największy ekosystem. Flex (wiele podejść). Startup i enterprise. Full-stack TS (Next.js). Największa społeczność. Vue kiedy: prostszy syntax. Świetna dokumentacja. Mniejszy projekt. PHP/Laravel ekosystem (częste połączenie). China market (Alibaba używa Vue). Solidny framework niszowy. Solid.js (SolidJS): reactivity without VDOM. 6KB runtime. Signals native (Preact Signals, Angular Signals inspirowane). Qwik: resumability (brak hydration). Tiny initial JS. E-commerce optimized. Htmx: hypermedia-driven (nie SPA). Minimalny JS. Server-rendered HTML + AJAX. Popularne: Django, Rails, Phoenix. 2024 adoption: React — 40%+ (dominant). Vue — 15%. Angular — 10%. Svelte, Solid — niszowe ale rosnące.

Wyślij zapytanie