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

Aggiornato ad Angular 16

Mini corso di 30 video sulle novità introdotte da Angular 16: standalone projects, Signals, nuove API

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)

Aggiornamento 2023

Mini corso sulle novità di Angular 16/17

1. Standalone Components

Durata: 12:30

01. Creazione Progetto Standalone