Video Corso
Angular Fundamentals
Dopo aver lavorato con grandi clienti internazionali e formato per anni aziende e freelance offline, ho deciso di ascoltare i feedback dei miei studenti e sviluppare un corso su Angular, adatto sia ai principianti, che ai developer più esperti che già utilizzano il framework
IL PROGRAMMAACQUISTA
PANORAMICA
Cos'è Angular Fundamentals
Angular Fundamentals è un corso intensivo in cui si descrivono le principali funzionalità del noto framework sviluppato da Google.
Moltissimi esempi e casi d’uso tramite i quali non solo potrete apprendere i concetti fondamentali per la creazione di Single Page Application ma applicare fin da subito pattern, metodologie e best practice tramite sessioni di teoria, pratica e live-coding.
Il pacchetto include:
Più di 150 video di teoria e pratica con moltissime sessioni di live-coding dalle basi alle best practice: sviluppo applicazioni e decine di casi d’uso ed esempi pratici
Avrai accesso ad uno speciale mini corso su Javascript ES6 e TypeScript, appositamente realizzato per semplificare l’apprendimento di framework e librerie front-end di ultima generazione come Angular, Vue o React
Il corso è stato realizzato in Angular 7 ma il codice sorgente, disponibile sotto ogni video, è stato aggiornato alla versione 13.
150
Video lezioni su Angular
39
Video lezioni su JavaScript e TypeScript
20
ore di materiale
A chi è rivolto?
Un corso adatto sia ai principianti che agli sviluppatori Angular che desiderano consolidare la propria conoscenza sul framework, apprendere nuove tecniche e best practice
BEGINNERS
Per tutti coloro che desiderano utilizzare Angular e creare Single Page Application tramite un percorso di studio graduale, ben strutturato, che permetta ai neofiti di partire da zero e raggiungere un buon livello in brevissimo tempo. L’unico requisito è la conoscenza di almeno un linguaggio di programmazione
ANGULAR DEVELOPERS
Per gli sviluppatori che già utilizzano Angular ma non ritengono di farlo nel modo corretto e/o desiderano migliorare la qualità del loro codice applicando best practices, pattern, metodologie e ottimizzando il codice allo scopo di renderlo più performante, leggibile e manutenibile
Punti di forza
Moltissimi esempi, casi d'uso reali, pattern e best practices
Tutto ciò di cui bisogno...
Tutto ciò che devi conoscere su Angular per essere produttivo nel minor tempo possibile: forms, styling, comunicazione REST API, dependency injection, custom omponents, moduli, router, animations e molto altro
Applicazioni Demo
Oltre a fornire moltissimi esempi per comprendere i concetti alla base del framework, sviluppiamo diverse applicazioni demo in Angular e Google Firebase per mettere in pratica i concetti appresi durante il corso
Best Practices
Dalle fondamenta del framework all'utilizzo di pattern, best practice e metodologie consolidate per la creazione di codice di qualità, scalabile e manutenibile
Organizzazione Progetti
Codice dichiarativo, approccio component-based, organizzazione dell’applicazione in moduli, immutabilità, ottimizzazione performance sono solo alcune delle tematiche trattate durante il corso
IL PROGRAMMA - ANGULAR
Consulta il programma completo
del corso Angular:
150 lezioni per una durata di 18 ore
- Introduzione al corso (4:44)
- Gli argomenti del corso in dettaglio (5:03)
- Single Page Applications e approccio component-based (14:37)
- Angular Framework: le funzionalità principali (17:17)
- Gruppo Facebook, supporto e Link
- Installazione e utilizzo di NodeJS e NVM (4:16)
- Installare Angular CLI e creare un progetto Angular (2:34)
- Introduzione al boilerplate (2:05)
- AppComponent e AppModule: parte 1 - intro (3:50)
- AppComponent e AppModule: parte 2 - code (3:44)
- ng new: parametri (1:59)
- UPDATE ANGULAR 10: leggere per evitare warning (1:33)
- Interpolation {{value}} (1:10)
- Native events: mouse e tastiera (5:48)
- Directives (5:19)
- Attributi e parentesi quadre (brackets) (6:29)
- Components (5:07)
- Pipes (5:17)
- Custom Types (5:46)
- Introduzione ai service e alla dependency injection (3:52)
- Comunicazione con server, REST API e HttpClient (5:03)
- La direttiva ngIf e l'opzione ngIf...else (6:02)
- La direttiva ngFor: introduzione e tipizzare collezioni (6:59)
- La direttiva ngFor: proprietà index, last, odd (3:30)
- La direttiva ngFor: manipolazione dati (5:58)
- La direttiva ngSwitch (4:53)
- Styles and Components (4:06)
- Inline CSS class (2:08)
- La direttiva ngClass (3:15)
- Inline Styling (3:27)
- La direttiva ngStyle (1:50)
- Librerie CSS 3rd party e angular.json (6:12)
- Input, "template reference variables", keyboard events (7:25)
- La direttiva ngModel: 1way vs 2 way binding (5:49)
- ngForm, ngModel e gestione data model (13:50)
- Form Validation (8:19)
- Form, validazione e gestione errori (4:09)
- Hello Components (5:52)
- Input Properties (2:32)
- Content Projection (7:35)
- Componenti "stateful" e Input default value (2:32)
- @Output event emitter: realizzare un TabBar component riutilizzabile (24:10)
- Lifecycle hook: ngOnInit (9:23)
- Lifecycle Hook: onChange (5:20)
- ChangeDetectionStrategy, ChangeDetectorRef e stato immutabile: ottimizzazione performance e controllo del rendering (14:45)
- Animated Collapsable Panel: trigger, style, state e animate (11:37)
- Animated TabBar: animations e ciclo di vita dei componenti (15:58)
- Animated Text: gestire gli eventi delle animation (14:02)
- Introduzione ad angular router (2:03)
- Utilizzo di Angular Router e creazione componenti con Angular CLI (6:15)
- Navigation Bar (5:33)
- AngularCLI ei il modulo AppRoutingModule (5:13)
- Passaggio parametri e ActivatedRoute (8:30)
- ActivatedRoute e Router API (6:23)
- Eventi del router & RxJS operators (4:50)
- Configurare un mock server: json-server (5:13)
- GET: Caricamento dati da REST API e custom types (9:30)
- DELETE: Cancellazione elementi e gestione errori XHR (8:39)
- Dynamic styles e migliorare il look & feel (7:45)
- POST: Aggiungere elementi alla collezione tramite form (9:55)
- PUT e PATCH: aggiornare un elemento (13:34)
- Dependency Injection, injector e providers (6:01)
- Condividere dati utilizzando i "Service" (8:43)
- Service, REST API e decoratore @injectable (10:57)
- Gestire lo stato applicativo (5:49)
- Moduli: introduzione (8:23)
- Applicazioni Modulari (5:38)
- es6 modules vs ngModules (2:21)
- Feature Modules (10:12)
- Shared Modules (11:25)
- Core Module (3:56)
- UPDATE Angular 9: nuova sintassi per gli import lazy dei moduli
- Router & Lazy Loading (11:56)
- Moduli e route di secondo livello (5:54)
- Router children e router-outlet secondario (5:34)
- UPDATE ANGULAR 8/9: lazy loading & dynamic imports (3:41)
- Creare la build del progetto e installare un webserver locale (3:09)
- Ottimizzazione build, production e tree shaking (2:41)
- Deploy delle applicazioni su Surge.sh (2:37)
- Pubblicare un'applicazione Angular su Surge.sh (0:54)
- environment variables: production vs development (5:44)
- Video demo dell'applicazione (0:20)
- PARTE 1: SVILUPPO APPLICAZIONE
- Layout statico HTML con CSS Grid (+ source code) (8:37)
- Creazione progetto, gestione router e impaginazione layout (11:36)
- Server REST, comunicazione server, model, gestione form e visualizzazione risultati (23:21)
- Card component e pipe: image gallery, forms, maps, rate, ... (34:35)
- Gestione del carrello (19:26)
- Autenticazione, "sicurezza" router utilizzando le guardie e protezione DOM (25:59)
- PARTE 2: APPROCCIO COMPONENT-BASED
- Approccio component-based - PART 1: hotel-form, hotel-list e shared components (16:42)
- Approccio component-based - PART 2: i componenti rimanenti (16:57)
- Approccio component-based - PART 3: card component flessibile e riutilizzabile (HostBinding) (17:02)
- Gestire il caso in cui il risultato della ricerca non produca risultati (4:08)
- PARTE 3: MODULI e LAZY LOADING
- Shared Module (5:57)
- Core Module (5:34)
- Features Modules (6:19)
- UPDATE Angular 9: leggere
- Router & Lazy Loading (21:06)
- NOTE FINALI
- Download Source Code
- Demo dell'applicazione (0:11)
- Creazione progetto, TSLint, installazione dipendenze e Mock Server (9:46)
- Creare "features components" da Angular-CLI e gestione router (4:04)
- GET e DELETE: visualizzazione e cancellazione dati dal server (7:40)
- PUT, PATCH e POST: modifica e inserimento dati (17:34)
- Download Source Code
- Organizzare il layout in componenti: CatalogList (8:05)
- Organizzare il layout in componenti: CatalogForm (14:20)
- Metodo onChanges del ciclo di vita dei componenti e decoratore @ViewChild (9:17)
- Download Source Code
- Organizzazione dell'applicazione in services (5:36)
- Gestire lo stato applicativo (8:18)
- Download Source Code
- Nested Components: componenti dentro componenti (5:12)
- Shared components: componenti riutilizzabili (9:35)
- Core Components: Navigation bar e router (4:17)
- Download Source Code
- Demo dell'applicazione "remote controller" (0:18)
- Creazione progetto con router (3:24)
- ADMIN: Creazione layout statico - HTML + CSS (16:21)
- VIEWER: Creazione layout statico - HTML + CSS (1:48)
- Introduzione a Firebase (3:22)
- AngularFire: installazione e configurazione (4:09)
- CONTROLLER: Creazione della galleria immagini realtime in Firebase (19:31)
- CONTROLLER: controllare le slide (7:24)
- VIEWER: visualizzazione delle immagini realtime (3:05)
- VIEWER: bug fix (9:29)
- VIEWER: aggiungere le animazioni (8:44)
- VIEWER: animation bug fix
- Testare l'applicazione da un dispositivo mobile tramite rete locale durante lo sviluppo: ng serve --host (1:19)
- StackBlitz: editor online per condividere snippet (3:34)
- Introduzione ai Reactive Forms - Video di test del talk @ Codemotion 2019 (40:53)
- Panoramica su Typescript 3.7 & Utility Types (14:06)
- IVY & Angular 9: dynamic Imports and lazy loading per componenti e moduli (21:29)
- Tip per configurare VisualStudio Code & migliorare gli Auto Import (5:02)
MINI CORSO JAVASCRIPT / TYPESCRIPT
Nel pacchetto riceverai anche un mini corso su JavaScript ES6+ e TypeScript realizzato allo scopo di fornire tutte le informazioni di cui hai bisogno per sfruttare fin da subito le potenzialità di framework e librerie JS di ultima generazione.
40 video per una durata di quasi 3 ore
- Introduzione ad ES6/TS, Babel e Webpack (8:48)
- Javascript ES6 - Cheatsheet
- var vs let - Block Scope vs Function Scope (4:06)
- Le costanti: const - Mutabilità vs Immutabilità (6:23)
- Template literals: stringhe multiline con espressioni (3:58)
- Short Object syntax (2:26)
- Destructuring Array (3:38)
- Destructuring Object - part 1 (5:47)
- Destructuring Object - part 2: nested props (3:27)
- Destructuring Object - part 3: rename & short object syntax (2:13)
- Array Spread operator: clone, merge e modifica array (3:15)
- Object Spread operator vs Object.assign (4:55)
- Arrow function (4:32)
- Array: map (4:10)
- Array: filter (2:41)
- Array: find & findIndex (3:29)
- Immutabilità in ES6, React, Angular, Redux (13:30)
- Classes, Ereditarietà e lexical this (6:41)
- Creazione progetto ES6 con webserver e npm (3:01)
- Hello ES6: il tag "script" (1:38)
- Import modules e type="module" (5:34)
- Import as (1:56)
- Import default (5:23)
- Promises (8:39)
- Fetch: comunicazione con il server (2:53)
- Async Await (2:31)
- Introduzione a TypeScript (1:29)
- Utilizzare il mio playground TypeScript (3:45)
- Utilizzare on-line playground: StackBlitz (3:19)
- Inferenza in TypeScript (2:36)
- Primitives Types (4:17)
- Tipizzare oggetti usando interface e gestione proprietà opzionali (5:55)
- Tipizzare oggetti complessi (4:14)
- Tipizzare array (3:15)
- Utilizzo di class e type per la tipizzazione (6:15)
- Classi: private vs public (1:41)
- Classi: getter & setter (3:42)
- Tipizzare funzioni (5:02)
- Type, literals e introduzione a Union types (1:56)
I contenuti del corso.
Il corso include tutto ciò di cui hai bisogno per iniziare ad essere produttivo con Angular nel minor tempo possibile: dalle basi alle best practices
Un esempio di lezione
inclusa nel corso.
In questa breve lezione andremo ad imparare:
Utilizzo della CLI
generazione componenti
approccio component based
Progetti modulari
RECENSIONI
Alcune delle recensioni che gli studenti del corso hanno lasciato sulle mie pagine Facebook e LinkedIn
Daniela Fertante
Fabio è molto fluido nelle spiegazioni, senza fronzoli e diretto al punto. I video sono ben suddivisi e strutturati e questo permette di avere sin da subito un’idea chiara del corso. Trovo molto utili le best practice consigliate e trovo interessanti gli esempi di live coding. Consiglio quindi questo corso, anche se chiamarlo tale è riduttivo poiche Fabio è sempre attivo su questa fantastica community ed è sempre di supporto, per qualsiasi problema.
Alessio Monterosso
Ho iniziato con un corso da 10 euro e lavorando su qualche piccolo progetto. Ha sempre funzionato tutto ma se ripenso al codice che ho scritto e come ho strutturato i progetti mi viene da ridere. Vorrei quasi buttarli giù e rifarli ma meglio non toccarli più... tornando al corso che dire, Fabio ha un ottima capacità di esprimersi, riesce a rendere semplici argomenti complessi
Valerio Di Dario
Ho scelto Angular, e dopo aver visto qualche corso e sentendo consigli di colleghi, ho scelto quello di Fabio. Sono riuscito a capire tutto senza tantissime difficoltà (senz’altro merito suo), le video lezioni sono chiare, ti coinvolgono, non annoiano e le tematiche sono molte. Inoltre Fabio è sempre disponibile a chiarimenti in caso.
Zack Nero
Il corso è stato molto interessante, stimolante, semplice, spiega "potabile" senza giri di parole, concetti molto chiari con esempi e risorse scaricabili oltre ad indicare alcuni tools interessanti/sconosciuti. Partendo dalle basi fino alla costruzione di un progetto complesso senza tralasciare alcune best partices utilissime. Il corso è consigliato per chi parte da zero fino a chi ha padronanza perchè le vie del signore sono infinite
Denis Saporetti
Una cosa che apprezzo molto nello stile di Fabio è la suddivisione della lezione, inizia con l'approccio o gli approcci, perchè spesso riesce a portare più di due o tre tecniche di programmazione che non si dovrebbero usare, per poi terminare con l'approccio corretto, è ottimo dal punto di vista dell'apprendimento, ti costringe a seguire il ragionamento e quindi a pensare. Non sono quindi le solite lezioni dove si esegue codice senza capire cosa si stia facendo
Claudia Valente
Durante un progetto era stato chiesto di usare Angular, ma non ne avevo la minima competenza. Online trovavo poco materiale, spesso riciclato e anche la documentazione è spesso ridotta all'osso. Stavo odiando Angular. Poi ha comprato il corso di Fabio Biondi, I soldi spesi meglio per un corso online. Il corso è ben strutturato, non si perde tempo ma ti spiega tutto quello che è essenziale sapere.
FAQ
Hai dubbi o domande? Contattami
• 10% per 2+ studenti
• 30% per 5+ studenti
• 50% per 10+ studenti
Teachable, la piattaforma americana utilizzata per erogare i corsi, si occupa di tutto il processo di pagamento e di mettere le ricevute di acquisto.
Essendo un sistema di pagamento extra EU, nel caso di acquisto con partita iva, l'iva non sarà applicata e quindi sarà tolto il 22% dal totale.
Prima di effettuare l'ordine guarda un esempio di fattura che riceverai.
Guarda un esempio di fattura
Per tutti gli aggiornamenti puoi seguirmi su Telegram e non dimenticare di iscriverti alla newsletter che trovi in homepage
Docente
FABIO BIONDI
Fabio Biondi, Microsoft MVP e Google Developer Expert, è uno sviluppatore freelance con più di 15 anni di esperienza nella creazione di applicazioni web enterprise.
Speaker in numerosi eventi nazionali, ha inoltre fondato diverse community italiane che si occupano di Javascript, Angular e React (~30000 membri)
Attualmente si occupa principalmente di formazione e consulenza su Javascript, Typescript, Angular, React, Next, Redux, NGRX e RxJS, Git.
Acquista il corso
Acquista il corso per accedere al materiale dove e quando vuoi...
per sempre!
Accesso a Vita
Corso Angular Fundamentals
Corso JavaScript / TypeScript
180 video
18 ore di lezione
Aggiornamenti
30 gg Soddisfatto o Rimborsato
TEAMS & ACQUISTI MULTIPLI
Sconti fino al 50% per team e aziende che necessitano di acquistare più di una licenza d'uso