230
videos
videos
11+
hours
hours
150+
snippets
snippets
Video Course
Language:
Angular Evolution (v.19)
Un video corso per imparare a sviluppare applicazioni web con la più recente versione di Angular
In questo corso:
1
Il corso Angular in italiano più aggiornato
2
Più di 11 ore di lezione, 200 video e 150 snippets
3
Micro Learning: lezioni brevi e pratiche
4
Quiz e Cheatsheet per ripassare gli argomenti
5
L'ideale per chi non ha mai usato Angular o per chi desidera aggiornarsi alle più recenti API e pattern
6
SUPER BONUS: ulteriori 8 ore di lezione su RxJS e la programmazione reattiva in Angular
# Introduzione
Angular, il framework di sviluppo Front-End creato da Google, si è affermato negli anni come uno strumento indispensabile per la creazione di applicazioni web enterprise.
Offre una robusta architettura che semplifica lo sviluppo di scenari complessi, migliorando la manutenibilità del codice e consentendo la creazione di applicazioni scalabili.
Un nuovo framework!
Dalla versione 17 di Angular sono state introdotte moltissime novità che hanno totalmente stravolto il framework!
# Semplice, potente e performante!
Angular è ora molto più semplice e performante rispetto alle precedenti versioni ma, allo stesso tempo, rimane il framework front-end più potente e ricco di funzionalità per la creazione di applicazioni web.
Grazie a questo video corso, in pochi giorni, imparerai a:
1
Creare Single Page Application con le più recenti funzionalità del framework
2
Creare componenti riutilizzabili
3
Ottimizzare il codice per ottenere il massimo delle performance
Un corso realizzato a gennaio 2024 da Fabio Biondi, Google Developer Expert in Angular, e aggiornato alla più recente versione del framework, la 19.
Teaser - no audio
# Prima di Angular v.17...
...il framework era troppo complesso e la DX (Developer Experience) in alcuni scenari era decisamente carente!
Soprattutto i neo-programmatori si sono spesso lamentati per la curva di apprendimento iniziale un po' ripida ma, anche per i più esperti, non è mai stato davvero semplice.
Anche le performance non erano il massimo se confrontate con i più recenti framework.
Tuttavia, solidità, quantità e qualità delle funzionalità incluse nel framework, lo hanno sempre messo in rilievo rispetto ai competitor.
1
Semplificandolo
2
Migliorando la Developer Experience
3
Aumentando le prestazioni
# Angular è rinato!
La versione v.17 ha totalmente stravolto il framework che, pur mantenendo la retrocompatibilità con il passato, ha introdotto una moltitudine di API che lo ha semplificato e reso più performante rispetto al passato.
Il framework è così differente rispetto al passato che il team Angular ha ben pensato di effettuare un re-brand (nuovo logo e nuovo sito) e di definirla "angular renaissance", ovvero la "rinascita di Angular".
# Il corso
L'introduzione degli standalone components, dei Signals, della nuova control flow syntax e di moltissime nuove API ha potenziato e, allo stesso tempo, snellito il framework rispetto alle precedenti versioni, eliminando la necessità di creare sovrastrutture complesse e semplificando notevolmente il processo di sviluppo.
Per questo motivo, pur avendo già a catalogo il corso Angular Fundamentals (il mio corso più venduto) ho deciso di realizzarne uno totalmente nuovo, completamente riscritto per sfruttare al massimo le potenzialità delle nuove API e funzionalità introdotte nelle più recenti versioni.
Guarda il video per saperne di più:
# Punti di forza
Un corso per apprendere le più recenti funzionalità, API e buone pratiche per lo sviluppo di applicazioni web utilizzando Angular, il framework front-end di Google.
Tutto ciò di cui hai bisogno per essere produttivo nel più breve tempo possibile ma con solide fondamenta e senza trascurare aspetti come ottimizzazione delle performance e qualità del codice.
Perché perdere tempo con video lunghi e tediosi, creati al solo scopo di allungare il corso?
Lezioni brevi, molto pratiche e "velocizzate" in post-produzione nelle parti più noiose e ripetitive.
Approfondimenti sul linguaggio TypeScript e RxJS per sfruttare al meglio le potenzialità del framework
Dopo ogni capitolo potrai verificare quanto appreso grazie ad un breve quiz di verifica. Avrai, inoltre, a disposizione diversi Cheatsheet PDF da scaricare
Sfruttiamo le API più recenti del framework: Signal, New Control Flow syntax, Defer blocks, novità su router, dependency injection, SSR, componenti e molto altro
Il codice è disponibile sotto ogni video con playground interattivi tramite i quali potrai subito sperimentare e replicare velocemente quello che è stato svolto nella lezione. Troverai spesso anche dei link di approfondimento
In omaggio il video corso Reactive Programming in Angular & RxJS con ulteriori 8 ore di lezione e decine di esempi e casi d'uso con Angular e RxJS.
# Il corso più aggiornato su Angular
Sfrutta API, paradigmi e metodologie per sviluppare applicazioni web con la più recente versione del framework.
Nel corso:
• Angular Fundamentals: template dinamici, stili, binding, API, ...
• Diversi tip'n'tricks su TypeScript e RxJS
• Signals e Gestione stato
• Nuova Control Flow Syntax
• Creazione componenti riutilizzabili
• Gestione Router e applicazioni multi-view
• Comunicazione con il server tramite REST API
• Organizzazione progetti in componenti e servizi
• Applicare best practices e migliorare le performance
• Sfruttare il motore di Dependency Injection
• Deploy e introduzione al component testing in Cypress
Guarda il video per ulteriori dettagli sui contenuti del corso
# Prestazioni e Ottimizzazioni
Pur essendo un corso che parte delle fondamenta, ho dato molto spazio al concetto di performance e ottimizzazione del codice:
• Analisi dei render
• Funzionamento della Change Detection
• Strategie per ottimizzare i render, con e senza i Signals
• Lazy Loading e ottimizzazione del bundle...
• ...e le più recenti funzionalità dei blocchi @defer
• Utilizzo degli Angular Dev Tools
# Reusable Components
Durante il corso creeremo un set di componenti riutilizzabili senza l'ausilio di UIKIT e dipendenze di terza parti (eccetto Tailwind e Daisy UI per i CSS).
La creazione di diversi componenti riutilizzabili ti permetterà di apprendere e acquisire confidenza con alcune delle funzionalità fondamentali del framework e, allo stesso tempo, di essere sufficientemente autonomo nel gestire diverse casistiche senza necessariamente ricorrere all'ausilio di librerie di terze parti, astraendo e creando componenti flessibili e modulari.
# PER I PIÙ ESPERTI...
Il corso include tre capitoli bonus con altri contenuti esclusivi e aggiornati alle ultime versioni:
Spesso utilizzato per scrivere test E2E in modo davvero semplice, Cypress integra anche delle utilissime funzionalità per il Component Testing, che in questo corso esploreremo molto velocemente.
Auth0 rappresenta una delle piattaforme più utilizzate per la creazione di sistemi di autenticazione, flessibili solidi e scalabili.
Utilizzare Server Side Rendering (SSR) e Static Site Generation (SSG) per sfruttare diverse strategie di pre-rendering e creare applicazioni performanti e SEO Friendly
# Metodologia di insegnamento
Amo i video brevi, che vadano dritti al punto!
E non sopporto le perdite di tempo, i corsi dove è necessario impostare la riproduzione a 2x per evitare che mi addormenti, creati al solo scopo di far sembrare il corso più interessante.
E non sopporto le perdite di tempo, i corsi dove è necessario impostare la riproduzione a 2x per evitare che mi addormenti, creati al solo scopo di far sembrare il corso più interessante.
Per questo motivo:
A description
1
Il percorso e gli esempi sono stati progettati con cura per fornire tutte le informazioni di cui si ha bisogno per essere produttivi nel minor tempo possibile
2
Non solo descrivo le funzionalità del framework ma cerco di fornire solide fondamenta, spiegando spesso i PERCHÈ, i COME e COSA accade dietro le quinte.
3
Il processo di post-produzione è "immenso": un video di 10 minuti spesso diventa di 1 o 2 minuti, tagliando sbavature, errori, velocizzando le parti lente che non aggiungono valore reale ed eliminando tutte le parti superflue
# Approfondimenti
Vuoi imparare RxJS e le fondamenta della programmazione reattiva?
In questa piattaforma è disponibile il video corso Reactive Programming in Angular & RxJS che include più di 8 ore di lezione aggiuntive e decine di esempi e casi d'uso per:
- Imparare le fondamenta del paradigma funzionale reattivo in JavaScript
- Utilizzare e creare sequenze reattive sfruttando moltissimi operatori
- Comprendere le differenze tra Unicast e MultiCasting, Cold e Hot observables
- Sfruttare il potenziale di RxJS in applicazioni Angular con decine di casi d'uso con forms, HttpClient, Router e molto altro
Consulta il nostro catalogo e troverai moltissimi altri corsi su Angular: forms, componenti avanzati, state management in NGRX e molto altro
11+
Ore di
lezione
lezione
230
Video
Tutorials
Tutorials
150+
Interactive
Snippets
Snippets
Lezioni
Introduzione
01. Angular &. TypeScript Essentials
• 01. Creare un progetto Angular Standalone (v.17)
videos 2
snippets• Creare un progetto Angular Standalone (v.19)
1 video
• CheatSheet PDF: Standalone Projects
• 02. Interpolation - Template Tags
1 video 1
snippet• 03. Events
1 video 1
snippet• 04. Class Methods
1 video 1
snippet• 05. Property Binding e Dynamic Attributes
1 video 1
snippet• 06. CSS Esterni
1 video 1
snippet• 07. CSS Styles nello stesso file
1 video 1
snippet• 08. Dynamic class names con [class.Name]
1 video 1
snippet• 09. Dynamic Attributes and Class Methods
1 video 1
snippet• 10. La direttiva ngClass
1 video 1
snippet• 11. ngclass - obj, array, stringhe
1 video 1
snippet• 12. inline-style
1 video 1
snippet• 13. style suffix operator
1 video 1
snippet• 14. ngStyle
1 video 1
snippet• 15. Bootstrap CSS via CDN
1 video 2
snippets• 16. Bootstrap CSS via npm
1 video 1
snippet• APPROFONDIMENTO: il file angular.json
1 video
• 17. Tailwind CSS
1 video 5
snippets• 18. Tailwind Global css
1 video 2
snippets• 19. Daisy UI and Tailwind
1 video 3
snippets• 20. MouseEvent, event$ e types - creare una tooltip
1 video 1
snippet• 21. Keyboard events and event target
1 video 2
snippets• QUIZ: Angular Fundamentals - Pt. 1
• 22. TemplateReference Variable
1 video 1
snippet• 23. ViewChild and Template Reference Variables
1 video 1
snippet• 24. Component LIfecycle - AfterViewInit and strict null check
1 video 1
snippet• 25. Pipes
1 video 1
snippet• 26. CommonModule
1 video 1
snippet• 27. Image and Local Assets
1 video 2
snippets• 28. ngIf
1 video 1
snippet• 29. ngFor, contextual props e typed array
1 video 1
snippet• 30. ngSwitch, union type e strict mode
1 video 1
snippet• 31. ngSwitch, ngFor, Literal Types e Union
1 video 1
snippet• 32. Esempio - Mini Slide Gallery
1 video 2
snippets• 33. Esempio - TodoList
1 video 1
snippet• 34. Esempio - ToDoList With Immutability
1 video 1
snippet• 34B - Validazioni
1
snippet• 35. Angular Dev Tools - Profiler - Analisi Change Detection
1 video 4
snippets• 36. Angular Dev Tools - Components
1 video 1
snippet• QUIZ: Angular Fundamentals - Pt. 2
02. Signals
• 01. Introduzione ai Signal
1 video
• 02. Signal: set e update
1 video 2
snippets• 03. Signals: Effects
1 video 1
snippet• 04. Change Detection e Performance
1 video 2
snippets• 05. Computed Property e Signal Derivati
1 video 1
snippet• 06. Inner Computed Signals - Ottimizzare ulteriormente le prestazioni
1 video 1
snippet• CheatSheet PDF: Signals
• QUIZ: Signals
• 07. Linked Signals (Angular v.19)
1 video 2
snippets03. Control Flow Syntax e Signals
• 01. ngIf e Signals
1 video 1
snippet• 02. ngFor e Signals
1 video 3
snippets• 03. @if block
1 video 1
snippet• ATTENZIONE: BUG @if block
• 04. @switch block - wizard multi step
1 video 1
snippet• 05. @for e @empty blocks
1 video 1
snippet• 06. @for e computed Signals
1 video 2
snippets• 07. Contextual Variables, @if inside @for
1 video 2
snippets• 08. Multiple Signals - create a tabbar navigation
1 video 1
snippet• 09. Todo List with signals
1 video 1
snippet• QUIZ: Control Flow
04. Standalone Components Fundamentals
• 01. Creare un componente Phone riutilizzabile
1 video 4
snippets• 02. Input Properties
1 video 2
snippets• 03. Input required
1 video 1
snippet• 04. Input Transform
1 video 2
snippets• 05. Input Transform booleanAttribute
1 video 1
snippet• 06. Input Transform numberAttribute
1 video 1
snippet• 07. Transform and TypeScript: literal types e union
1 video 1
snippet• 08. Input Alias
1 video 1
snippet• 09. External Templates
1 video 1
snippet• 10. Angular Dev Tools
1 video
• 11. Component LifeCycle - ngOnInit e ngOnDestroy
1 video 1
snippet• 12. Component LifeCycle - ngOnChanges
1 video 2
snippets• APPROFONDIMENTO LIFECYCLE / DIAGRAMMA
• 13. Input Setters
1 video 1
snippet• 14. Ottimizzazione performance con ChangeDetection onPush e Immutability
1 video 1
snippet• CheatSheet PDF: Standalone Components
• QUIZ: standalone components - Pt. 1
05. Reusable Components
• 01. TimeLine Component
1 video 1
snippet• 02. Accordion Component
1 video 1
snippet• 03. Alert Component - Output Event Emitter
1 video 1
snippet• 04. Alert - ngContent
1 video 1
snippet• 05. Alert - inputs
1 video 1
snippet• 06.Alert - Variants
1 video 1
snippet• 07. Alert - Icons - ngSwitch
1 video 1
snippet• 08. Alert - Customize Buttons
1 video 1
snippet• 09. Alert - Icon - Children Components
1 video 1
snippet• 10. Alert - Dynamic SVG Path con [attr.prop] - property vs attribute
1 video 1
snippet• 11. DropDown Component
1 video 1
snippet• 12. DropDown - posizionamento e apertura al click o al rollover
1 video 1
snippet• 13. Dropdown - Emettere eventi con parametri
1 video 1
snippet• 14. Dropdown- trick per forzare la chiusura
1 video 1
snippet• 15. Raggruppare componenti in uno Shared Module è una bad practice!
1 video 1
snippet• 16. Signal Inputs (v.17.1)
1 video
• QUIZ: standalone components - Pt. 2
06. Router e MultiView Applications
• 01. Creazione Componenti
1 video 1
snippet• 02. Router Outlet
1 video 1
snippet• 03. Navigation Bar e direttive router
1 video 1
snippet• 04. Lazy Loading, Bundle & Chunks
1 video 1
snippet• 05. Export Routes as Default
1 video 1
snippet• 06. Router Event, RxJS e Inject
1 video 1
snippet• APPROFONDIMENTI RxJS
1 video
• 07. ActivateRoute Service, RxJS e Router Data Property
1 video 1
snippet• 08. Router Params e RxJS
1 video 1
snippet• 09. withComponentInputBinding - data e params - the NEW WAY
1 video 1
snippet• 10. Nested Routes - creare lo showcase dello UIKIT
1 video 1
snippet• 11. Functional Router Guard
1 video 1
snippet• 12. View Transition API
1 video 1
snippet• QUIZ: router
07. HttpClient e REST API
• 01. DI, provideHttpClient e HttpClient
1 video 1
snippet• 02. HttpClient and Types
1 video 1
snippet• 03. Http Client e @for
1 video 1
snippet• 04. HttpClient, RxJS e Async
1 video 1
snippet• 05. HttpClient and Signals
1 video 1
snippet• 06. HttpClient, RxJS e ToSignal
1 video 1
snippet• 07. ToDo List - p1 - Panoramica
1 video 1
snippet• 08. ToDo List - p2 - HttpClient e JSON-Server
1 video 4
snippets• 09. Todo List - gestione errori
1 video 1
snippet• 10. Functional Http Interceptor
1 video 3
snippets• 11. Interceptor - Gestione errori
1 video 3
snippets• CheatSheet
• Quiz: HttpClient e RxJS
• 12. Resource API - Fetch Data (Angular v.19)
1 video 2
snippets• 13. Resource API with async await
1 video 1
snippet• 14. Resource API - Reload data
1 video 1
snippet• 15. Resource API e la proprietà request - Invocare il loader sulla base di un Signal
1 video 2
snippets• 16. Resource API - Abort Signal
1 video 1
snippet• 17. Resource API e RxJS con rxResource
1 video 1
snippet• 18. rxResource e forkJoin - multiple http requests
1 video 1
snippet08. Refactoring
• Refactoring - Introduzione
• 01. Creazione Component Shared - Http Error
1 video 1
snippet• 02. Todo List - suddivisione in componenti
1 video
• 03. Summary Component
1 video 1
snippet• 04. Todo Form Component
1 video 1
snippet• 05. Todo List Component
1 video 1
snippet• 06. Stateful vs Stateless components
1 video
• 07. Dependency Injection - API Service
1 video 1
snippet• 08. Dependency Injection - State e API
1 video 1
snippet• 09. Performance e Change Detection Strategy onPush
1 video 1
snippet• 10. DI e Component Providers
1 video 1
snippet09. State Management con Signals e Dependency Injection
• 01. Creazione Nuovo Progetto
1 video 1
snippet• 02. La pagina Shop
1 video 1
snippet• 03. Share State con Service e Signal- global cart
1 video 1
snippet• 04. Service e Computed properties
1 video 1
snippet• 05. Cart Page: template syntax blocks and signals
1 video 1
snippet• 06. Share Service tra componenti: Settings Service
1 video 1
snippet• 07. Setting Service: update Signals
1 video 1
snippet• 08. Editor Component
1 video 1
snippet• 09. Preview Component
1 video 1
snippet• 10. Ottimizzazione - Ridurre i render con le Computed Properties
1 video 1
snippet• 11. Ottimizzazione TypeScript - astrazione
1 video 1
snippet• 12. Ottimizzazione TypeScript - type safed keys con TypeScript keyof
1 video 1
snippet• 13. Ottimizzazione TypeScript - generics e type safe value
1 video 1
snippet• 14. cleancode e minor fixes
1 video 1
snippet• 15. Ottimizzazione - ChangeDetection onPush e performance
1 video 2
snippets• 16. Providers e Gerarchia Injector
1 video 1
snippet• QUIZ: Dependency Injection
10. Deploy
11. Deferrable Views
• 01. Creazione Progetto
1 video 1
snippet• 02. Creare "Utility components": Box e VSpace
1 video 1
snippet• 03. Deferrable Views con @defer e "when"
1 video 2
snippets• 04. @defer: on interaction e @placeholder
1 video 1
snippet• 05. @defer - on viewport
1 video 1
snippet• 06. @defer - on ViewPort Trigger
1 video 1
snippet• 07. @defer - on Timer
1 video 1
snippet• 08. @defer - @loading and @error
1 video 1
snippet• QUIZ: Deferrable Views
BONUS - 12. Autenticazione con Auth0
• Introduzione ad Auth0
1 video
• 01. Creare il progetto Angular Standalone
1 video 1
snippet• 02. Configurare Auth0 dalla dashboard
1 video
• 03. Installare e Configurare Auth0 SDK for Angular
1 video 1
snippet• 04. Login con Auth0 - Google Provider
1 video 2
snippets• 05. Login e Logout con Auth0 e RxJS
1 video 1
snippet• 06. Login e LogOut con Signals
1 video 1
snippet• 07. Get User Profile
1 video 1
snippet• 08. User Profile con Signals e Computed Signals
1 video 1
snippet• 09. CORS e Auto-Login
1 video
• 10. Auth0 e Router Guards
1 video 1
snippet• 11. Auth0 Interceptor
1 video 3
snippets• 12. Social Connection - Facebook Provider
1 video 1
snippet• 13. LocalStorage e Problemi con Silent Authentication
1 video 1
snippet• 14. Refresh Token
1 video 1
snippetBONUS - 13. Component Testing con Cypress
BONUS - 14: Angular SSR
• Introduzione: differenze tra CSR, SSR e SSG
1 video
• IMPORTANTE - Breaking Changes
• 01. Creare un progetto con supporto SSR-SSG
1 video
• 02. Gestione Router
1 video 2
snippets• 03. SSG - Build Static Apps
1 video 1
snippet• 04. HttpClient, withFetch e SSG
1 video 2
snippets• 05. isPlatformBrowser
1 video 1
snippet• 06. afterNextRender in Components
1 video 1
snippet• 07. afterNextRender in custom directives
1 video 1
snippet• 08. DOM, Signal e Injection
1 video 2
snippets• 09. DOM, Multiple Service e Server Config
1 video 4
snippets• 10. Mixed Mode - SSR e SSG nella stessa applicazione
1 video 3
snippetsFabio Biondi
Fabio Biondi is Google Developer Expert in Angular
He is a freelance Front-End trainer, speaker, content creator and community manager
He is a freelance Front-End trainer, speaker, content creator and community manager
# A chi è rivolto
- Principianti: Non hai mai utilizzato Angular?
Questo corso ti aiuterà ad essere produttivo in pochissimo tempo, sfruttando le più recenti API offerte dal framework
- Experts: Utilizzi Angular da tempo o hai già acquistato il corso Angular Fundamentals?
Scoprirai moltissime novità nel più breve tempo possibile!
Guarda il video di presentazione
Get This Course
Join our MemberShip program 
(italian only)
(italian only)Loading...
FAQ
How does the subscription work?
How does the subscription work?
The course is visible until subscription ends.
For example, if you buy a 1-year subscription today, you will have access for the next 12 months, without additional costs.
On expiry, the subscription will be automatically renewed unless you have cancelled the renewal in the "My Subscriptions" page accessible from your "Profile" page.
If you do not want to renew your subscription, we recommend that you cancel it a few days before the expiration date directly from the "My Subscriptions" page
For example, if you buy a 1-year subscription today, you will have access for the next 12 months, without additional costs.
On expiry, the subscription will be automatically renewed unless you have cancelled the renewal in the "My Subscriptions" page accessible from your "Profile" page.
If you do not want to renew your subscription, we recommend that you cancel it a few days before the expiration date directly from the "My Subscriptions" page
How do orders for schools, teams and groups work?
How do orders for schools, teams and groups work?
If you want to buy this course for your team, your students or if you are a buying group then you can take advantage of discounts.
Upon purchase, the ordering user will have immediate access to the course directly from its account.
Furthermore, coupons will also be sent to activate additional licenses.
Let’s take an example:Furthermore, coupons will also be sent to activate additional licenses.
1
You buy, for example, 5 licences
2
Your account will have instant access to the course
3
You will receive 5 additional coupons by email, that you can share with other students to allow them to activate the course independently
4
So 6 students will be able to access the course, you and other 5 users. So you will have an extra account for free
IMPORTANT: only the user who purchased the course can renew the subscription, change the payment method or cancel the subscription.
Can I receive the invoice?
Can I receive the invoice?
Sure! Remember to enter your billing information at the time of purchase, before confirming your order
Is there a refund if I am not satisfied?
Is there a refund if I am not satisfied?
You can request a refund within 15 days of the date of purchase at info@learnbydo.ing
Questions?
Questions?
Write us an email at info@learnbydo.ing
Start today for free!
Create a LearnByDo.ing account for free to see all the protected content, get exclusive material, join giveaways, and use all the platform’s features
