Corso Angular
Corso Angular
Angular è un framework Javascript open-source client-side MVC/MVVM (Model View Controller/Model View ViewModel Pattern), realizzato da Google e supportato da una comunità di sviluppatori internazionale.
Lo si può definire come un framework di ultima generazione per lo sviluppo web. La sua documentazione ufficiale cita che “Angular è quello che HTML avrebbe dovuto essere se fosse stato progettato per sviluppare applicazioni”.
Angular è un’infrastruttura ottima per creare le moderne Single Page Application.
Angular è il framework front-end sviluppato e mantenuto da Google, pensato per creare applicazioni web moderne, scalabili e performanti. Basato su TypeScript, Angular offre un approccio strutturato e component-based che consente di realizzare Single Page Applications (SPA) mantenendo un codice pulito, modulare e facilmente manutenibile. È oggi una delle tecnologie più diffuse nel mondo enterprise grazie al suo ecosistema maturo, al supporto a lungo termine e alla stretta integrazione con strumenti professionali per lo sviluppo e il testing.
Il Corso Angular (per aziende) rivolto a sviluppatori front-end (24 ore, in videoconferenza live) fornisce una panoramica completa e aggiornata all’ultima versione di Angular. Attraverso lezioni interattive ed esercitazioni pratiche, i partecipanti impareranno a utilizzare l’Angular CLI, creare componenti e servizi, gestire il data binding, implementare il routing e consumare API REST. È previsto inoltre un modulo introduttivo su TypeScript, linguaggio su cui Angular si basa.
Il corso è rivolto a sviluppatori front-end e web developer con conoscenze di JavaScript, HTML e CSS che desiderano acquisire competenze concrete per realizzare applicazioni Angular professionali. Al termine, i partecipanti saranno in grado di sviluppare e strutturare applicazioni SPA moderne e manutenibili con Angular.
Corso attivato on-demand su richiesta, anche individuale in sede o in modalità virtual classroom online.
Requisiti per gli studenti: conoscenze base di Javascript (ES6), HTML5 e CSS3
Obiettivo Corso Angular: formare il discente con le competenze teoriche e pratiche per lo sviluppo applicazioni web con il framework Angular di ultima versione. Un caso di studio pratico permetterà ai discenti di entrare nel vivo e rendersi autonomi nello sviluppo.
Docente Sviluppatore Angular senior con pluriennale esperienza nel settore.
Corso Angular erogato solo per aziende e su richiesta. Modalità virtual classroom online o frontale.
Vuoi essere ricontattato?
Lasciaci il tuo numero telefonico e la tua email, ti richiameremo nelle 24h:
Programma Corso Angular – 24 ore (il programma sarà sempre aggiornato all’ultima versione di Angular corrente)
1. Introduzione ad Angular e il panorama moderno
- Architettura di base: componenti, template, moduli, reattività, change detection
- SPA e applicazioni moderne web: vantaggi, sfide, casi d’uso
- Perché scegliere Angular: punti di forza e limiti
- Panoramica delle novità recenti (signals, rendering strategies, moduli standalone, deferrable views, change detection ottimizzata)
2. Javascript moderno (ES2015+) aggiornato
- Tools: transpiler (Babel), bundler (Webpack / Vite / esbuild)
- Sintassi moderna: arrow functions, template literals, rest / spread, destructuring
- Moduli ES6 / import / export
- Classi in ES6, ereditarietà, getters/setters
- Promise, async/await, generatori
- Uso degli spread, operazioni su array, oggetti, map/filter/reduce
3. TypeScript per Angular
- Tipi primitivi, union, intersection, generics
- Interface, type alias, tuple
- Tipi mapped, conditional types, utility types
- Decoratori di classe / proprietà / metodi / parametri
- Classi avanzate, ereditarietà, mixin
- Nullability, strict mode, controllo dei tipi
- Relazioni con Angular: come Angular sfrutta TypeScript, decorator metadata, riflessione
- Esercizio: definizione di interfacce e classi di modello da usare in un’app Angular
4. Angular CLI, setup e struttura del progetto
- Introduzione ad angular-cli
- Installazione Node.js / npm / pnpm / yarn
- Creazione di un progetto: `ng new`, opzioni configurabili (strict mode, routing, stile CSS/SCSS, moduli standalone)
- Panoramica del contenuto generato (angular.json, tsconfig, main.ts, app.module, file di ambiente)
- Comandi principali: serve, build, test, lint, generate, add
- Aggiornamenti da versioni precedenti: cosa cambia con Angular 20 (ad esempio default standalone, signals, rendering strategies)
- Esercizio: bootstrap di un nuovo progetto Angular e lancio locale
5. Template, direttive strutturali e stilizzazione dinamica
- Template syntax: interpolazione, property binding, attribute binding
- Direttive strutturali: `*ngIf`, `*ngFor`, `*ngSwitch`, `ng-template`, `ng-container`
- Direttive attribute: `ngClass`, `ngStyle`, binding dinamico
- Encapsulation: `ViewEncapsulation` (Emulated, ShadowDOM, None)
- Stilizzazione: file CSS/SCSS, inline styles, styleUrls
- Animazioni con `@angular/animations`
- Esercizio: costruzione di un componente con comportamento condizionale + animazioni
6. Data Binding e cicli di cambio
- One-way binding (property binding, event binding)
- Two-way binding con `[(ngModel)]` (in moduli con FormsModule)
- Binding di attributi ARIA, classi CSS, stili, proprietà DOM
- Differenza tra binding unidirezionale e bidirezionale
- Ciclo di vita di Angular (hooks: `ngOnInit`, `ngOnChanges`, `ngDoCheck`, `ngAfterViewInit` etc.)
- Strategie di change detection, segnali e „reactivity model“ moderno
- Esercizio: tracciare l’aggiornamento dei dati legati al binding e sperimentare il cambio di strategia
7. Componenti Angular
- Filosofia component-based
- Decorator `@Component` e metadata: selector, template, styles, imports (moduli standalone)
- Componenti standalone vs dichiarati in moduli
- Input / Output: `@Input()`, `@Output()`, `EventEmitter`
- Comunicazione parent ↔ child, event bubbling, projected content (ng-content)
- Content projection, view queries (ViewChild, ContentChild)
- Componenti riutilizzabili, moduli feature
- Esercizio: creare un componente figlio parametrizzato con input/output
8. Servizi, Dependency Injection e Stato
- Decoratore `@Injectable()`
- Il sistema di Dependency Injection di Angular (injector, scope, providers)
- Servizi singleton e a livello di modulo o componente
- Condivisione dei dati tra componenti via servizi
- HTTP client e REST API (HttpClientModule, HttpClient, request/response, intercettori)
- Introduzione a RxJS: Observable, Subject, operators (map, switchMap, filter, tap)
- Architetture di stato: pattern Redux / NgRx / segnali / store locali — panoramica, quando usarli
9. Routing e navigazione per applicazioni complesse
- Modulo `@angular/router`
- Configurazione delle rotte (path, component, redirect, pathMatch)
- Parametri ruta, query params, route data, paramMap
- Navigazione programmatica e routerLink
- Lazy loading di feature modules (o moduli standalone caricati lazy)
- Route guards: `CanActivate`, `CanDeactivate`, `Resolve`, `CanLoad`
- Nested routes, outlet multipli, auxiliary routes
- Preloading / deferrable loading / strategia di caricamento
10. Moduli, lazy loading e architettura a moduli
- Modulo `@NgModule`: declarations, imports, exports, providers, bootstrap
- Differenza tra moduli di funzione (feature modules), moduli condivisi (shared), moduli core
- Moduli standalone — quando e come usarli
- Lazy loading vs eager loading
- Organizzazione di un’app enterprise: struttura cartelle, feature modules, shared modules
11. Formulazione (Forms) e validazione
- Approccio template-driven (FormsModule)
- `ngModel`, `ngForm`, validazioni base (required, minlength, pattern)
- Reactive forms (ReactiveFormsModule): `FormControl`, `FormGroup`, `FormArray`
- Validatori sincroni e asincroni
- Validazioni custom, cross-field validation
- Status form, errori, feedback visivo
- Form dinamici (aggiunta/rimozione controlli)
12. Ottimizzazione, performance e tecniche avanzate
- Change detection strategies: Default vs OnPush
- Signals e reattività moderna (computed, effect)
- Deferable views (`*ɵɵdefer` / `defer` API) e rendering progressivo
- Suspense / deferred loading dei componenti
- Preloading strategico, prefetch
- Detaching change detection manuale
- Analisi bundle e ottimizzazione (tree shaking, bundle splitting)
- Lazy loading di moduli e componenti
- SSR / SSG / hydration (in overview)
13. Testing in Angular
- Testing dei componenti: `TestBed`, fixture, async, fakeAsync
- Testing dei servizi: injection, mock HTTP
- Testing diretive, pipe e guard
14. Deployment, build e aggiornamenti
- Modalità di build: `ng build`, `–prod`, `–configuration`, output dist
- Ottimizzazioni di produzione: minificazione, hashing, lazy load
- Deploy su server statici / hosting (Netlify, Vercel, Firebase, Azure Static Web Apps)
- Aggiornamento Angular con `ng update`
- Gestione versioni, breaking changes, deprecazioni
- Strategie upgrade per progetti in produzione