Toate cele 75 de pagini · scrie ca să filtrezi
01 Ce e nou în Angular 21 & 22 Toate schimbările importante din v21 și v22, pe scurt, cu link către pagina care le explică. Start 01 Prima ta aplicație, pas cu pas O listă de lecturi construită de la o componentă goală la o aplicație terminată — signals, @for, input-uri și output-uri, un serviciu și un formular, pas cu pas. Start 01 Decizii rapide „Unde pun asta?”, „Signal sau Observable?”, „Shared sau feature?” — răspunsuri scurte la întrebările de zi cu zi. Start 01 Întrebări de interviu Angular 60 de întrebări reale de interviu pentru junior, mid și senior, cu răspunsul de dat, întrebarea care urmează și greșelile de evitat. Plus o simulare de interviu. Start 02 Standalone & bootstrap Cum pornește o aplicație fără NgModule: bootstrapApplication, app.config.ts, imports în componentă. Fundamente moderne 02 Data binding și evenimente Interpolare, binding pe proprietăți și pe atribute, evenimente cu $event și filtre de taste și cum e construit [( )] — ce intră în DOM și ce se întoarce. Fundamente moderne 02 Control flow: @if, @for, @switch Sintaxa de blocuri care înlocuiește *ngIf/*ngFor/ngSwitch, cu track, @empty și verificare exhaustivă. Fundamente moderne 02 @let și expresiile noi din template Variabile locale cu @let, arrow functions, spread, regex, instanceof, comentarii în tag-uri. Fundamente moderne 02 @defer — lazy loading în template Încarci componente grele doar când e nevoie: triggere, prefetch, placeholder, loading, error. Fundamente moderne 02 Class & style bindings De ce [class.x] și [style.x] au înlocuit ngClass și ngStyle (cu migrare automată din v21). Fundamente moderne 02 Stilurile componentelor și încapsularea :host, cele trei moduri de încapsulare, teme cu variabile CSS și de ce ::ng-deep e ultima soluție. Fundamente moderne 02 Pipes: când și cum Pipe pur vs impur, pipe custom și cum alegi între pipe, computed() și o metodă. Fundamente moderne 03 signal() și computed() Primitivele reactive: stare scriibilă, stare derivată, egalitate, untracked și reguli de imutabilitate. Signals & reactivitate 03 effect() — când DA, când NU Efecte secundare sincronizate cu semnale: localStorage, logging, API-uri imperative. Și capcanele lor. Signals & reactivitate 03 linkedSignal() — stare derivată editabilă Un semnal care se resetează când se schimbă sursa, dar pe care îl poți și seta manual. Signals & reactivitate 03 resource, rxResource, httpResource Date asincrone ca semnale: status, value, error, reload, anulare automată. Stabile din v22. Signals & reactivitate 03 debounced() — semnale cu întârziere Varianta „debounce” a unui semnal, fără RxJS. Perfect pentru căutare. Signals & reactivitate 03 Liste: căutare, filtrare, sortare, paginare Un lanț de computed-uri care recalculează doar ce s-a schimbat, cu filtrele ținute în URL, ca un link să redeschidă aceeași vedere. Signals & reactivitate 03 Observables de la zero Ce e un Observable, subscribe și unsubscribe, operatorii pe care îi folosești în fiecare săptămână, cold vs hot — și când ajunge un signal. Signals & reactivitate 03 Signals ↔ RxJS toSignal, toObservable, takeUntilDestroyed, outputFromObservable — și când RxJS rămâne alegerea bună. Signals & reactivitate 04 input() și output() Inputuri ca semnale (required, transform, alias) și outputuri tipizate. Data down, events up. Componente: comunicare 04 model() — two-way binding Banana-in-a-box [( )] cu un singur API. Când îl folosești și când e mai bine input + output. Componente: comunicare 04 viewChild & contentChild Interogări ca semnale: viewChild, viewChildren, contentChild, contentChildren, opțiunea read. Componente: comunicare 04 Lifecycle & DestroyRef Ce hook-uri mai contează în era signals, afterNextRender, DestroyRef și ngOnChanges tipizat. Componente: comunicare 04 Content projection ng-content cu select, sloturi multiple, conținut implicit și capcana proiecției condiționale. Componente: comunicare 04 ng-template & ngTemplateOutlet Template-uri ca valori: render props în Angular, context tipizat și personalizare de componente. Componente: comunicare 05 Smart vs Dumb Container vs presentational: cine ține starea, cine doar afișează, și cum le împarți corect. Design de componente 05 Componente generice <T> Un DataTable<T> sau Select<T> tipizat corect, cu template-uri pentru celule. Design de componente 05 Componente dinamice NgComponentOutlet, createComponent cu inputBinding/outputBinding și un dashboard construit din config. Design de componente 05 Directive & host composition Directive atribut, metadata host: {} și Directive Composition API (hostDirectives). Design de componente 05 Controale custom de formular FormValueControl (Signal Forms) vs ControlValueAccessor: un rating cu stele, în ambele variante. Design de componente 05 Change detection OnPush e implicit din v22, zone.js lipsește din v21. Ce declanșează randarea și cum să nu te arzi. Design de componente 06 inject() & @Service() Noul decorator @Service() din v22, inject() vs constructor și contextul de injecție. Dependency Injection 06 Providers & ierarhia de injectori Root vs rută vs componentă, useClass/useValue/useFactory/useExisting și modificatorii optional/self/skipSelf. Dependency Injection 06 InjectionToken & provideX() Configurare tipizată, funcții provideFeature(), makeEnvironmentProviders și inițializatori. Dependency Injection 06 injectAsync() — servicii lazy Încarci un serviciu greu abia când ai nevoie de el, cu prefetch la idle. Dependency Injection 07 Structura de foldere core / shared / features, ce intră în fiecare și cum arată un feature pe dinăuntru. Arhitectura aplicației 07 Shared vs feature Când muți o componentă în shared și (mai ales) când NU. Checklist concret. Arhitectura aplicației 07 Interfețe & modele Interfață inline sau fișier separat? DTO vs model de domeniu, type vs interface, unde le pui. Arhitectura aplicației 07 State management cu signals Store-uri simple pe semnale, facade, stare locală vs globală și când îți trebuie NgRx. Arhitectura aplicației 07 Style guide & naming Convențiile oficiale actuale: nume de fișiere fără sufixe, protected, readonly, ordinea membrilor. Arhitectura aplicației 07 Barrels, aliasuri & granițe index.ts, path aliases, API public pe feature și reguli de dependență care se pot verifica automat. Arhitectura aplicației 07 Erori: @boundary & ErrorHandler Noul bloc @boundary din v22.2, ErrorHandler global, erori HTTP și erori din resource. Arhitectura aplicației 08 Routing modern & lazy loading loadComponent, rute copil, parametri ca input-uri și moștenirea parametrilor (default nou în v22). Routing 08 Guards & resolvers canActivate, canMatch, canDeactivate și resolve ca funcții, cu redirect prin UrlTree / RedirectCommand. Routing 09 Signal Forms — bazele Formulare construite pe semnale: form(), [formField], validare prin schemă. Stabile din v22. Formulare 09 Signal Forms — avansat Validare custom și cross-field, async/HTTP cu debounce, liste dinamice, disabled/hidden, scheme reutilizabile. Formulare 09 Reactive Forms tipizate FormGroup tipizat, nonNullable, FormArray — și cum conviețuiesc cu Signal Forms. Formulare 10 HttpClient, interceptors & API layer HttpClient fără setup (v21), Fetch implicit (v22), interceptori funcționali și stratul de API cu mapare DTO. HTTP & date 11 Performanță — checklist Ce chiar contează: OnPush + signals, track, @defer, lazy routes, imagini, bundle și hidratare. Calitate & performanță 11 Testare cu Vitest Vitest e runner-ul implicit din v21. TestBed, componente cu semnale, servicii, HTTP și harness-uri. Calitate & performanță 11 DevTools: cum te uiți în aplicație Chrome DevTools și Angular DevTools pas cu pas: ce arată fiecare panou, cu exerciții care merg chiar pe site-ul ăsta. Calitate & performanță 11 Angular Aria Componente headless, accesibile, pe care le stilizezi cum vrei: tabs, accordion, menu, listbox... Calitate & performanță 12 SSR, prerender & render modes Când randezi pe server, când la build și când doar în browser: RenderMode pe rută, app.routes.server.ts și costurile reale. SSR & hidratare 12 Hidratare: event replay & incremental Cum preia browserul HTML-ul de pe server fără să-l refacă: hidratare completă, event replay, @defer (hydrate on …) și erorile de nepotrivire. SSR & hidratare 12 Cod compatibil cu serverul window nu există pe server: PLATFORM_ID, afterNextRender, DOCUMENT, TransferState, cache-ul HTTP și PendingTasks. SSR & hidratare 13 Micro frontends Când merită să spargi o aplicație în mai multe deploy-uri și când e doar complexitate: Native Federation, Module Federation, iframes, Web Components. Arhitectură la scară 13 Web Components cu Angular Elements createCustomElement: o componentă Angular folosită ca tag HTML oriunde, plus comunicarea între aplicații prin evenimente și BroadcastChannel. Arhitectură la scară 13 Monorepo, librării & granițe Un workspace cu mai multe aplicații și librării: ng generate library, Nx, entry points secundare, publicare și reguli de dependență. Arhitectură la scară 13 Arhitectură hexagonală (ports & adapters) Domeniul fără Angular, porturi ca clase abstracte și adaptoare interschimbabile: HTTP, localStorage sau in-memory, fără să atingi UI-ul. Arhitectură la scară 14 Semnalele pe dinăuntru Graful reactiv: producători și consumatori, push-pull, de ce computed e lazy și glitch-free, problema diamantului și când rulează efectele. Reactivitate avansată 14 RxJS avansat: operatori de ordin superior switchMap, mergeMap, concatMap și exhaustMap pe o diagramă live, plus retry cu backoff, shareReplay și cum eviți scurgerile. Reactivitate avansată 14 NgRx SignalStore State management la scară pe semnale: withState, withComputed, withMethods, rxMethod, entități și hooks — și când un store simplu e suficient. Reactivitate avansată 14 Mașini de stări cu signals Fără stări imposibile: o mașină tipizată pe signals, cu tranziții, guards și diagrama stărilor, live. Reactivitate avansată 15 WebSockets: timp real care rezistă rețelei Un socket tipizat ca signals: reconectare cu backoff și jitter, heartbeat, coadă de mesaje cât ești offline și siguranță la SSR. Timp real și offline 15 Actualizări optimiste și rollback Interfață instantanee, dar onestă: snapshot și rollback, răspunsuri sosite în altă ordine, chei de idempotență. Timp real și offline 15 Offline-first: Service Worker și cache Service Worker-ul Angular: strategii de cache, anunțarea versiunilor noi și o coadă pentru modificările făcute offline. Timp real și offline 16 Web Workers Calcule grele fără să blochezi interfața: un worker real în pagină, comunicare prin mesaje și când nu merită. UI & performanță avansată 16 Liste uriașe: virtual scroll 100.000 de rânduri fără lag: CDK virtual scroll, itemSize, trackBy și alternativele (paginare, infinite scroll). UI & performanță avansată 16 Animații moderne & View Transitions animate.enter și animate.leave în locul @angular/animations (depreciat), tranziții CSS și View Transitions la navigare. UI & performanță avansată 16 Memory leaks: cum le găsești și le repari Subscripții, timere și listeneri care trăiesc mai mult decât componenta lor — cum îi vezi în DevTools și cum îi închizi. UI & performanță avansată 17 Securitate: XSS, sanitizare & CSP Ce face Angular automat împotriva XSS, când devine periculos bypassSecurityTrust, plus CSP cu nonce, Trusted Types și XSRF. Securitate & globalizare 17 Autentificare: token-uri & refresh Un interceptor care atașează token-ul, reîmprospătează o singură dată la 401 și reia cererile din coadă — plus unde ții token-ul. Securitate & globalizare 17 OAuth 2.1 și OpenID Connect cu PKCE Fluxul authorization code cu PKCE, pas cu pas: verifier și challenge, state și nonce, ID token-ul și de ce un BFF e mai sigur. Securitate & globalizare 17 Internaționalizare (i18n) $localize, atributul i18n, ICU plural/select, build per limbă vs. traduceri la runtime și formatarea după locale. Securitate & globalizare ↑ ↓ alegi↵ deschiziesc închizi