Programmazione
Corso Angular – Sviluppo Front-End
Sviluppa applicazioni web con Angular partendo da HTML e TypeScript. Lavori su componenti, navigazione, flussi di dati e integrazione con servizi REST, applicando le basi del web che già conosci.
Cosa imparerai
- Creare componenti Angular con TypeScript
- Gestire template, binding, direttive e pipes
- Condividere logica con service e dependency injection
- Usare Observable e RxJS
- Gestire routing e form
- Collegare l’applicazione a servizi REST
Programma
11 sezioni · 40 ore complessive
Fondamenti Web
HTML, CSS e JavaScript (5 ore): Architettura web: client-server, HTTP, request/response
HTML5: struttura di una pagina, tag semantici, form e input
CSS3: selettori, box model, layout con Flexbox e Grid
Responsive design: media query e approccio mobile-first
JavaScript ES6+: variabili (let, const), arrow function, template literal
Array e oggetti: destructuring, spread operator, metodi funzionali (map, filter, reduce)
Programmazione asincrona: callback, Promise, async/await
DOM manipulation e gestione degli eventi
Esercitazione: creazione di pagine web interattive con HTML, CSS e JavaScript
TypeScript (4 ore)
Introduzione a TypeScript: tipizzazione statica e vantaggi rispetto a JavaScript
Tipi base: string, number, boolean, array, tuple, enum, any, unknown
Interface e type alias: definizione e differenze
Classi: proprietà, metodi, modificatori di accesso, ereditarietà
Generics: funzioni e classi generiche
Decoratori: sintassi e utilizzo (fondamentale per Angular)
Union type, intersection type e type narrowing
Compilazione e configurazione di tsconfig.json
Esercitazione: riscrittura di codice JavaScript in TypeScript
Introduzione ad Angular (3 ore)
Cos’è Angular: architettura, filosofia e confronto con altri framework
Angular CLI: installazione, creazione e struttura di un progetto
Moduli, component e template: concetti fondamentali
Standalone component vs NgModule: approcci a confronto
Ciclo di vita di un’applicazione Angular
Esercitazione: creazione e analisi del primo progetto Angular
Component e Data Binding (4 ore)
Anatomia di un component: decorator, classe, template, style
Interpolation: {{ }} e binding di espressioni nel template
Property binding: [property] e binding unidirezionale
Event binding: (event) e gestione degli eventi utente
Two-way binding: [(ngModel)] e sincronizzazione bidirezionale
Lifecycle hooks: ngOnInit, ngOnChanges, ngOnDestroy e altri
Esercitazione: costruzione di component interattivi con tutti i tipi di binding
Direttive e Pipes (3 ore)
Direttive strutturali: *ngIf, *ngFor, *ngSwitch e nuova sintassi @if/@for
Direttive di attributo: ngClass, ngStyle
Creazione di direttive personalizzate
Pipes built-in: date, uppercase, lowercase, currency, number, json
Pipes personalizzate: creazione e utilizzo
Pure vs impure pipes: differenze e performance
Esercitazione: lista dinamica con direttive, filtri e pipe personalizzate
Comunicazione tra Component (3 ore)
@Input(): passaggio dati dal component padre al figlio
@Output() ed EventEmitter: comunicazione dal figlio al padre
Template reference variable e @ViewChild
Comunicazione tramite Service condiviso
Pattern container/presentational component
Esercitazione: applicazione multi-component con comunicazione bidirezionale
Services e Dependency Injection (3 ore)
Introduzione ai Service: separazione della logica di business
@Injectable() e il sistema di Dependency Injection di Angular
providedIn: root, module e component-level injection
Singleton service vs service con scope limitato
Organizzazione dei service: best practice e pattern
Esercitazione: refactoring di un’applicazione con service e DI
Observable e RxJS (4 ore)
Programmazione reattiva: concetti fondamentali
Observable, Observer e Subscription
Subject e BehaviorSubject: multicast e stato condiviso
Operatori RxJS essenziali: map, filter, tap, switchMap, mergeMap
Gestione degli errori: catchError, retry
Pipe async nel template: sottoscrizione automatica
Unsubscribe e gestione della memoria: takeUntil, DestroyRef
Esercitazione: flussi di dati reattivi con RxJS
Routing e Navigazione (3 ore)
Configurazione del Router: routes, RouterModule, RouterOutlet
Navigazione: routerLink e navigazione programmatica
Route con parametri: ActivatedRoute, snapshot e observable
Child routes e lazy loading dei moduli
Route guards: CanActivate, CanDeactivate e autenticazione
Esercitazione: applicazione multi-pagina con routing, parametri e guards
Forms (4 ore)
Template-driven forms: ngModel, validazione e messaggi di errore
Reactive forms: FormGroup, FormControl, FormBuilder
Validatori built-in e validatori personalizzati
Validazione asincrona
Form dinamici: FormArray e generazione di campi a runtime
Best practice: scelta tra template-driven e reactive forms
Esercitazione: form complesso con validazione e feedback visuale
HTTP e Invocazione di Servizi REST (4 ore)
HttpClient: configurazione e utilizzo
Operazioni CRUD: GET, POST, PUT, DELETE verso API REST
Tipizzazione delle risposte con interface TypeScript
Gestione degli errori HTTP: catchError, retry e feedback all’utente
Interceptor: autenticazione, logging e gestione centralizzata delle richieste
Loading state e spinner durante le chiamate HTTP
Integrazione completa: component → service → HTTP → API REST
Esercitazione finale: applicazione Angular completa con consumo di API RESTful
A chi è rivolto
- Profilo ideale
-
Per chi conosce le basi del web e vuole approfondire lo sviluppo di applicazioni front-end con Angular.
- Prerequisiti
-
Conoscenza delle basi del web
- Livello orientativo
-
Intermedio
Come funziona
Lezioni individuali
Un docente dedicato ti segue nelle attività previste dal programma.
Percorso personalizzato
Esempi, esercitazioni e ritmo tengono conto del tuo livello e dei tuoi obiettivi.
Orari concordati
Organizziamo gli appuntamenti con la segreteria, prima dell’inizio del corso.
In aula o online
Le lezioni sono individuali, in aula a Napoli oppure online in diretta. Modalità e orari si concordano con la segreteria.
My Formazione
Il tuo corso, anche fuori dalla lezione.
Nell’area riservata trovi i tuoi corsi, le lezioni svolte, le presenze, i materiali e gli attestati.
Per i corsisti già registrati
Il metodo Formazione Srl
Una lezione costruita su di te
Il programma è la base del percorso. Il docente adatta esempi, esercitazioni e ritmo al tuo punto di partenza e alle attività che vuoi approfondire.
Informazioni pratiche
- Durata
-
40 ore
- Modalità
-
In aula o online
- Prezzo
-
€ 2.440,00 IVA inclusa
- Sede
-
Napoli
- Prerequisiti
-
Conoscenza delle basi del web
- Livello orientativo
-
Intermedio
Domande frequenti
Servono le basi del web?
Il percorso è rivolto a chi conosce già le basi del web e vuole approfondire lo sviluppo front-end con Angular.
Si affronta la comunicazione con servizi REST?
Sì. Il programma comprende integrazione con servizi REST, oltre a componenti, navigazione e gestione dei dati.
Come si organizzano le lezioni?
Le lezioni sono individuali, in aula a Napoli oppure online in diretta. Modalità e orari si concordano con la segreteria.
Personalizzazione e flessibilità
I corsi individuali offrono maggiore flessibilità. Puoi concordare:
- La data di inizio del corso.
- Il numero di lezioni settimanali e gli orari.
- Un pacchetto con monte ore a scalare, che consente di recuperare sempre le lezioni in caso di assenza.
- Un percorso didattico su misura, adattato alle tue esigenze personali e/o professionali.
Richiedi informazioni
Hai domande su questo corso?
Indica i tuoi recapiti, cosa vuoi imparare e la tua esperienza con lo strumento. La segreteria ti fornirà informazioni sul corso e sulla sua organizzazione.
Il corso che ti interessa
Angular – Sviluppo Front-End