Angular - Routing & Forms

Angular routing and Angular forms explained

Transcript

1. ANGULAR ROUTING & FORM ApuliaSoft apuliasoft.com
2. Agenda Routing Come progettare ed implementare la navigazione. 01 Challenge Realizzare la navigazione in Hacker News. 02 Form Raccogliere e validare i dati dell’utente. 03 Challenge Permettere l’inserimento di un nuovo link in Hacker News. 04
3. Routing Come progettare ed implementare la navigazione.
4. Routing Come progettare ed implementare la navigazione. Conservare alcuni aspetti dello stato applicativo nella URL. Mantenere lo stato dell’applicazione 01 Perché routing?
5. Routing Come progettare ed implementare la navigazione. Conservare alcuni aspetti dello stato applicativo nella URL. Mantenere lo stato dell’applicazione 01 Dividere l’applicazione per aree di interesse e caricarle quando necessario. Implementare applicazioni modulari 02 Perché routing?
6. Routing Come progettare ed implementare la navigazione. Conservare alcuni aspetti dello stato applicativo nella URL. Mantenere lo stato dell’applicazione 01 Dividere l’applicazione per aree di interesse e caricarle quando necessario. Implementare applicazioni modulari 02 Garantire o impedire l’accesso a delle aree in base al ruolo dell’utente. Realizzare sicurezza role-based 03 Perché routing?
7. Routing Come progettare ed implementare la navigazione. Dichiarare una lista di rotte e passarle al modulo RouterModule tramite la funzione forRoot. Router Module import { RouterModule, Routes } from '@angular/router'; const routes: Routes = [ {path:’/path1’, component:Cmp1}, {path:’/path2’, component:Cmp2}, {path:’**’, redirectTo:’/path1’} ]; @NgModule({ imports: [ RouterModule.forRoot(routes) ] }) export class AppModule { }
8. Routing Come progettare ed implementare la navigazione. Dichiarare una lista di rotte e passarle al modulo RouterModule tramite la funzione forRoot. Router Module È una delle direttive router disponibili in RouterModule. Dice al router dove posizionare la vista da mostrare. Router Outlet <div> <router-outlet></router-outlet> </div>
9. Routing Come progettare ed implementare la navigazione. Dichiarare una lista di rotte e passarle al modulo RouterModule tramite la funzione forRoot. Router Module È una delle direttive router disponibili in RouterModule. Dice al router dove posizionare la vista da mostrare. Router Outlet Router.navigate e RouterLink sono rispettivamente il metodo e la direttiva che permettono le navigazioni del router. Router Navigate e Router Link constructor( router: Router ) { router.navigate([‘path1']); } -- oppure -- <div> <a routerLink="path1">Path 1</a> </div>
10. Routing Come progettare ed implementare la navigazione. Dichiarare una lista di rotte e passarle al modulo RouterModule tramite la funzione forRoot. Router Module È una delle direttive router disponibili in RouterModule. Dice al router dove posizionare la vista da mostrare. Router Outlet Router.navigate e RouterLink sono il metodo e la direttiva che permettono le navigazioni del router. Router Navigate e Router Link Una buona pratica consiste nel configurare il router in un modulo separato dedicato al routing e importarlo nel modulo di root AppModule. const routes: Routes = [ {path:’/path1’, component:Cmp1}, {path:’/path2’, component:Cmp2}, {path:’**’, redirectTo:’path1’} ]; @NgModule({ imports: [ RouterModule.forRoot(routes) ], exports: [RouterModule] }) export class AppRoutingModule { }
11. Challenge VS Code • Effettuare il checkout del tag routing-start • Definire un nuovo componente con nome CreateLink contenente solo un tag titolo • Sostituire la direttiva hn-link-list con la direttiva router-outlet nel component AppComponent • Definire 3 rotte • La rotta / dovrà mostrare il componente LinkList • La rotta /create dovrà mostrare il component CreateLink • La rotta ** dovrà reindirizzare alla rotta / • Aggiungere dei routerLink all’header in AppComponent • Al link new dovrà corrispondere la rotta / • Al link submit dovrà corrispondere la rotta /create • Testare il tutto navigando avanti e indietro con i link nell’header e con i pulsanti per la gestione della history del browser • BONUS: configurare il router nel modulo AppRoutingModule, ed importarlo in AppModule Adesso tocca a voi
12. Routing Come progettare ed implementare la navigazione. Contiene le informazioni sul percorso associato al componente caricato nel router-outlet ActivatedRoute constructor( route: ActivatedRoute ) { }
13. Routing Come progettare ed implementare la navigazione. Contiene le informazioni sul percorso associato al componente caricato nel router-outlet ActivatedRoute Rappresentano i parametri di una rotta sotto forma di Observable. Params e ParamMap const routes: Routes = [{ path: ’/path1/:param1’, component: Cmp1 }]; -- e -- route.params .subscribe(p => { let param1 = p['param1’]; });
14. Routing Come progettare ed implementare la navigazione. Contiene le informazioni sul percorso associato al componente caricato nel router-outlet ActivatedRoute Rappresentano i parametri di una rotta sotto forma di Observable. Params e ParamMap Rappresentano i parametri di questi di una rotta, anch’essi sotto forma di Observable. QueryParams e QueryParamMap route.queryParams .subscribe(qp => { let param1 = qp['param1’]; }); -- oppure -- route.queryParamMap .subscribe(qp => { let param1 = qp.get('param1’); });
15. Routing Come progettare ed implementare la navigazione. Contiene le informazioni sul percorso associato al componente caricato nel router-outlet ActivatedRoute Rappresentano i parametri di una rotta sotto forma di Observable. Params e ParamMap Rappresentano i parametri di questi di una rotta, anch’essi sotto forma di Observable. QueryParams e QueryParamMap router.navigate( [ '/path1', ‘foo’ ], { queryParams: {param1: ‘bar’} } ); -- oppure -- <a [routerLink]="['/path1’, ‘foo’]" [queryParams]="{param1: ‘bar’}" >…</a> Per aggiungere un parametro alla navigazione bisogna specificarlo nella router.navigate o nel routerLink. Per un parametro query bisogna usare il secondo argomento di router.navigate o la direttiva queryParams.
16. Challenge VS Code • Riscrivere il comportamento del pulsante More della componente LinkListComponent usando routerLink • Al click l’applicazione deve navigare alla pagina successiva a quella attuale • La pagina è indicata dal parametro opzionale di nome p • Riscrivere il comportamento della componente LinkListComponent usando ActivatedRoute: • All’avvio deve mostrare i dati inerenti alla pagina specificata nel parametro query p • Se il parametro non è specificato ha valore 1 di default • Testare il tutto navigando avanti e indietro con il link More e con i pulsanti per la gestione della history del browser • BONUS: cercare di realizzare il secondo punto usando solo gli operators map, startWith, do e switchMap di RxJS Adesso tocca a voi
17. Form Raccogliere e validare i dati dell’utente.
18. Form Raccogliere e validare i dati dell’utente. Data-binding, tracciamento dei cambiamenti, validazione ed gestione degli errori Requirements Creare un’esperienza che guidi l’utente in maniera efficace ed efficiente attraverso il workflow. Data-entry experience Offre 2 alternative: Template-driven forms Reactive forms Angular user inputs need Applications
19. Form Raccogliere e validare i dati dell’utente. <form #myForm="ngForm"> <input name="myInput" type="text" ngModel /> <button (click)="submit(myForm)"> Submit </button> </form> Definiscono la struttura logica della form all’interno del template HTML ngForm & ngModel
20. Form Raccogliere e validare i dati dell’utente. Definiscono la struttura logica della form all’interno del template HTML ngForm & ngModel Combinazione dei parametri di validazione introdotti con HTML5 Validazione <input … required /> <input … maxLength="5" /> <input … minLength="2" /> <input … pattern="[0-9]{0,5}" /> <button (click)="submit(myForm)" [disabled]="!myForm.valid"> Submit </button>
21. Form Raccogliere e validare i dati dell’utente. // valutare il cambiamento del focus di myInput myForm.controls.myInput.untouched myForm.controls.myInput.touched // valutare il cambiamento del valore di myInput myForm.controls.myInput.pristine myForm.controls.myInput.dirty Definiscono la struttura logica della form all’interno del template HTML ngForm & ngModel Combinazione dei parametri di validazione introdotti con HTML5 Validazione Valutazione dell’interazione dell’utente con i campi e con i valori al suo interno Tracciamento dei cambiamenti
22. Form Raccogliere e validare i dati dell’utente. // valutare la validità del valore di myInput … .myInput.errors.required … .myInput.errors.maxLength … .myInput.errors.minLength … .myInput.errors.pattern Definiscono la struttura logica della form all’interno del template HTML ngForm & ngModel Combinazione dei parametri di validazione introdotti con HTML5 Validazione Valutazione dell’interazione dell’utente con i campi e con i valori al suo interno Tracciamento dei cambiamenti Valutazione della validità di ogni campo e presentazione di un messaggio di errore Gestione degli errori
23. Form Raccogliere e validare i dati dell’utente. // valutare la validità del valore di myInput … .myInput.errors?.required … .myInput.errors?.maxLength … .myInput.errors?.minLength … .myInput.errors?.pattern Definiscono la struttura logica della form all’interno del template HTML ngForm & ngModel Combinazione dei parametri di validazione introdotti con HTML5 Validazione Valutazione dell’interazione dell’utente con i campi e con i valori al suo interno Tracciamento dei cambiamenti Valutazione della validità di ogni campo e presentazione di un messaggio di errore Gestione degli errori Elvis operator (?) permette di evitare i null check all’interno di un template HTML
24. Challenge VS Code • Inizializzare una form nel template del component CreateLink • Inserire un campo di input di tipo text che permetta di inserire la descrizione del nuovo link • Il valore del campo deve essere inserito obbligatoriamente, in caso contrario mostrare un messaggio di errore • Il valore del campo non deve superare i 100 caratteri, in caso contrario mostrare un messaggio di errore • Inserire un campo di input di tipo url che permetta di inserire la url del nuovo link • Il valore del campo deve essere inserito obbligatoriamente, in caso contrario mostrare un messaggio di errore • Inserire un pulsante che permetta di salvare i dati nella form: • Se i dati non sono validi il pulsante deve essere disabilitato • Se i dati sono validi vanno inviati al server tramite il metodo addLink del servizio ApiService • A salvataggio effettuato navigare verso la rotta / • BONUS: Validare la correttezza della url (e.g. [urlscheme]://[restofurl]) Adesso tocca a voi
25. Considerazioni finali Progetto in continua evoluzione, senza rinunciare a robustezza e affidabilità. Maturo 01
26. Considerazioni finali Progetto in continua evoluzione, senza rinunciare a robustezza e affidabilità. Maturo 01 Adatto a prototipazioni rapide tanto quanto ad applicazioni mastodontiche. Duttile 02
27. Considerazioni finali Progetto in continua evoluzione, senza rinunciare a robustezza e affidabilità. Maturo 01 Adatto a prototipazioni rapide tanto quanto ad applicazioni mastodontiche. Duttile 02 Curva di apprendimento alta e impossibilità di utilizzo parziale. Ostile 03
28. Fine Thank you!