Angular

Workshop 4

Samuel Šramko

Čo už máme za sebou

• formuláre, komponenty, services a DI
• každá zo screenov by mala mať funkčnú komponentu
• formuláre by mali žiť a byť urobené reaktívne
• stav by sa mal predávať do zanorených komponent z hlavnej komponenty - AppComponent

Komponenty

• životný cyklus
• každý hook má svoj interface, ktorý je možné implementovať

Http

• modul @angular/common/http a HttpClientModule
• implementácia HTTP klienta - HttpClient
• vyriešené veci ako JSONP, automaticky počíta s JSON ako komunikačným formátom
• RxJS - knižnica od Microsoftu, Observable streams
  • pre túto chvíľu jedine urobiť konverziu na Promise -> toPromise() a následne možnosť použiť async/await

Http

• každá REST entita by mala mať vlastnú Service
• HTTP operácie
  • GET - získanie entity / kolekcie
  • PUT - aktualizácia existujúcej entity
  • POST - vytvorenie entity
  • DELETE - odstránenie entity
• HttpClient má funkciu pre každú HTTP metódu
• http volanie vracia by default RxJS Observable

Routing

• veľká aplikácia - extrémne množstvo obrazoviek
• každá obrazovka by mala mať vlastnú URL
  • bookmarks, SEO, ...
• @angular/router a RouterModule
• definovanie route
  • kombinácia komponenty, URL adresy, časti view v ktorej sa má daná komponenta vykresliť a guards, ktoré sa majú vykonať

Routing

• je nutné mať správne nastavený <base href=""> tag, vačšinou /
• následne sa napíše definícia jednotlivých Route a predá sa do konfigurácie RouteModule.forRoot(), prípadne RouteModule.forChild()
• Route
  • path - URL pre danú route, hierarchicky skomponovaná z parent Routes
  • component - komponenta pre route
  • data - statické dáta
  • children - pole subroutes
  • resolve - zoznam dát k získaniu pred načítaním route
  • outlet - názov outletu, kde sa má route vykresliť

Guards

• každá Route môže implementovať funkcie, ktoré sa vykonajú v nejakom životnom cykle danej route
  • canActivate - je možné zobraziť
  • canDeactivate - je možné odísť
  • canActivateChild - je možné zobraziť potomka
  • canLoad - je možné načítanie potomka
• interface pre každý typ guard
  • CanActivate, CanDeactivate, CanActivateChild, CanLoad

Resolve

• pri prechode na niektoré stránky je dobré získať dáta čo najskôr ako sa len dá
  • tabuľky, formuláre s číselníkmi, ...
• Resolve
  • interface s jedinou metódou resolve, ktorá vracia dáta
• Route sa neaktivuje, kým nie sú splnené všetky Resolve, ktoré má definované

Current vs. Snapshot

• Router aj Routes majú stav
  • aktuálny stav celého routru je v RouterState
  • aktuálna aktivovaná route je v ActivatedRoute
• počas vykonávania Resolve, prípadne Guards ale Route ešte nie je aktivovaná, sme v medzistave
  • stav routru je zasnapshotovaný v RouterStateSnapshot
  • route, ktorá má byť aktivovaná je v ActivatedRouteSnapshot

ActivatedRoute

• v komponnte je možné dostať sa k aktuálnej route cez konštruktor DI
  • params - path parametre URL
  • queryParams - query parametre URL
  • data - zoznam dát - resolve a statické
  • všetky vyššie uvedené sú Observable, použiť .subscribe(({model1:Model1, model2:Model2}) = > {...})

Navigácia

• programová
  • router.navigate(['/urlpath'])
• v šablóne pomocou routerLink direktívy
• možnosť predať parametre