Angular - Routing & Forms

Angular routing and Angular forms explained.

Transcript

1. ANGULAR IL WEB FRAMEWORK PIÙ STABILE SUL MERCATO
2. Nicola Sanitate linkedin.com/in/nsanitate
3. Agenda Introduzione - Nicola Sanitate [ Angular, TypeScript, RxJS ] Presentazione - Carlotta Dimatteo [ Componenti ] Logica - Valerio Como [ Servizi ] Navigazione - Nicola Sanitate [ Routing, Forms ]
4. Agenda - Routing & Form Ruoting Come progettare ed implementare la navigazione Form Raccogliere e validare i dati dell’utente Challenge - Routing Challenge - Form
5. Routing
6. Perché routing? Mantenere lo stato dell’applicazione Conservare alcuni aspetti dello stato applicativo nella URL Implementare applicazioni modulari Dividere l’applicazione per aree di interesse e caricarle quando necessario Realizzare sicurezza role-based Garantire o impedire l’accesso a delle aree in base al ruolo dell’utente
7. Router Module Dichiarare una lista di rotte e passarle al modulo RouterModule tramite la funzione forRoot 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. Router Outlet È una delle direttive router disponibili in RouterModule. Dice al router dove posizionare la vista da mostrare <div> <router-outlet></router-outlet> </div>
9. Navigate e RouterLink Router.navigate e RouterLink sono rispettivamente il metodo e la direttiva che permettono le navigazioni del router constructor( router: Router ) { router.navigate(['path1']); } -- oppure -- <div> <a routerLink="path1">Path 1</a> </div>
10. Best Practice 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. ActivatedRoute Contiene le informazioni sul percorso associato al componente caricato nel router-outlet constructor( route: ActivatedRoute ) { }
12. Params e ParamMap Rappresentano i parametri di una rotta sotto forma di Observable const routes: Routes = [{ path: '/path1/:param1' , component: Cmp1 }]; -- e -- route.params .subscribe(p => { let param1 = p['param1']; });
13. QueryParams e QueryParamMap Rappresentano i parametri di questi di una rotta, anch’essi sotto forma di Observable. route.queryParams .subscribe(qp => { let param1 = qp['param1']; }); -- oppure -- route.queryParamMap .subscribe(qp => { let param1 = qp.get('param1'); });
14. Parametri in navigazione 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 router.navigate( ['/path1', 'foo'], { queryParams: { param1: 'bar' } } ); -- oppure -- <a [routerLink]="[ '/path1', 'foo' ]" [queryParams]="{ param1: 'bar' }" >…</a>
15. Form
16. Application needs user inputs Data-entry experience Creare un’esperienza che guidi l’utente in maniera efficace attraverso il workflow Requirements Data-binding, tracciamento dei cambiamenti, validazione e gestione degli errori Angular • Template-driven forms • Reactive forms
17. ngForm & ngModel Definiscono la struttura logica della form all’interno del template HTML <form #myForm="ngForm"> <input name="myInput" type="text" ngModel /> <button (click)="submit(myForm)" > Submit </button> </form>
18. Validazione Combinazione dei parametri di validazione introdotti con HTML5 <input … required /> <input … maxLength="5" /> <input … minLength="2" /> <input … pattern="[0-9]{0,5}" /> <button (click)="submit(myForm)" [disabled]="!myForm.valid" > Submit </button>
19. Tracciamento dei cambiamenti Valutazione dell’interazione dell’utente con i campi e con i valori al suo interno -- 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
20. Gestione degli errori Valutazione della validità di ogni campo e presentazione di un messaggio di errore -- valutare la validità del valore di myInput -- … .myInput.errors.required … .myInput.errors.maxLength … .myInput.errors.minLength … .myInput.errors.pattern
21. Elvis operator Permette di evitare i null check all’interno di un template HTML -- valutare la validità del valore di myInput -- … .myInput.errors?.required … .myInput.errors?.maxLength … .myInput.errors?.minLength … .myInput.errors?.pattern
22. Conclusioni
23. Considerazioni finali Maturo Progetto in continua evoluzione, senza rinunciare a robustezza e affidabilità Duttile Adatto a prototipazioni rapide tanto quanto ad applicazioni mastodontiche Ostile Curva di apprendimento alta e impossibilità di utilizzo parziale
24. Challenges
25. Challenge - Routing 1 1. Creare un nuovo componente con nome CreateLink 2. Sostituire hn-link-list con router-outlet nel component AppComponent 3. Definire 3 rotte a. La rotta / dovrà mostrare il componente LinkList b. La rotta /create dovrà mostrare il component CreateLink c. La rotta ** dovrà reindirizzare alla rotta / 4. Aggiungere dei routerLink all’header in AppComponent a. Al link new dovrà corrispondere la rotta / b. Al link submit dovrà corrispondere la rotta /create BONUS: configurare il router nel modulo separato AppRoutingModule stackblitz.com/edit/aw-routing-challenge
26. Challenge - Routing 2 1. Riscrivere il comportamento del pulsante More della componente LinkListComponent usando routerLink a. Al click l’applicazione deve navigare alla pagina successiva a quella attuale b. La pagina è indicata dal parametro opzionale di nome p 2. Riscrivere il comportamento della componente LinkListComponent usando ActivatedRoute: a. All’avvio deve mostrare i dati inerenti alla pagina specificata nel parametro query p b. Se il parametro non è specificato ha valore 1 di default BONUS: cercare di realizzare il secondo punto usando solo gli operators di RxJS (map, startWith, tap e switchMap) stackblitz.com/edit/aw-routing-challenge
27. Challenge - Form 1. Inizializzare una form nel template del component CreateLink 2. Inserire un campo di input che permetta di inserire la descrizione del link a. Il valore del campo deve essere inserito obbligatoriamente, altrimenti mostrare un errore b. Il valore del campo non deve superare i 100 caratteri, altrimenti mostrare un errore 3. Inserire un campo di input che permetta di inserire la url del link a. Il valore del campo deve essere inserito obbligatoriamente, altrimenti mostrare un errore 4. Inserire un pulsante che permetta di salvare i dati nella form: a. Se i dati non sono validi il pulsante deve essere disabilitato b. Se i dati sono validi vanno inviati al server tramite il metodo addLink del servizio ApiService c. A salvataggio effettuato navigare verso la rotta / BONUS: Validare la correttezza della url (e.g. [url-scheme]://[rest-of-url]) stackblitz.com/edit/aw-form-challenge
28. Fine