Pokud vyvíjíte aplikaci pomocí AngularJS, pravděpodobně víte o HTTP interceptorech. Tyto HTTP interceptory však v Angularu nebyly k dispozici až do verze 4.3. V tomto návodu budeme používat interceptory v Angularu ke zpracování HTTP požadavků a odpovědí a k řešení chyb.
Požadavky
Angular aplikace používají Node.js runtime. K dokončení tohoto návodu budete muset mít na svém počítači nainstalovaný Node.js. Instalace Node.js je naštěstí docela snadná. Máme kompletní návod na Jak nainstalovat Node.js na Ubuntu 18.04 zde.
Kromě toho pro vás bude užitečné znát Angular a umět používat Angular CLI k vytváření aplikací v Angularu. Budeme používat Node v8.12.0 a npm v6.4.1.
Step 1: Create Angular App
Na začátek vytvořme novou aplikaci v Angularu pomocí Angular CLI. Naši aplikaci pojmenujeme Angular-Interceptor. Pro vytvoření aplikace spusťte níže uvedený příkaz:
|
1 |
npx @angular/cli@7.0.6 new Angular-Interceptor |
Budete požádáni o několik voleb. Zadejte výchozí hodnoty a pokračujte:
Dále přejděte do adresáře aplikace a spuštěním níže uvedeného příkazu aplikaci spusťte:
|
1 |
npx ng serve --open |
Poté si v prohlížeči zobrazte http://localhost:4200 a uvidíte aplikaci. Nyní máte nakonfigurovanou základní aplikaci v Angularu.
Krok 2: Stylování aplikace v Angularu
Zde budeme stylovat naši aplikaci v Angularu pomocí Angular Material. Chcete-li do svého projektu nainstalovat Angular Material, spusťte níže uvedený příkaz:
|
1 |
npm install --save @angular/material@7.0.4 @angular/cdk@7.0.4 @angular/animations@7.0.4 |
Tím se do vašeho projektu nainstaluje @angular/material, @angular/cdk, a @angular/animation v projektu. Dále v projektu nastavíme animaci. Přidejte BrowserAnimationsModule do vašeho souboru src/app/module.ts :
|
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žívat komponentu Dialog z Angular Material. Chcete-li použít komponentu Dialog, musíme importovat MatDialogModule v souboru src/app/app.module.ts :
|
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 bylo uživatelské rozhraní atraktivnější, přidejme indigo-pink.css do vašeho souboru styles.scss :
|
1 |
@import "~@angular/material/prebuilt-themes/indigo-pink.css"; |
Krok 3: Vytvoření vašeho Angular Interceptoru
Ve složce app vytvoříme novou složku s názvem interceptor. Uvnitř této nově vytvořené složky vytvořte nový soubor httpconfig.interceptor.ts .
Aby náš interceptor fungoval, musíme do našeho souboru httpconfig.interceptor.ts importovat některé závislosti. Tyto závislosti jsou HttpInterceptor, HttpRequest, HttpResponse, a HttpHandler, HttpEvent, HttpErrorResponse.
Náš soubor httpconfig.interceptor.ts bude po importu vypadat následovně:
|
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'; |
Dále vytvořte třídu HttpConfigInterceptor a implementujte rozhraní HttpInterceptor. Toto je příklad:
|
1 2 3 4 5 6 7 |
@Injectable() export class HttpConfigInterceptor implements HttpInterceptor { intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { // ... } } |
Přidejte níže uvedený kód do httpconfig.interceptor.ts souboru:
|
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 importovat httpconfig.interceptor.ts v našem app.module.ts souboru:
|
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 ], ... }) |
Přidejte HttpConfigInterceptor do providers. Nastavíme multi: true pro zpracování více interceptorů:
|
1 2 3 4 5 6 7 8 9 10 |
... @NgModule({ ... providers: [ ... { provide: HTTP_INTERCEPTORS, useClass: HttpConfigInterceptor, multi: true } ], ... }) ... |
V další části vytvoříme naši službu pro zpracování chyb.
Krok 4: Služba pro zpracování chyb
Zde budeme psát kód pro zpracování chyb. Budeme muset chyby zachytit a vhodně je zobrazit koncovým uživatelům. Stručně řečeno, níže jsou kroky, které budeme následovat:
- Vytvořte složku s názvem error-dialog v app složce.
- Vytvořte službu pro chyby s názvem errorDialogService v souboru s názvem errordialog.service.ts.
- Přidejte níže 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('Dialog byl zavřen'); 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> |
Pro shrnutí si níže uveďme jednotlivé kroky:
- Začněte importováním errordialog.service.
- Poté přidáme konstruktor pro errorDialogService.
- Také přidáme kód pro zpracování chybové odpovědi pomocí catchError a throwError.
- Importujte errordialog.service a errordialog.component do AppModule.
Po provedení změn budou upraveny dva soubory: 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: Vytvoření ukázkových služeb
V tomto kroku vytvoříme dvě ukázkové služby:
- Login API
- API detailů zákazníka
Vytvořte novou složku s názvem services ve složce src. Poté v této nově vytvořené složce vytvořte nový soubor s názvem login.service.ts a přidejte dvě funkce:
|
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: Volání služby HTTP klienta
Konečně jsme u poslední části našeho návodu. Budeme volat naši HTTP službu ze souboru app.component.ts. Přidejte tyto dvě LoginService funkce do app.component.ts. Zavolejte Login API při onload a customers/details pomocí 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); }); } } |
Now we have to add a UI element in app.component.html, so that the user can click it:
|
1 |
<h2 (click)="getCustomerDetails()">Získat podrobnosti o zákazníkovi</h2> |
To finish, you will need to include the LoginService to providers in AppModule:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
... import { LoginService } from './services/login.service'; ... @NgModule({ ... providers: [ ... LoginService ] ... }) |
Níže naleznete snímek obrazovky dialogového okna pro zpracování chyb:
Závěr
V tomto návodu jsme se naučili, jak zpracovávat HTTP požadavky a odpovědi pomocí interceptorů v Angularu. Také jsme se naučili, jak zpracovávat chyby pomocí dialogového okna v Angular Material.
Aplikace v Angularu používají jako své běhové prostředí Node.js. Pokud se chcete dozvědět více o Node.js a o tom, jak nasadit aplikace Node.js v Dockeru, podívejte se na naši příručku How to Deploy a Node.js (Express.js) App with Docker on Ubuntu 20.04 . Můžete se také podívat na How To Perform Production Tasks On Ubuntu 20.04 With Node.js a Installing Node.js on CentOS 8: a Complete Guide.
Příjemné programování!
Komentáře
Zatím žádné komentáře. Buďte první.