Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Architetture Enterprise in Angular 9 & NGRX 9
Introduzione
Presentazione corso (9:11)
Gruppo Facebook, supporto e Link
Introduzione a NGRX e REDUX
1. A cosa serve uno state manager (4:43)
2. Cos'é NGRX: pro e contro (12:12)
3. NGRX Diagram (6:17)
4. Progetto e struttura cartelle (5:56)
5. NGRX: code preview (9:06)
6. Stateless applications (6:02)
NGRX Fundamentals
IMPORTANTE - AGGIORNAMENTO VERSIONE ANGULAR 12 & 13: strict mode (16:55)
Introduzione al capitolo (teoria - articolo)
1. GOAL: cosa realizzeremo in questo capitolo (3:32)
2. Store, reducers e Actions (TEORIA) (8:06)
3. Creazione Progetto (1:56)
4. Hello NGRX (3:54)
5. NGRX & Redux DevTools (3:50)
6. Lo Store (0:55)
7. Selectors (4:25)
8. Selectors & ngFor (3:30)
9. Actions (5:43)
10. Reducers (5:13)
11. Azioni con parametri (6:38)
12. ReduxDevTools: dettagli e considerazioni (7:26)
13: Manipolare Array: ADD e REMOVE (9:35)
Quiz - NGRX Fundamentals
NGRX: work with collections
01. GOAL: manipolare collezioni dati in NGRX (3:11)
02. NGRX Actions (3:05)
03. ES6 TIP: Immutabilità e manipolazione array (8:40)
04. "users" reducer (7:39)
05. UI: forms, add e delete (9:10)
06. Modifica dei dati utenti e "bugs" (12:26)
Quiz - NGRX: Wotk with collections
Download source code
NGRX - CRUD apps
01. GOAL: NGRX CRUD apps (8:19)
02. Creazione Progetto (0:54)
03. Installazione mock server REST (2:12)
04. Installazione NGRX e configurazione Store (1:21)
05. Actions (3:17)
06. ES6 TIP: immutabilità e manipolazione oggetti (4:08)
07. Reducer "compositi" contenenti logica (12:21)
08. Sviluppo UI: form e list - parte 1 (12:00)
09. Sviluppo UI: form e list - parte 2 (6:25)
10. Effects: introduzione alla sintassi e al funzionamento (TEORIA) (7:32)
11. Effects - Parte 1: load (11:28)
TIP: importare l'effetto e HttpClientModule in AppModule
12. Effects - Parte 2: delete (6:02)
13. Effects - Parte 3: save, edit, add and fix problemi (20:07)
14. AppState: custom type per lo Store (2:28)
15. Combine Reducers con ActionReducerMap (6:33)
16. Selectors (5:11)
17. CreateSelector: selectors con parametri ed espressioni (utilizzo di filter & reduce) (8:26)
18. Selectors: miglioramenti (1:28)
19. Gestione Errori (7:28)
Download source code
QUIZ - NGRX Crud
InvoiceApp: creare un sistema di fatturazione
IMPORTANTE - ERRORI e AGGIORNAMENTO VERSIONI (16:55)
01. Gli argomenti delle prossime lezioni (articolo)
02. GOAL: demo applicazione (4:50)
03. Anticipazione: codice finale (4:24)
Download Source Code
InvoiceApp: Preparazione Progetto
01. Creazione progetto tramite CLI (2:31)
02. Introduzione struttura progetto modulare: features vs core vs shared (3:42)
03. "Features" modules & lazy loading (8:13)
04. Installare il set di icone: FortAwesome (2:24)
05. Installare Bootstrap SASS (2:51)
06. Personalizzare un tema di Bootstrap con SASS (4:48)
07. Creare la Navigation Bar (6:50)
08. Modulo core e modulo share: forRoot method (6:06)
InvoiceApp: Configurazione Store
1 - NGRX - StoreModule.forRoot() (Teoria) (4:17)
2. Installazione NGRX e configurazione Store (2:21)
3. Runtime checks configuration (3:14)
InvoiceApp: Sync Router con lo Store
01. Installazione e configurazione router-store con NGRX (2:59)
02. Creare Custom Router Actions (5:42)
03. Router Effects (9:28)
04. Router Selectors (10:28)
TIP: un approccio più idiomatico nell'utilizzo del selettore (articolo)
InvoiceApp: Gestione Profilo Utente
GOAL: profilo utente (1:14)
01. Model & mock server REST con json-server (4:06)
02. Profile Service & Environment properties (5:38)
03. Profile Actions (1:45)
04. Profile Effects (6:31)
05. Profile Reducer (12:14)
06. TS TIP: as-syntax vs Partial vs optional-parameters (2:35)
07. NGRX-TIP: export reducer functions & limiti compilazione AoT (4:37)
08. Selectors & createFeatureSelector (4:16)
09. AppState: "tipizzare" lo Store (3:21)
10. Profile component: load & display data (5:46)
11. Profile component: edit data & sync components (9:25)
12. Profile component: skinning (3:48)
Invoice App: Autenticazione e Sicurezza
GOAL: autenticazione e struttura store (3:24)
01. Login Component (5:21)
02. Auth Actions (5:24)
03. Auth service (4:15)
04. Auth Effects: login & logout (19:57)
05. Auth Reducer: login & logout (7:08)
06. Auth selectors (2:33)
07. Gestione Logout (3:36)
08. Guards: protezione route e utilizzo dei selettori (11:15)
09. Autologin: init-effects. azioni e gestione localstorage (10:13)
TIP su HttpInterceptor: IMPORTANTE!
10. HTTPInterceptor: selectors (15:50)
11. HTTPInterceptor: gestione errori (3:48)
12. HTTPInterceptor: throwError (3:28)
13. Creazione Direttive strutturali (*ifLogged): protezione DOM (13:38)
14. RXJS TIP: evitare inutili richieste HTTP nel login: switchmap vs exhaustmap (2:01)
InvoiceApp: introduzione alla feature InvoiceEditor
01. GOAL e struttura store (4:22)
02. NGRX: Introduzione store "forFeature()" (6:17)
03. Creazione: store for feature (4:32)
04. Combine Reducers con ActionReducerMap (3:12)
Prossimi step: nota importante
InvoiceEditor -> Clients: UI
01. GOAL (2:51)
02. Struttura UI & component-based approach (0:52)
03. UI: componente pannello Clienti (11:47)
04. UI: input, output, ng-class & animations (6:03)
05. UI Children - parte 1: suddividere la UI in componenti (12:39)
06. UI Children - parte 2: creazione header / ADD clients (7:35)
07. UI Children - parte 3: Header, @ViewChild & ChangeDetectorRef (17:04)
08. UI Children - parte 4: Modifica Cliente (1:50)
09. UI Children - parte 5: applicare CSS al wrapper con @HostBinding (3:21)
10. Client Model (2:47)
11. Riassunto e prossimo step (3:35)
InvoiceEditor -> Clients: gestione STORE
01. ClientService & REST API (4:19)
02. Clients Actions (2:05)
03. Clients Effects - Parte 1 (4:47)
04. Clients Effects - Parte 2 (4:12)
05. Clients: Load (3:03)
06. creare un index per i reducers con actionReducerMap (3:13)
07. Clients Reducer (9:11)
08. createFeatureSelector vs createSelector (4:09)
09. Considerazioni finali (2:20)
InvoiceEditor -> HttpStatus: gestione messaggi "success" e "failed"
Goal (0:50)
introduzione (3:15)
HttpStatus: gestione error e success nello store (5:17)
Considerazioni su errori e gestione tramite HTTP Interceptor (articolo)
HttpStatus: reducer (6:29)
HttpStatus: selector (2:47)
HttpStatus : UI e visualizzazione errori (4:51)
HttpStatus: custom component (2:31)
HttpStatus: Gestione messaggi di successo (4:21)
HttpStatus: conclusione e riepilogo (2:47)
InvoiceEditor -> ui -> sync user interface with store
1. GOAL (1:40)
2. UI state (3:17)
3. UI Actions (1:04)
4. UI Reducers (5:18)
5. UI Selectors (7:58)
6. UI: gestione apertura / chiusura pannelli (7:24)
InvoiceEditor -> Invoices: gestione fatture (advanced tricks)
01. GOAL (0:55)
03. Invoice Model (modello fattura) (1:51)
04. Invoices Actions (8:49)
05. Invoice Form: versione provvisoria (7:57)
06. Inizializzazione stato "invoices" (4:55)
07. Selectors per le fatture & getActiveInvoice (2:16)
08. Effects condizionali e operatore RxJS "withLatestFrom" (10:05)
09. Invoices http service (3:05)
10. Concatenare effects (5:14)
11. Emettere azioni multiple negli effetti (4:18)
12. Reducer update: gestione activeInvoice e addInvoice (4:28)
13. Initializzazione invoice editor e gestione xhr simultanee (17:21)
14. UI: visualizzazione fatture e gestione fattura attiva (9:35)
15. UI: animare il layout sulla base dell'apertura pannelli (7:13)
16. Selectors, reduce ed espressioni: calcolo numero fattura progressivo (11:52)
17. Creare una nuova fattura (3:45)
18. Modificare una fattura (17:34)
19. Cancellare una fattura (5:53)
20. bug fix: delete vs setActive (5:18)
21. Aggiungere un campo "Date" alla fattura (2:15)
22. UI: migliorare il layout del-pannello clienti (4:20)
InvoiceApp -> InvoiceEditor: Reactive Forms
1. Introduzione al capitolo
3. Migliorare il layout del form (15:14)
4. Aprire i pannelli clienti e dello storico fatture (6:00)
5. Da "template-driven forms" ai Reactive Forms (6:34)
6: Component lifecycle: ngOnChanges (6:51)
7. ReactiveForms: metodi patchValue and reset (1:54)
8. FormArray: gestione prodotti fattura - part 1 (9:17)
9. FormArray: gestione prodotti fattura - part 2 (14:28)
10. FormArray: gestione prodotti fattura - part 3 (3:35)
11. FormArray: calcolo totale prodotti (8:02)
12. FormArray: selezione clienti (8:01)
Miglioramenti-best-practices-and-fix
01. Routing Redirect (0:45)
02. Aggiungere immagini al progetto (2:42)
03. Ottimizzazione performance con la ChangeDetectionStrategy "onPush" (5:33)
04. TIP: barrel index file: import / export modules (6:31)
05. Miglioramento Performance: sottoscrizione manuale agli observable vs async (ngif-as) (3:34)
Stampa Fattura
01. Nested Routes & multiple Containers (7:46)
02. Selettori Compositi (6:40)
03. Router: back action (2:11)
04. CSS TIP: print media query & Angular CSS ViewEncapsulation (3:54)
05. Visualizzazione dati e stampa (10:35)
EXTRA: NGRX tips & tricks
1. Configurazione modulo "root" vs module "core" (0:36)
2. Runtime checks & immutabilità (2:24)
3. Store "forRoot" vs "forFeature" (1:58)
4. Store Type & actionReducerMap (2:10)
10. Reducer & sintassi JS per restituire oggetti in un reducer (1:08)
11. Reducer & problemi di compilazione AOT (1:33)
20. Actions: passare la minore quantità di informazioni nel payload (4:07)
33. Selectors: sommario (4:37)
34. Effects: sommario (2:12)
35. RXJS TIP: switchmap vs exhaustmap vs concatmap vs mergemap (2:29)
36. Effects: recuperare lo stato con withLatestFrom (2:15)
37. Effects: dispatch multiple actions (2:51)
1. A cosa serve uno state manager
Complete and Continue