Curs Front-End Angular

Lecția 1 • Modulele Angular și pornirea aplicației

Explică NgModule-urile, AppModule-ul rădăcină și modul în care Angular pornește aplicația. Oferă contextul structural necesar înainte de a construi componente.

Lecția 2 • Elemente esențiale TypeScript pentru Angular

Introduce tipurile TypeScript, interfețele și decoratorii necesari pentru a scrie cod Angular cu încredere. Facilitează trecerea de la cunoștințele de JavaScript la ecosistemul tipizat al Angular.

Lecția 3 • Introducere în framework-ul Angular

Acoperă rolul Angular în dezvoltarea modernă de frontend și arhitectura sa inspirată de MVC. Stabilește baza conceptuală pentru toate subiectele ulterioare despre framework.

Lecția 4 • Configurarea mediului de dezvoltare

Instalează și configurează Node.js, npm și Angular CLI. Asigură că fiecare student are un spațiu de lucru local consecvent și reproductibil.

Lecția 1 • Directive structurale încorporate

Aplică *ngIf, *ngFor și *ngSwitch pentru a controla dinamic structura DOM-ului. Demonstrează cum directivele extind expresivitatea șabloanelor.

Lecția 2 • Legarea proprietăților și evenimentelor

Învață fluxul unidirecțional al datelor prin legarea proprietăților și gestionarea evenimentelor utilizatorului prin legarea evenimentelor. Conectează logica componentelor la elementele DOM și la interacțiunile utilizatorilor.

Lecția 3 • Sintaxa șabloanelor și expresii

Acoperă limbajul expresiilor din șabloanele Angular, navigarea sigură și variabilele de referință din șabloane. Permite randarea dinamică a conținutului în vizualizările componentelor.

Lecția 4 • Hook-uri ale ciclului de viață al componentelor

Explorează întreaga secvență de hook-uri ale ciclului de viață, de la ngOnInit la ngOnDestroy. Învață când și de ce să folosești fiecare hook pentru inițializare și curățare.

Lecția 1 • Interogări ViewChild și ContentChild

Accesează programatic instanțe ale componentelor copil și conținut proiectat prin interogări. Permite coordonarea avansată a componentelor dincolo de legarea din șabloane.

Lecția 2 • Comunicarea părinte-copil cu @Input

Folosește @Input pentru a transmite date în jos pe arborele componentelor și validează intrările cu settere. Stabilește modelul principal de flux descendent al datelor în Angular.

Lecția 3 • Construirea de directive structurale personalizate

Implementează directive structurale folosind TemplateRef și ViewContainerRef pentru a manipula DOM-ul. Extinde capacitatea studenților de a crea logică de layout reutilizabilă.

Lecția 4 • Construirea de directive de atribut personalizate

Creează directive care modifică aspectul sau comportamentul elementului gazdă fără a schimba structura DOM-ului. Întărește modelul directivei introdus în Capitolul 2.

Lecția 1 • Crearea și furnizarea de servicii Angular

Generează servicii cu CLI și le înregistrează la nivel de modul, componentă sau domeniu rădăcină. Stabilește stratul de servicii ca loc pentru logica partajată.

Lecția 2 • Client HTTP și integrarea API-urilor REST

Configurează HttpClientModule și efectuează cereri GET, POST, PUT și DELETE. Conectează stratul de servicii la surse reale de date din backend.

Lecția 3 • Gestionarea erorilor și interceptoare HTTP

Implementează gestionarea globală a erorilor cu catchError și transformarea cererilor/răspunsurilor cu interceptoare. Produce modele de comunicare HTTP gata de producție.

Lecția 4 • Analiză aprofundată a injecției de dependențe

Explorează ierarhia injectorului, token-urile de injecție și tipurile de furnizori. Permite controlul granular asupra modului în care dependențele sunt rezolvate în întreaga aplicație.

Lecția 1 • Gardieni de rută și control al accesului

Implementează gardieni CanActivate, CanDeactivate și CanLoad pentru a proteja rutele. Integrează autentificarea și autorizarea în stratul de navigare.

Lecția 2 • Încărcare lentă și rezolvitori de rute

Împarte aplicația în module de funcționalități încărcate la cerere și preia datele în avans cu rezolvitori. Îmbunătățește performanța inițială de încărcare și experiența utilizatorului.

Lecția 3 • Rute imbricate și outlet-uri denumite

Structurează rute copil sub rute părinte și folosește outlet-uri denumite pentru vizualizări auxiliare. Sprijină cerințe complexe de layout în aplicații mari.

Lecția 4 • Configurarea router-ului și navigarea de bază

Configurează RouterModule cu definiții de rute și adaugă router-outlet și routerLink. Stabilește fundația pentru toate funcționalitățile de navigare.

Lecția 1 • Formulare dinamice cu FormArray

Folosește FormArray pentru a adăuga și elimina controale de formular în timpul execuției pentru date de lungime variabilă. Gestionează scenarii reale, cum ar fi elemente de linie repetate.

Lecția 2 • Validatori și validare personalizată

Aplică validatori sincroni și asincroni și creează funcții de validare personalizate reutilizabile. Asigură integritatea datelor înainte de trimitere.

Lecția 3 • Trimiterea formularului și gestionarea stării

Gestionează trimiterea, resetarea și starea dirty/touched a formularului pentru a oferi o experiență utilizator de calitate. Conectează datele formularului la apelurile de servicii introduse în Capitolul 4.

Lecția 4 • Formulare bazate pe șabloane

Folosește ngForm, ngModel și validatorii încorporați pentru a construi formulare declarativ în șablon. Introduce conceptele de formulare cu un efort minim de TypeScript.

Lecția 1 • NgRx Entity și DevTools

Simplifică gestionarea colecțiilor cu NgRx Entity și inspectează starea cu Redux DevTools. Accelerează dezvoltarea și depanarea funcționalităților care utilizează intens magazinul de stare.

Lecția 2 • Introducere în NgRx Store

Instalează NgRx și definește acțiuni, reductori și magazinul de stare pentru o parte de funcționalități. Stabilește modelul Redux în ecosistemul Angular.

Lecția 3 • Stare bazată pe servicii cu BehaviorSubject

Stochează și partajează starea între componente folosind BehaviorSubject într-un serviciu. Oferă o soluție ușoară de gestionare a stării înainte de a introduce NgRx.

Lecția 4 • Efecte NgRx pentru efecte secundare

Gestionează operații asincrone, cum ar fi apelurile HTTP, în afara reductoarelor, folosind NgRx Effects. Menține reductoarele pure și centralizează logica efectelor secundare.

Lecția 1 • Strategii de deployment și integrare CI/CD

Implementează build-uri Angular pe hosting static și integrează pipeline-uri automate pentru livrare continuă. Închide ciclul de dezvoltare de la cod la producție.

Lecția 2 • Testarea unitară a componentelor și serviciilor

Scrie teste unitare cu Jasmine și TestBed pentru componente, servicii și pipe-uri. Validează unitățile individuale în izolare înainte de integrare.

Lecția 3 • Optimizarea pachetelor și configurarea build-ului

Configurează build-urile de producție, tree shaking și încărcarea diferențiată pentru o dimensiune optimă a pachetelor. Pregătește aplicația pentru constrângerile reale de deployment.

Lecția 4 • Testare end-to-end cu Cypress

Automatizează testarea fluxurilor utilizator cu Cypress pentru a valida comportamentul complet al aplicației. Completează testele unitare cu scenarii realiste bazate pe browser.