npm install
npm start
npm run server-auth
- Utilizzo di Angular 13.x, NGRX 13.x e Bootstrap 5
- Autenticazione JWT: login, gestione token, interceptors, router guards
- Gestione Profilo utente
- Sezioni (aka features) che gestiscono diverse porzioni di stato attraverso l'utilizzo selettori, reducer ed effetti
- Gestione errori
- Gestire lo stato di apertura dei pannelli
- Approccio component-based, custom modules e lazy loading
- Intro applicazione: modules
- Intro applicazione: components
- Intro applicazione: store
- Intro applicazione: folders
- Strutturare applicazioni angular scalabili
- Moduli features: home, login, profile, invoice-editor
- Routing & lazy loading
- Integrazione bootstrap e SCSS
- Integrazione font-awesome e font-awesome
- Navigation Bar
- Core Module, SharedModule & forRoot
- integrazione NGRX Store in CoreModule
- creare lo store (vuoto)
- runtimecheck
- Installazione e Configurazione
- Actions
- Reducer
- Select (non serve)
- Esempio di Utilizzo
- json-server
- environments properties
- Profile Component: creare la UI della sezione
- Profile Service: Creare un servizio per la gestione delle chiamate HTTP
- Profile Actions: gestire le azioni
- Profile Effects: side effects
- Profile Reducer: manipolare lo stato
- profile Selectors: recuperare dati dallo stato
- AppState
MISSING:
- core: index reducers e ActionReducerMap
* Actions
* Reducer
* Selector
* Service
* Effects
* UI: login
* Route Guard: protezione view
* HTTPInterceptor
* AutoLogin
-
Introduzione
- Goal / Demo
- video con l'applicazione
- Struttura Store
- video che mostra il reducer
- Struttura componenti
- diagramma componenti
- demo video della app con i componenti
- Organizzazione cartelle
- Goal / Demo
-
Preparazione InvoiceEditorModule
- Store
forFeature
- ActionReducerMap e l'index dei reducers
- preparare reducer vuoti
- Container Components
- Store
-
clients
: Creare Stateless Applications- Azioni
- Reducer
- Effects
- Selectors
- Creare la UI per il pannello Clienti
- Componente List: Inline editing dei clienti
- Componente Header: Inserimento Clienti
-
httpStatus
: gestire messaddi di errore e success- reducer
- selector
-
ui
: Gestione Pannelli e UI- Actions
- Reducer
- Selector
-
invoices/entities
: gestione CRUD- Actions
- Reducer
- Selectors: get invoices list & calculate next invoice number
- Effects
- UI
-
invoices/activeInvoiceId
: Creazione e modifica fatture- Actions
- Reducer
- Selectors
- Effects
- UI: utilizzo dei Reactive Forms
- UI: creare una view per la stampa della fattura
MISSING in video
- visualizzazione più carina della lista fatture
- invoice-form: reactive forms
- invoice-form: item form array
- completare reactive form (connessione a clienti, date filter ecc.)
- ENHANCEMENT: invoice-editor.effect (setActive vs createNEw)
- LAYOUT
OTTIMIZZAZIONI:
V - onPush V - index.ts nelle cartelle V - router- redirect corretto al login all'avvio dell'app V - evitare piu async stesso observable con ngif...as
TPS:
-
consiglio utile: usare split screen e mettere componenti da sx a destra, a sx parent, a dx figli
-
actions: passare sempre e solo il minimo di informazioni che servono (id e non invoice)
EXTRA:
- ngrx offline: ngrx-store-localstorage
- unit test NOTA: very cool syncCondition