X

Vitajte!

Nepremeškajte nové videá a zaujimavé novinky zo sveta Angularu 2+...

00:16 - 00:18Vitajte v novom videu
00:18 - 00:20V dnešnej časti si povieme o servisoch
00:20 - 00:22Čo sú to servisy...
00:22 - 00:23Čo s nimi môžete robiť...
00:23 - 00:27A vytvoríme si jendoduchú Angular aplikáciu
00:27 - 00:30kde pomocou servisov vytvoríme jednoduché API
00:31 - 00:34Ako Vaša Angular aplikácia rastie
00:34 - 00:37často sa stáva, že na viacerých miestach Vašej aplikácie
00:37 - 00:40potrebujete spúšťať rovnaký kód
00:40 - 00:43Namiesto kopírovania takejto funkcionality znovu a znovu
00:43 - 00:46ju môžete oddeliť do prepoužiteĺných celkov
00:46 - 00:49ktoré sa dajú pomocou Dependency Injection
00:49 - 00:52použiť v akomkoľvek inom komponente či direktíve
00:53 - 00:54Zjednodušene povedané...
00:55 - 00:59Servis je oddelená funkcionalita ktorú používate často na rôznych miestach
01:00 - 01:01Preto je dobré ju mať len raz
01:01 - 01:05na jednom mieste a používať ju len vtedy keď treba
01:05 - 01:07Najčastejšie použitie servisov
01:07 - 01:08sú API volania
01:09 - 01:11Tento prípad si ukážeme aj my
01:11 - 01:12Poďme na to!
01:15 - 01:18Predtým ako začneme potrebujeme už prvykrát backend
01:18 - 01:21Keďže každý z nás má rád iné technológie
01:21 - 01:24ja si vyrobím fejkové API pomocou služby
01:24 - 01:24JSON Server
01:25 - 01:27Ten dokáže pomocou statického JSONu vytvoriť
01:28 - 01:30plne funkčné jendoduché API
01:30 - 01:32ktoré vie manipulovať s obsahom
01:32 - 01:33nášho JSON súboru
01:42 - 01:44Otvorme si terminál
01:44 - 01:46a nainštalujme ho pomocou príkazu
01:46 - 01:51npm install json-server -g
01:52 - 01:53-g ako globálne
02:06 - 02:09A náš fejkový server pustíme príkazom
02:09 - 02:14json-server --watch data.json
02:14 - 02:18Kde data.json je JSON s našimi dátami
02:23 - 02:27A po zadaní URL adresy localhost:3000/users
02:28 - 02:30sa zobrazia všetky dáta z našeho JSONu
02:36 - 02:39Ak chceme napríklad pristupovať ku konkrétnej položke
02:39 - 02:41tak z a/users dáme lomítko a napíšeme
02:41 - 02:42konkrétne IDčko
02:51 - 02:54Toto API nám umožňuje ale oveľa viac
02:54 - 02:57napríklad pomocou parametrov _limit a _page
02:57 - 03:01simuluje listovanie ktoré použijeme v našej aplikácii
03:07 - 03:11V našej ukážkovej aplikácii použijeme GET, PUT
03:11 - 03:13DELETE a parametre pre listovanie
03:27 - 03:29Vytvorme si novú Angular aplikáciu
03:34 - 03:36A spustime ju
03:59 - 04:01Spustime si náš fejkový server
04:01 - 04:07Ako port nastavme 4000 pretože na porte 3000 beží Angular CLI
04:15 - 04:17Ako vidíte naše API funguje!
04:28 - 04:31Vytvorme si nový komponent UserList
05:04 - 05:07Do našeho hlavného app.module.ts
05:07 - 05:10si pridajme RouterModule a Routes z @angular/router
05:34 - 05:37Ďalej si vytvoríme routing ktorý bude mať URL
05:37 - 05:39/page/:id
05:39 - 05:42a bude to smerovať na UserList komponent
05:42 - 05:45To isté spravíme pre URL bez lomítka
05:45 - 05:48tú redirektujeme na page/1 (na prvú stránku)
06:15 - 06:19Do app.component.ts si pridáme
06:44 - 06:47Náš router dáva chybu... to preto
06:47 - 06:50že ho musíme najprv importnúť pomocou
06:50 - 06:53RouterModule.forRoot( ) do našeho hlavného modulu
07:11 - 07:14Do UserList komponentu si pridáme Router
07:14 - 07:17ActivatedRoute a Params
07:17 - 07:18z @angular/router
07:27 - 07:30Ďalej si vytvorme premennú currentPage
07:30 - 07:31typu NUMBER
07:35 - 07:38Do konštruktora si pridajme ActivatedRoute
07:43 - 07:46a hodnotu parametra ID priraďme
07:46 - 07:48do premennej currentPage
08:01 - 08:04Všimnite si, že používame zjednodušený zápis pomocou
08:04 - 08:06tzv. Fat Arrow
08:24 - 08:27A hodnotu premennej currentPage
08:27 - 08:28si zobrazme v template
08:33 - 08:36Náš komponent UserList teraz dokáže z URL adresy
08:36 - 08:38prebrať číslo stránky
08:38 - 08:40na ktorej sa nachádza
08:44 - 08:47Poďme si ukázať ako vytvoriť základný SERVICE
08:48 - 08:50Pomocou príkazu:
08:50 - 08:53ng g service vytvoríme v adresári services
08:53 - 08:55servis s názvom User
09:00 - 09:02Ako vidíte service je jednoduchá classa
09:02 - 09:05ktorá obsahuje dekorátor @Injectable( )
09:05 - 09:08a ďalej s ňou pracujeme ako s klasickým komponentom
09:08 - 09:11Vytvárame v nich metódy ktoré použijeme v ostatných komponentoch
09:13 - 09:16Keďže náš servis bude vytvárať HTTP requesty
09:16 - 09:19pridajme si Angular HTTP modul
09:19 - 09:22a Observables kde použijeme operátor MAP
09:43 - 09:46Cez konštruktor poskytnime našemu servisu
09:46 - 09:47HTTP Modul
09:55 - 09:57Poďme si vyvoriť metódu ktorá vytiahne
09:57 - 10:01úplný zoznam užívateľov z API, nazvime ju
10:01 - 10:03getAllUsers( ) a bude to Observable
10:03 - 10:05typu STRING
10:11 - 10:14Pomocou HTTP modulu a metódy GET
10:14 - 10:17si z URL adresy localhost/users
10:17 - 10:20vytiahneme úplný zoznam užívateľov
10:29 - 10:32Pomocou metódy MAP si ho vrátime ako JSON
11:04 - 11:08Ak ho chceme použiť v komponente importnime si ho ako akýkoľvek iný modul
11:10 - 11:12Pridajme si ho do dekorátora @Component( )
11:12 - 11:15do sekcie Providers a cez konštruktor ho
11:15 - 11:17poskytnime našemu komponentu
11:37 - 11:40Vytvorme si premennú allUserData
11:40 - 11:44typu Object do ktorej načítame naše hodnoty z API
11:44 - 11:46V metóde ngOnInit
11:46 - 11:52nám stačí zavolať this.userService.getAllUsers( )
11:52 - 11:52metódu
11:52 - 11:55na ktorú sa subscribneme a naše dáta
11:55 - 11:59budú v premennej data kde pomocou skráteného zápisu
11:59 - 12:00s pomocou Fat Arrow
12:00 - 12:03priradíme tieto dáta do našej premennej
12:03 - 12:05this.allUserData
12:21 - 12:24Pre kontrolu si naše dáta vypíšme v komponente
12:42 - 12:44Ako vidíte naše dáta sa v template zobrazili
12:44 - 12:47v JSON formáte a ak sa pozrieme do
12:47 - 12:50NETWORKu Google Chrome uvidíme, že
12:50 - 12:54náš servis robí externý API call na URL /users
13:02 - 13:04Poďme si vytvoriť ďalšie API cally
13:05 - 13:08Naše fejkové API nám umožňuje zadávať parametre
13:08 - 13:11_page, _limit
13:11 - 13:13pre vytvorenie stránkovania
13:13 - 13:16Vytvorme si metódu getUserListPage( )
13:16 - 13:18ktorá bude preberať parameter pageNumber
13:18 - 13:22a bude volať API call s parametrami _page a _limit
13:22 - 13:24pre zobrazenie konkrétnej stránky
14:34 - 14:36Vytvorme si metódu getUserInfo( )
14:36 - 14:39ktorá bude mať parameter userId
14:39 - 14:42a zobrazí informácie o konkrétnom užívateľovi
15:35 - 15:38Poďme si vytvoriť metódu pre vymazanie užívateľa
15:39 - 15:42Vytvoríme ju obdobným spôsobom ako getUserInfo( )
15:42 - 15:45len s jediným rozdielom, že namiesto metódy GET
15:45 - 15:48použijeme metódu DELETE
15:48 - 15:49z HTTP modulu
16:44 - 16:48Nasleduje funkcia pre update dát o užívateľovi
16:48 - 16:49ktorá bude mať 2 parametre
16:49 - 16:52Jedno bude "userId" a druhé "data"
16:52 - 16:57teda JSON všetkých fieldov formuláru o užívateľovi
16:58 - 16:59V tomto prípade použijeme
16:59 - 17:02metódu PUT z HTTP modulu
18:07 - 18:10Na začiatku sme si importli do nášho servisu
18:10 - 18:14Headers a RequestOptions z @angular/http modulu
18:14 - 18:15Tie nám slúžia na to
18:15 - 18:17ak potrebujeme modifikovať
18:17 - 18:20headre našich API volaní
18:20 - 18:23V prípade, že chceme napríklad zmeniť napríklad "Content-Type" nášho volania
18:23 - 18:26tak pomocou príkazu "new Headers( )"
18:26 - 18:29a "new RequestOptions( )" vieme takýto header vytvoriť
18:29 - 18:33a potom nám už stačí ho len priradiť do nášho API callu
18:33 - 18:35ako tretí parameter OPTIONS
19:07 - 19:09Poďme náš servis použiť a vytvorme
19:09 - 19:12plne funkčnú jendoduchú aplikáciu
19:12 - 19:14Vytvorme si komponent UserItem
19:14 - 19:16a naplňme ho našimi dátami
20:33 - 20:37Pomocou ngFor vypíšme všetky dáta v cykle
20:37 - 20:39z premennej allUserData
20:39 - 20:41a poskytnime tieto dáta cez
20:41 - 20:45Input [userData] komponentu UserItem
21:51 - 21:55Stiahnime si Bootstrap, uložme si ho do samostatného súboru
21:55 - 21:57bootstrap.css
21:57 - 22:00a pridajme si ho do lokálnych assetov
22:00 - 22:03v súbore angular-cli.json
22:25 - 22:27A spustime ng serve znovu
22:34 - 22:36Dostali sme chybu! To preto, že
22:36 - 22:40pred slovom asset som dal lomítko, dajme ho preč!
23:06 - 23:09Pomocou interpolácie a Bootstrapu
23:09 - 23:14dáme našemu UserItem komponentu vzhľad a štýl
25:02 - 25:05Nakoniec pridáme buttony EDIT a DELETE
25:05 - 25:07ktoré použijeme neskôr
26:01 - 26:04Pridajme do našeho templatu buttony
26:04 - 26:07"Previous" a "Next" ktoré použijeme ako paginator
27:10 - 27:13V našom UserList komponente si vytvorme
27:13 - 27:16funkciu loadPage( ) ktorá bude mať parameter pageId
27:16 - 27:19a použime túto funkciu vo vnútri
27:19 - 27:22subscribu hneď po tom ako zistíme
27:22 - 27:25z URL adresy na akej stránke sa nachádzame
27:25 - 27:27Túto hodnotu poskytnime funkcii this.loadPage( )
27:27 - 27:32a tá si cez API natiahne dáta stránky na ktorej sa práve nachádzam
27:56 - 27:59Do našich buttonov "Previous" a "Next"
27:59 - 28:02pridáme RouterLink smerujúci na /page
28:02 - 28:05s dynamickou hodnotou currentPage + 1
28:05 - 28:08pre ďalšiu stránku a currentPage - 1
28:08 - 28:09pre predchádzajúcu
28:51 - 28:55Ako vidíte button "Previous" môže ísť aj do mínusových hodnôt
28:55 - 28:59To môžeme ošetriť tak, že pridáme tam parameter [disabled]
28:59 - 29:03ktorý sa aktivuje ak currentPage <= 1
29:45 - 29:47Poďme si do komponentu UserItem
29:47 - 29:50pridať DELETE button a jeho funkcionalitu
29:50 - 29:53Vytvorme si funkciu deleteUser( )
29:53 - 29:55ktorá má parameter userID
29:56 - 29:59a zatiaľ vypíše alert( ) s textom
29:59 - 30:00"Deleted"
30:08 - 30:11Priraďme túto funkciu na event (click)
30:12 - 30:14a hodnotu userID
30:14 - 30:17použijeme z premennej userData.id
30:44 - 30:47Do našeho komponentu si importnime náš UserService
30:48 - 30:50Pridajme ho do providerov
30:51 - 30:54a poskytnime ho našemu komponentu cez konštruktor
30:59 - 31:02V našej metóde deleteUser( ) potom zavolajme
31:02 - 31:06this.userService.deleteUser( )
31:06 - 31:09a poskytnime mu parameter userID
31:27 - 31:30Vymazávanie užívateľa na pozadí funguje
31:30 - 31:32ale po kliku na tlačidlo DELETE
31:32 - 31:35vidíme stále pôvodné dáta, poďme to upraviť
31:42 - 31:45Do našeho komponentu si pridajme Output
31:45 - 31:49a EventEmmiter a vytvorme event
31:49 - 31:50deletedUser
32:07 - 32:11Vo vnútri funkcie deleteUser( ) v subscribe
32:11 - 32:13zavoláme náš EventEmmiter
32:13 - 32:15a odošleme hodnotu TRUE
32:15 - 32:19V praxi to bude znamenať, že vždy keď klikneme na tlačidlo DELETE
32:19 - 32:22na pozadí sa vykoná API call ktorý vymaže užívateľa
32:22 - 32:25a mimo našeho komponentu pošle signál, že
32:25 - 32:27užívateľ bol vymazaný
32:29 - 32:33V našom hlavnom UserList komponente si vytvoríme funkciu
32:33 - 32:36reloadCurrentPage( ) ktorá načíta
32:36 - 32:39aktuálne dáta stránky na ktorej sa práve nachádzate
32:39 - 32:41My túto funkciu použijeme vtedy
32:41 - 32:44keď užívateľ klikne na tlačidlo DELETE
32:44 - 32:46Užívateľ sa zmaže a rovno načítame
32:46 - 32:49nový zoznam užívateľov na danej stránke
32:58 - 33:00Priraďme túto funkciu reloadCurrentPage( )
33:00 - 33:04našemu custom eventu (deletedUser)
33:08 - 33:11A ako môžete vidieť po kliknutí na DELETE
33:11 - 33:15sa užívateľ zmaže a zároveň sa načíta
33:15 - 33:16nový zoznam
33:17 - 33:19užívateĺov na danej stránke
33:19 - 33:21takže môžete klikať na DELETE a zo zoznamov
33:22 - 33:24busú stále ubúdať užívatelia
33:24 - 33:26a zároveň budete vidieť nových
33:43 - 33:46Poďme si vytvoriť komponent pre editáciu užívateľa
34:04 - 34:07Do našeho hlavného app.module.ts si pridajme
34:07 - 34:09cestu /edit/:userid
34:09 - 34:12ktoré bude smerovať na EditUser komponent
35:09 - 35:11Do našeho edit komponentu si pridajme
35:11 - 35:15Router, ActivatedRoute a Params z @angular/router
35:15 - 35:18Pridajme si tiež kód pre získanie
35:18 - 35:22parametra ID ktorý použijeme pre načítanie konkrétneho užívateľa
36:08 - 36:12Vytvorme si premennú userData typu Object
36:12 - 36:14ktorá bude obsahovať dáta o danom užívateľovi
36:14 - 36:18tiež si importnime do komponentu UserService
36:18 - 36:19a cez konštruktor
36:19 - 36:21ho poskytnime našemu komponentu
36:42 - 36:45V premennej edituserID máme uloženú
36:45 - 36:48userID z URL adresy
36:48 - 36:51Pomocou funkcie getUserInfo( ) z našeho servisu
36:51 - 36:54vytiahneme dáta o konkrétnom užívateľovi
36:54 - 36:57a uložíme ich do premennej this.userData
36:57 - 36:59a tú si zobrazíme v template
37:12 - 37:15A nesmieme zabudnúť pridať náš servis do providerov
37:15 - 37:17inak dostaneme takúto chybu
38:06 - 38:08Z nášho UserInfo komponentu si
38:08 - 38:11skopírujeme obsah ktorý zobrazuje dáta
38:11 - 38:14a pridáme tam textové polia pre editáciu
38:32 - 38:35A pre každé pole použijeme [(ngModel)]
38:35 - 38:37s názvom konkrétnej property
38:38 - 38:41aby sa každá zmena aplikovala
38:41 - 38:42do premennej userData
38:48 - 38:51Týmto spôsobom prerobíme všetky textové
38:51 - 38:54hodnoty na inputy s pomocou ngModelu
38:54 - 38:58a vyrobíme tak formulár ktorý je celý editovateľný
39:15 - 39:17Ako vidíte dostávame chybu kde Angular nepozná
39:17 - 39:20ngModel, preto si musíme do našeho hlavného
39:20 - 39:23app.module.ts pridať FormsModule
39:23 - 39:24z @angular/forms
41:26 - 41:29Pre ukážku aby sme videli ako ngModel mení
41:29 - 41:31dáta v premennej userData
41:31 - 41:35si ju zobrazíme v JSON formáte pod formulárom
41:58 - 42:01V našom EditUser komponente si vytvorme funkciu
42:01 - 42:02saveData( )
42:02 - 42:05ktorá bude mať parameter userData
42:05 - 42:09tam budú už naše zmenené dáta ktoré zmení ngModel
42:09 - 42:12pri každej zmene akéhokoľvek políčka
42:12 - 42:13v našom formulári
42:13 - 42:17Vo vnútri tejto funkcie použijeme z našeho servisu funkciu updateUser( )
42:17 - 42:20ktorej poskytneme prvý parameter editUserID
42:20 - 42:23teda ktorého užívateľa ideme meniť a
42:23 - 42:27premennú this.userData kde už sú naše nové dáta
42:51 - 42:54Ďalej si vytvorme premennú saved typu BOOLEAN
42:54 - 42:57ktorá bude mať defaultnú hodnotu FALSE
42:57 - 43:00a vo vnútri našeho servisu, v subscribe
43:01 - 43:04po úspešnom uložení užívateľa nastavíme hodnotu tejto premennej
43:04 - 43:07na TRUE a o sekundu neskôr pomocou
43:07 - 43:09setTimeout nastavíme na FALSE
43:26 - 43:29Stav tejto premennej použijeme na zobrazenie
43:29 - 43:33hlášky "Saved!" po každom úspešnom uložení užívateľa
43:33 - 43:35To kedy sa zobrazí bude
43:35 - 43:36riešiť direktíva ngIf
43:38 - 43:41Našemu update buttonu ešte pridáme (click) event
43:41 - 43:43ktorý zavolá funkciu saveData( )
43:43 - 43:45a ako parameter použije
43:45 - 43:47hodnotu premennej userData
44:30 - 44:34Ako vidíte editácia a ukladanie dát funguje
44:52 - 44:55Poďme si ešte pridať BACK button pre návrat
44:55 - 44:57na predchádzajúcu stránku
45:15 - 45:18V našom komponente si vytvorme funkciu goBack( )
45:18 - 45:22a importnime si z @angular/common
45:23 - 45:24Location
45:39 - 45:42V našej funkcii goBack( ) nám stačí už len zavolať
45:42 - 45:45funkciu back( ) ktorú nám poskytuje location
45:45 - 45:48a užívateľ bude redirektovaný späť
45:51 - 45:54Ešte musíme funkciu goBack( ) priradiť ako (click) event
45:54 - 45:55do buttonu BACK
46:17 - 46:20Ešte si musíme prelinkovať náš EDIT button
46:20 - 46:23aby smeroval do našeho EDIT formuláru
47:10 - 47:13V tejto časti sme si povedali o servisoch
47:13 - 47:16a vytvorili jednoduchú aplikáciu ktorá uch používa
47:16 - 47:18pre volanie našeho API
47:19 - 47:22naučili sme sa ako vytvárať a vkladať do
47:22 - 47:25komponentov servisy a tiež ako vytvárať
47:25 - 47:27základné volania pre REST API
47:29 - 47:31Dúfam, že sa Vám dnešná časť páčila
47:32 - 47:34a uvidíme sa nabudúce

ServicesZákladné API volania

V tejto časti si ukážeme ako pomocou servisov vytvoriť API ktoré použijeme pre vývoj jednoduchej Angular aplikácie

Čo je to servis v Angular 2+?

Ako Vaša Angular aplikácia rastie často sa stáva, že na viacerých miestach Vašej aplikácie potrebujete spúšťať rovnaký kód. Namiesto kopírovania takejto funkcionality znovu a znovu ju môžete oddeliť do prepoužiteĺných celkov ktoré sa dajú pomocou Dependency Injection použiť v akomkoľvek inom komponente či direktíve.

Zjednodušene povedané... Servis je oddelená funkcionalita ktorú používate často na rôznych miestach.

Základné API volania

V tejto časti si vytvoríme jednoduchú Angular aplikáciu používajúcu Services pre volanie API callov.



import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';

@Injectable()
export class UserService {

  constructor(private _http: Http) { }

  getAllUsers(): Observable<string> {
    return this._http.get('http://localhost:4000/users')
      .map((res: Response) => res.json());
  }

  getUserListPage(pageNumber): Observable<string> {
    return this._http.get('http://localhost:4000/users/?_page='+ pageNumber + '&_limit=10')
      .map((res: Response) => res.json());
  }

  getUserInfo(userId): Observable<string> {
    return this._http.get('http://localhost:4000/users/'+ userId)
      .map((res: Response) => res.json());
  }

  deleteUser(userId): Observable<string> {
    let deleteURL = 'http://localhost:4000/users/'+ userId;
    return this._http.delete(deleteURL)
      .map((res: Response) => res.json());
  }

  updateUser(userId, data): Observable<string> {

    let updateURL = 'http://localhost:4000/users/'+ userId;

    let headers = new Headers({'Content-Type': 'application/json'});
    let option: RequestOptions = new RequestOptions({ headers: headers });

    return this._http.put(updateURL, data, option)
      .map((res: Response) => res.json());

  }

}



Stiahnite si súbory tohoto kurzu
    
#potrebujete node.js a globálne nainštalovaný @angular/cli
git clone https://github.com/streamer/angular_sk_kurz.git
cd angular_sk_kurz/12/myapp
npm install
ng serve
    


Diskusia