Loading
Please wait, content is loading

Mastering Angular

Acquisire il know-how necessario per la creazione di progetti Angular di una certa complessità applicando pattern, best practice e affrontando diversi aspetti fondamentali nella creazione di Single Page Application: gestire lo stato applicativo, autenticazione JWT e sicurezza, ottimizzazione performance e bundle-size, creare nested routes e applicare strategie di lazy loading, creazione codice scalabile ed efficiente, organizzare e strutturare l'applicazione in componenti e moduli.


Durata

40 - 80 ore

Ambito

Web Development, Frontend


[ Corso Modulare ]

La Sfida

CREARE SPA ALLO STATO DELL'ARTE TECNOLOGICO
INTEGRANDO MOLTEPLICI E COMPLESSE LIBRERIE.





La Soluzione

COMPONI IL TUO PERCORSO SU MISURA
SEGUI TUTTI I CONTENUTI TRA TEORIA, LIVE CODING ED APPLICAZIONI REALI.

Angular Framework

Modulo per sulle principali funzionalità di Angular per acquisire una solida base sul framework e iniziare a sviluppare le prime Single Page Applications: styling, directives, template driven forms, servizi e dependency injection, server-side communication, multi-view applications con Angular Router, una veloce introduzione alla creazione di componenti e all’organizzazione di progetti.

Al termine del corso i partecipanti saranno in grado di creare semplici applicazioni multi-view con angular router, comunicare con il server attraverso REST API, creare template-driven form con validazioni e gestione errori, utilizzare le direttive del framework per manipolare il DOM e creare applicazioni CRUD, sfruttare il motore di dependency injection creando servizi e creare i primi componenti custom riutilizzabili.

Familiarità con almeno un linguaggio di programmazione e, possibilmente, conoscere i concetti fondamentali su cui si basa il paradigma della programmazione ad oggetti. Aver già utilizzato HTML, CSS e Javascript ES6 sicuramente saranno di grande aiuto.Se pensi di avere delle carenze su JavaScript e TypeScript, valuta il programma del corso Javascript ES6 & Typescript Intro

  • Environment & Tools
    • NodeJS, NPM & gestire differenti versioni di NodeJS con NVM
    • Installare un Terminale su Mac e Windows
    • Installare e creare progetti con Angular CLI
  • Angular Fundamentals
    • Creazione progetti con angular-cli
    • Integrazione framework e librerie CSS: Bootstrap, FontAwesome, …
    • Template Tags
    • Manipolazione DOM
    • 1-way e 2-way Binding
    • Decorator @Component e metadata
    • Dynamic HTML templates
    • Direttive built-in: *ngIf, *ngSwitch, *ngFor
    • Gestire e manipolare collezioni dati
  • Dynamic Styling in Angular
    • From static to dynamic CSS
    • inline CSS
    • css “unit” suffix
    • ngClass
    • ngStyle
  • Dependency Injection
    • Creazione custom Service Providers
    • @Injectable decorator: quando e perché usarlo?
    • Utilizzare i servizi per condividere dati tra routes e componenti
    • Utilizzare i servizi per gestire lo stato dei componenti
  • Angular Forms
    • Keyboard Events
    • Template driven forms
    • Form & Input Template Reference Variables
    • ngModel directive: 1-way vs 2-ways binding
    • ngForm e submit
    • Form validators
    • Form Errors: custom messages in according with the error type
    • form state: dirty, invalid, touch, …
    • Validation with regular expressions
    • Custom validators with Directives
  • Introduzione ai Custom Components
    • Creare Angular Components
    • Template dinamici
    • Passare proprietà ai componenti
  • Multiview Applications
    • Il modulo @angular/router
    • Single Page Application Multiview
    • Router Navigation
    • Feature Route components
    • Condividere dati tra le routes

Mastering Angular

Acquisire il know-how necessario per la creazione di progetti Angular di una certa complessità applicando pattern, best practice e affrontando diversi aspetti fondamentali nella creazione di Single Page Application: gestire lo stato applicativo, autenticazione JWT e sicurezza, ottimizzazione performance e bundle-size, creare nested routes e applicare strategie di lazy loading, creazione codice scalabile ed efficiente, organizzare e strutturare l'applicazione in componenti e moduli.

OBIETTIVO DEL CORSO: Approfondimento sul framework, utilizzo di pattern e best practice: approccio component-based; applicazioni modulari tramite la creazione di custom ngModules (core, features, shared); approfondimento su router, guardie, lazy loading e nested routes; gestire l'intero processo di autenticazione; approfondimenti su componenti, direttive e depedency injection; ottimizzazione performane; manipolazione

REQUISITI: Conoscere le fondamenta del framework: binding, direttive incluse nel framework, form, dependency injection e comunicazione con REST API, ovvero gli argomenti alla base del corso introduttivo Angular Core Concepts

  • Custom Components
    • Input properties
    • Output Event emitters
    • Content Projection
    • Sibling Components communication
    • Comunicazione tra componenti "padre" e "figli"
    • Componenti riutilizzabili: Collapsable, Tabbar, Map, ...
    • Component-based approach: organizzare la UI in componenti stateless
    • Stateful vs Stateless components
  • Approfondimenti sul Router
    • API, componenti e direttive fornite dal modulo router
    • Creare applicazioni multiview
    • Creare custom modules per le regole di routing
    • Gestire route con parametri
    • Router e Lazy Loading
    • Children Routes
    • Nested Routes e multipli router-outlet
    • Router Events
  • Manipolazione DOM in Angular
    • DOM e local template reference variables
    • @ViewChild and DOM references
    • Il servizio ElementRef e nativeElement
    • Introduzione: direttive custom
    • Introduzione: creazione custom Pipe
  • Organizzazione modulare dei progetti
    • Strutture progetti scalabili e manutenibili
    • Creazione applicazioni modulari e custom ngModule
    • Applicazioni modulari e custom ngModule
    • Differenze tra moduli Core, Shared & Features
    • Domain vs Widget vs Service Modules
    • Build & Deploy
    • Convenzioni, styleguide, best practice
  • Data Architectures in Angular
    • State management con servizi e dependency injection
    • Gestione Stato e Side Effect
    • Immutabilità? Perchè è utile e quando?
    • Ottimizzazione performance con le strategie di ChangeDetection onPush
    • Bad (e Good) Practices nell'utilizzo della Dependency Injection
  • Sicurezza e Authentication
    • Autenticazione con JWT
    • Procedure di Login e Logout
    • Utilizzo REST API protette da token
    • Creare HTTP “interceptors”
    • Gestione errori HTTP
    • CORS, preflight e OPTIONS
    • Router Guards: protezione routes
    • Local Storage & Auto-login
    • Creare direttive custom per la gestione dei ruoli utente

Angular & Rxjs

Un corso intensivo per acquisire i concetti fondamentali sul paradigma funzionale reattivo e sull’utilizzo della libreria RxJS in Angular. RxJS è, infatti, una delle dipendenze più importanti di Angular, alla base della maggior parte delle funzionalità del framework che ruotano attorno al concetto di Observable: reactive forms, Router, HttpClient, HTTP interceptors, @Output EventEmitter, state manager come NGRX, solo per citarne alcuni..

  • Introduzione a RxJS
    • Introduzione al paradigma funzionale reattivo.
    • Imperative vs Reactive programming
    • Observable vs Observer
    • next, error and complete
    • Pull vs Push
    • Hot vs Cold Observable
    • Unicast vs Multicast
    • Subscription
    • subscribe e/o async pipe
    • Operatori di Creazione vs Pipeable operators
    • Marble Diagrams
    • Higher Order Observables: switchMap vs mergeMap vs concatMap vs exhaustMap
    • Creare e gestire sequenze di observables
    • Debug
    • Bad & Good practices
  • RxJS Operators: esempi pratici
    • Creation operators
    • Filtering operators
    • Combination operators
    • Transformation operators
    • Higher Order operators
    • Conditional operators
    • Error Handling operators
    • Multicasting operators
  • Creare custom RxJS Operators
    • Creare operatori custom in JavaScript
    • Creare operatori custom in TypeScript
    • OperatorFunction vs MonoTypeOperatorFunction
  • RXJS & Angular: esempi pratici HttpClient
    • bad (& good) practices in RxJS
    • Operatori RXJS indispensabili: map, filter, reduce e molti altri
    • Async Angular pipe
    • Nested HTTP request with switchMap
    • switchMap ed emissione valori multipli
    • switchMap e salvataggio dei risultati parziali
    • Richieste HTTP simultanee con l'operatore forkJoin
    • switchMap vs mergeMap vs concatMap vs exhaustMap
    • reduce and scan operators
    • Gestione errori e operatore catchError
    • retry operator
    • Esempi di utilizzo con forms, router, pipes, directives
  • Multicasting
    • Unicast vs Multicast: differenze
    • Operatori share, publish, multicast
    • Le differenti tipologie di Subject
    • Subject & Angular services: gestione stato applicativo
    • Esempi real-world in Angular
  • Autenticazione e sicurezza in RxJS
    • Gestione dell'intero processo di autenticazione in RxJS
    • State management in RxJS
    • Gestione Stati derivati
    • login e logout
    • Gestione token JWT e stato autenticazione con Subject
    • Router Guard e Http Interceptor: utilizzo idiomatico di RxJS
    • Protezione DOM e gestione ruoli tramite direttive strutturali
  • RXJS & Angular: Reactive Forms
    • Integrazione XHR con i Form tramite operatori
    • Applicare operatori RxJS a FormControl e FormGroup
    • Integrazione 3rd party API e utilizzo di operatori RxJS (ad es. l'operatore withLatestFrom

Reactive Forms Fundamentals

Questo corso intensivo si focalizza su RxJS e le API dei Reactive Forms forniti dal framework, in quanto offrono una flessibilità decisamente superiore rispetto ai template-driven forms, ed esplora diverse tecniche per sfruttarli al meglio, con esempi pratici e casi d’uso reali.

  • Angular, Rxjs e Reactive Forms
    • Introduzione a RxJS
    • HTML Native Events in Typescript
    • From Vanilla JavaScript to RxJS
    • Pipeable RxJS operators
    • Creare un progetto Angular
    • Angular, @ViewChild, Component LifeCycle & Input Text
    • TypeScript Strict Mode, Optional Chaining & Non-Null Assertion Operators
    • Creare Form reattivi in Angular con l'operatore fromEvent
    • FormControl - Il mio primo Reactive Form
    • RxJs Operators: work with data, debounceTime, distinct & distinctUntilChanged
    • REST API, HttpClient & Reactive Forms
    • Bad Practice: evitare subscribe all'interno di altre subscribe
    • Flattening Operators: esempio con mergeMap
    • Gestione errori in RxJS
    • Typing
    • Display Data
    • Pipe Async e richiede http multiple
    • Considerazioni Finali
    • Depencency Injection, Services e Reactive Forms
  • Typed Form Control
    • Form Control & initial values
    • Typed Forms: default value, nonNullable & reset
    • setValue and type forms
    • Dirty, touched and FormControls properties
    • Validators
    • Pattern Validators con regular expression
    • Messaggi di errori personalizzati
    • Creare animazioni sulla base messaggi di errore
    • Creare il component "error-bar"
    • Creare un componente riutilizzabile per visualizzazione errori
    • Performance e creazione Custom Pipe
    • Utilizzo di Generics & Custom Types con i FormControl
  • Reactive Forms & Angular Material
    • Installare e configurare Angular Material
    • Hello Angular Material
    • Form Builder e matInput
    • Il componente matCheckbox
    • Il componente Date Picker
    • Submit & Reset
    • Fix Pulsante Clear

State Manager & Data Architectures con Angular e Ngrx

Creare applicazioni Angular scalabili, testabili e semplici da mantenere utilizzando NGRX per la gestione dello stato applicativo, applicando una netta separazione tra architettura dati e presentational layer. Al termine del corso il partecipante sarà, quindi, in grado di introdurre NGRX nei propri progetti Angular e di sfruttarne al massimo il potenziale.

REQUISITI: per comprendere gli argomenti trattati nel corso è necessario avere una buona conoscenza delle seguenti funzionalità del framework Angular: componenti custom, moduli, dependency injection, router e lazy loading. Nel caso di intenda prima approfondire questi argomenti consiglio di frequentare il corso Mastering Angular.

  • Redux fundamentals
    • Principi fondamentali di Redux
    • Immutable State in Javascript
    • Pure vs Inpure functions
    • Redux core concepts: store, reducers, actions
  • NGRX fundamentals
    • Introduzione tecnica alla libreria
    • Costrutti, funzionalità e API principali
    • Installare le librerie necessarie
    • Reactive Store e Observable
    • Modellare lo store con StoreModule
    • Modificare lo stato tramite reducer
    • Selectors e memoization: selezionare porzioni di stato
    • Debugging e Redux Chrome Dev tools
    • Esempi e casi d'uso reali
  • Impostare progetti NGRX
    • Organizzazione progetti scalabili e manutenibili in Angular
    • Data architectures in Angular e NGRX
    • Sviluppo modulare: custom ngModules Core, Shared e Features
    • Approccio component-based
    • Stateless architectures
    • Containers vs Presentational components
    • Sviluppo Real World Applications in ANGULAR / NGRX: gestione CRUD, autenticazione, profilo, forms complessi, protezione DOM, router e molto altro
  • Autenticazione, Sicurezza e NGRX
    • Processo di autenticazione JWT
    • Modifica profilo utente
    • Router Guards: creare sezioni protette da login
    • HTTP Interceptors
    • Protezione del DOM tramite custom structural directives, ad es. *ifLogged
    • AutoLogin e persistenza dati tramite localStorage
  • Reducer & Selectors
    • Stato globale con forRoot
    • Gestione stato "lazy" tramite l'utilizzo di forFeature
    • Modifica dello stato tramite reducer
    • Il metodo createReducer in NGRX
    • Nested reducers con ActionReducerMap
    • Selectors semplici e compositi
    • createSelector vs createFeatureSelector
    • MetaReducers
  • Actions & Effects
    • Time travel debugging
    • Typed Safed Actions con createAction
    • Il metodo createAction
    • Gestione side effects con "NGRX Effects"
    • Il metodo createEffect
    • Gestione applicazioni CRUD, router e localStorage
    • Avviare azioni multiple negli effects
    • Effetti condizionali sulla base dello store
  • Router Store
    • Installazione e configurazione NGRX Router
    • Sincronizzazione router con stato applicativo
    • Navigazione
    • Creazione custom Actions per il router
    • Router Selectors
    • Protezione route con guardie, NGRX e l'utilizzo di JWT
    • Gestione router con Lazy Loading
  • Reactive Forms, UI & NGRX
    • Integrazione Reactive Forms
    • Sincronizzazione Form con lo stato applicativo
    • Utilizzo di FormBuilder, FormControl, FormGroup
    • Gestione elenchi dati con FormArray
    • Gestione User Interface tramite NGRX (ad es. apertura e gestione pannelli)

View All Works

next case