Ak ste vyvíjali aplikáciu pomocou AngularJS, pravdepodobne viete o HTTP interceptoroch. Tieto HTTP interceptory však neboli v Angular dostupné až do verzie 4.3. V tomto návode budeme používať interceptory v Angular na spracovanie HTTP požiadaviek a odpovedí a na spracovanie chýb.
Požiadavky
Angular aplikácie používajú Node.js runtime. Na dokončenie tohto návodu budete musieť mať na svojom počítači nainštalovaný Node.js. Našťastie, inštalácia Node.js je pomerne jednoduchá. Máme kompletného sprievodcu o tom, Ako nainštalovať Node.js na Ubuntu 18.04 tu.
Okrem toho bude pre vás užitočné poznať Angular a byť oboznámený s používaním Angular CLI na zostavenie Angular aplikácií. Budeme používať Node v8.12.0 a npm v6.4.1.
Krok 1: Vytvorenie Angular aplikácie
Na začiatok vytvorme novú Angular aplikáciu pomocou Angular CLI. Našu aplikáciu pomenujeme Angular-Interceptor. Spustením príkazu nižšie vytvorte aplikáciu:
|
1 |
npx @angular/cli@7.0.6 new Angular-Interceptor |
Budete požiadaní o niekoľko volieb. Zadajte predvolené hodnoty a pokračujte:
Ďalej prejdite do adresára aplikácie a spustením príkazu nižšie spustite aplikáciu:
|
1 |
npx ng serve --open |
Potom si pozrite http://localhost:4200 vo vašom prehliadači, aby ste videli aplikáciu. Teraz ste nakonfigurovali základnú Angular aplikáciu.
Krok 2: Štýlovanie Angular aplikácie
Tu budeme štýlovať našu Angular aplikáciu pomocou Angular Material. Ak chcete nainštalovať Angular Material do svojho projektu, spustite príkaz nižšie:
|
1 |
npm install --save @angular/material@7.0.4 @angular/cdk@7.0.4 @angular/animations@7.0.4 |
Týmto sa nainštaluje @angular/material, @angular/cdk, a @angular/animation vo vašom projekte. Ďalej v projekte nastavíme animáciu. Pridajte BrowserAnimationsModule do vášho src/app/module.ts súboru:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
... import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({ ... imports: [ ... BrowserAnimationsModule ], ... }) export class AppModule { } |
Budeme používať komponent Dialog z Angular Material. Ak chcete použiť komponent Dialog, musíme importovať MatDialogModule v src/app/app.module.ts súbore:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
... import { MatDialogModule } from '@angular/material'; @NgModule({ ... imports: [ ... MatDialogModule ], ... }) export class AppModule { } |
Aby bolo používateľské rozhranie atraktívnejšie, pridajme indigo-pink.css do vášho styles.scss súboru:
|
1 |
@import "~@angular/material/prebuilt-themes/indigo-pink.css"; |
Krok 3: Vytvorenie vášho Angular Interceptora
V priečinku app vytvoríme nový priečinok s názvom interceptor. Vo vnútri tohto novovytvoreného priečinka vytvorte nový httpconfig.interceptor.ts súbor.
Do nášho httpconfig.interceptor.ts musíme importovať niektoré závislosti, aby náš interceptor fungoval. Tieto závislosti sú HttpInterceptor, HttpRequest, HttpResponse, a HttpHandler, HttpEvent, HttpErrorResponse.
Náš httpconfig.interceptor.ts súbor bude po importe vyzerať nasledovne:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import { Injectable } from '@angular/core'; import { HttpInterceptor, HttpRequest, HttpResponse, HttpHandler, HttpEvent, HttpErrorResponse } from '@angular/common/http'; import { Observable, throwError } from 'rxjs'; import { map, catchError } from 'rxjs/operators'; |
Ďalej vytvorte triedu HttpConfigInterceptor a implementujte rozhranie HttpInterceptor. Toto je príklad:
|
1 2 3 4 5 6 7 |
@Injectable() export class HttpConfigInterceptor implements HttpInterceptor { intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { // ... } } |
Pridajte nižšie uvedený kód do httpconfig.interceptor.ts súboru:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
... @Injectable() export class HttpConfigInterceptor implements HttpInterceptor { intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { const token: string = localStorage.getItem('token'); if (token) { request = request.clone({ headers: request.headers.set('Authorization', 'Bearer ' + token) }); } if (!request.headers.has('Content-Type')) { request = request.clone({ headers: request.headers.set('Content-Type', 'application/json') }); } request = request.clone({ headers: request.headers.set('Accept', 'application/json') }); return next.handle(request).pipe( map((event: HttpEvent<any>) => { if (event instanceof HttpResponse) { console.log('event--->>>', event); } return event; })); } } |
Aby to fungovalo, musíme importovať httpconfig.interceptor.ts v našom app.module.ts súbore:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
... import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http'; ... import { HttpConfigInterceptor } from './interceptor/httpconfig.interceptor'; @NgModule({ ... imports: [ ... HttpClientModule ], ... }) |
Pridajte HttpConfigInterceptor do providers. Nastavíme multi: true na spracovanie viacerých interceptorov:
|
1 2 3 4 5 6 7 8 9 10 |
... @NgModule({ ... providers: [ ... { provide: HTTP_INTERCEPTORS, useClass: HttpConfigInterceptor, multi: true } ], ... }) ... |
V nasledujúcej časti vytvoríme našu službu na spracovanie chýb.
Krok 4: Služba na spracovanie chýb
Tu budeme písať kód na spracovanie chýb. Budeme musieť zachytiť chyby a vhodne ich zobraziť koncovým používateľom. V skratke, nižšie sú uvedené kroky, ktoré budeme sledovať:
- Vytvorte priečinok s názvom error-dialog v app priečinku.
- Vytvorte službu pre chyby s názvom errorDialogService v súbore s názvom errordialog.service.ts.
- Pridajte nižšie uvedený kód do errordialog.service.ts :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
import { Injectable } from '@angular/core'; import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material'; import { ErrorDialogComponent } from './errordialog.component'; @Injectable() export class ErrorDialogService { public isDialogOpen: Boolean = false; constructor(public dialog: MatDialog) { } openDialog(data): any { if (this.isDialogOpen) { return false; } this.isDialogOpen = true; const dialogRef = this.dialog.open(ErrorDialogComponent, { width: '300px', data: data }); dialogRef.afterClosed().subscribe(result => { console.log('Dialógové okno bolo zatvorené'); this.isDialogOpen = false; let animal; animal = result; }); } } |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import { Component, Inject } from '@angular/core'; import { MAT_DIALOG_DATA } from '@angular/material'; @Component({ selector: 'app-root', templateUrl: './errordialog.component.html' }) export class ErrorDialogComponent { title = 'Angular-Interceptor'; constructor(@Inject(MAT_DIALOG_DATA) public data: string) {} } |
|
1 2 3 4 5 6 7 8 9 10 |
<div> <div> <p> Dôvod: {{data.reason}} </p> <p> Stav: {{data.status}} </p> </div> </div> |
Na zhrnutie si nižšie uveďme jednotlivé kroky:
- Začnite importovaním errordialog.service.
- Potom pridáme konštruktor pre errorDialogService.
- Taktiež pridáme kód na spracovanie chybovej odpovede pomocou catchError a throwError.
- Importujte errordialog.service a errordialog.component do AppModule.
Po vykonaní zmien sa upravia dva súbory: app.module.ts a httpconfig.interceptor.ts:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
... import { ErrorDialogComponent } from './error-dialog/errordialog.component'; ... import { ErrorDialogService } from './error-dialog/errordialog.service'; ... @NgModule({ ... declarations: [ ... ErrorDialogComponent ], ... providers: [ ... ErrorDialogService ], entryComponents: [ErrorDialogComponent], }) |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
... import { ErrorDialogService } from '../error-dialog/errordialog.service'; ... @Injectable() export class HttpConfigInterceptor implements HttpInterceptor { constructor(public errorDialogService: ErrorDialogService) { } intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { ... return next.handle(request).pipe( map((event: HttpEvent<any>) => { if (event instanceof HttpResponse) { console.log('event--->>>', event); } return event; }), catchError((error: HttpErrorResponse) => { let data = {}; data = { reason: error && error.error && error.error.reason ? error.error.reason : '', status: error.status }; this.errorDialogService.openDialog(data); return throwError(error); })); } } |
Krok 5: Vytvorenie ukážkových služieb
V tomto kroku vytvoríme dve služby ako ukážku:
- Prihlasovacie API
- API detailov zákazníka
Vytvorte nový priečinok s názvom services v priečinku src . Následne v tomto novovytvorenom priečinku vytvorte nový súbor s názvom login.service.ts, a pridajte dve funkcie:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable() export class LoginService { constructor(private http: HttpClient) { } login(data) { data = { email: 'admin', password: 'admin' }; return this.http.post('http://localhost:3070/api/login', data); } getCustomerDetails() { return this.http.get('http://localhost:3070/customers/details'); } } |
Krok 6: Volanie služby HTTP klienta
Nakoniec sme sa dostali k poslednej časti nášho návodu. Našu HTTP službu budeme volať zo súboru app.component.ts . Pridajte dve funkcie LoginService do app.component.ts. Zavolajte prihlasovacie API pomocou onload a customers/details pomocou onclick:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
import { Component } from '@angular/core'; import { LoginService } from './services/login.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { title = 'Angular-Interceptor'; constructor(public loginService: LoginService) { this.loginService.login({}).subscribe(data => { console.log(data); }); } getCustomerDetails() { this.loginService.getCustomerDetails().subscribe((data) => { console.log('----->>>', data); }); } } |
Teraz musíme pridať UI prvok do app.component.html, aby naň mohol používateľ kliknúť:
|
1 |
<h2 (click)="getCustomerDetails()">Získať zákaznícke podrobnosti</h2> |
Na dokončenie budete musieť zahrnúť LoginService do providers v AppModule:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
... import { LoginService } from './services/login.service'; ... @NgModule({ ... providers: [ ... LoginService ] ... }) |
Nižšie nájdete snímku obrazovky dialógového okna pre spracovanie chýb:
Záver
V tomto návode sme sa naučili, ako spracovávať HTTP požiadavky a odpovede pomocou interceptorov v Angular. Tiež sme sa naučili, ako spracovávať chyby pomocou dialógového okna v Angular Material.
Aplikácie v Angular používajú Node.js ako svoje runtime prostredie. Ak sa chcete dozvedieť viac o Node.js a o tom, ako nasadiť aplikácie Node.js v Dockeri, pozrite si nášho sprievodcu Ako nasadiť Node.js (Express.js) aplikáciu pomocou Dockeru na Ubuntu 20.04. Môžete si tiež pozrieť Ako vykonávať produkčné úlohy na Ubuntu 20.04 s Node.js a Inštalácia Node.js na CentOS 8: Kompletný sprievodca.
Príjemné programovanie!
Komentáre
Zatiaľ žiadne komentáre. Buďte prvý.