Il corso include:

Video corso Angular Fundamentals

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

Mini corso JavaScript & TypeScript

Incluso nel prezzo un mini-corso di 3 ore su Javascript ES6 e TypeScript, propedeutico all'apprendimento del framework

Aggiornamenti

Il corso è stato realizzato in Angular 7 ma il codice sorgente, disponibile sotto ogni video, è stato aggiornato alle versioni 14/15.

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

Experts

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 per iniziare.

Tutto ciò che devi conoscere su Angular per essere produttivo nel minor tempo possibile: forms, styling, comunicazione REST API, dependency injection, custom components, moduli, router, animations e molto altro

Sviluppo applicazioni Demo

Oltre a fornire moltissimi esempi per comprendere i concetti alla base del framework, svilupperemo diverse applicazioni demo in Angular e Google Firebase per mettere in pratica i concetti appresi durante il corso

Applica 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

Argomenti trattati nel corso

Angular Fundamentals

Panoramica su Angular

41:41

• 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 configurazione

20:01

• 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)

Fundamentals

43:51

• 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)

Angular Structural Directives

27:22

• 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)

Styling

20:58

• 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)

Template-driven Form

39:32

• 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)

Custom components

01:12: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)

BrowserAnimationModule: animazioni in Angular

41:37

• 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)

Multi-view applications con Angular Router

38:47

• 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)

Comunicazione con il server

54:36

• 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

31:30

• 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)

Applicazioni modulari, approfondimento router e lazy loading

01:09:00

• 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)

Build & Deploy

15:05

• 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)

Live Coding / SPA: Hotel-Booking App

03:37:39

• 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

Live Coding / Crud APP: approccio component-based, gestione stato & Best Practices

01:43:55

• 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

Live Coding / REALTIME APP con Firebase : creare un remote controller per controllare un viewer di slides

01:18:54

• 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)

Extra

01:25:04

• 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)

Argomenti trattati nel corso

JavaScript / TypeScript

JavaScript ES6 Fundamentals

40:46

• 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)

Manipolazione dati e immutabilità

43: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)

imports and modules

17:32

• 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)

Video by Andrea Simone Costa

14:03

• Promises (8:39)

• Fetch: comunicazione con il server (2:53)

• Async Await (2:31)

TypeScript: fundamentals

47:26

• 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)

Estratto dal corso

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

Esempio Lezione

Utilizzo di Angular CLI da terminale

Creazione componenti sfruttando i "generator"

Approccio component based

Progetti modulari

Acquista il corso

Accedi al materiale dove e quando vuoi... per sempre!

5 studenti

€ 87

+ iva

/utente

Prezzo scontato per 5 o più utenti
Report / Progress per singolo utente

Contattami

Il più venduto!

Singolo utente

€ 147 + iva

Corso Angular Fundamentals
Corso JavaScript ES6 / TypeScript
190 video
20 ore di lezione
CheatSheet PDF su Angular e JavaScript ES6
30 gg soddisfatto o rimborsato

PROCEDI

10 studenti

€ 57

+ iva

/utente

Prezzo scontato per 10 o più utenti
Report / Progress per singolo utente

Contattami

FAQ

Ho qualche dubbio che il corso faccia al caso mio. Posso contattarti?

Certo, puoi scrivermi tramite il Form di Contatto

È possibile fruire il corso simultaneamente su device?

Gli accessi simultanei alla piattaforma da diversi IP verranno bloccati. Nel caso fossi interessato all’acquisto di più di una licenza d’uso sono previsti degli sconti.
Contattami per ulteriori info.

È previsto un rimborso nel caso non fossi soddisfatto?

Sono sicuro che apprezzerai i contenuti del corso ma se non fossi soddisfatto potrai comunque essere rimborsato totalmente entro 30 giorni dall'acquisto

Posso ricevere la fattura?

In fase di acquisto, è necessario inserire la partita iva (utilizzando IT come prefisso, ad es. IT1234567890) cliccando sul pulsante "+ ADD BUSINESS DETAILS" e inserire i dati per la fatturazione. 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.

L'iva viene applicata? La fattura è inviata da un'azienda americana

Il mio corso è fruibile tramite la piattaforma Teachable, azienda con sede negli Stati Uniti. Per questo motivo: se richiedi la fattura e inserisci la partita iva in fase di acquisto NON verrà applicata l'iva. Al contrario, il costo per i privati sarà comprensivo di IVA

La possibilità di visionare il corso è limitata nel tempo?

No! La licenza d’uso non ha nessuna scadenza. Una volta acquistato il corso potrai fruire dei contenuti del corso ed eventuali aggiornamenti senza limiti di tempo.

Dubbi e Domande?

Scrivimi in privato su LinkedIn o utilizza l'apposito form di contatto

Dove posso seguirti per ulteriori aggiornamenti?

Sono presente su tutti i principali social network. Trovi i link nel footer.
Per tutti gli aggiornamenti puoi seguirmi su Telegram e non dimenticare di iscriverti alla newsletter

☠️ PIRATERIA : hai visto il mio corso replicato su qualche piattaforma oppure la tua azienda condivide l'account tra più studenti?

Per favore inviami una segnalazione compilando il Form di contatto

Angular Fundamentals

Video Corso

Il corso include:

A chi è rivolto

Beginners

Experts

Punti di forza

Tutto ciò di cui bisogno per iniziare.

Sviluppo applicazioni Demo

Applica Best Practices

Organizzazione Progetti

Estratto dal corso

Acquista il corso

5 studenti

Singolo utente

10 studenti

FAQ

Angular
Fundamentals

Applica Best
Practices