Ako ste razvijali aplikaciju koristeći AngularJS, vjerojatno ste upoznati s HTTP presretačima. Međutim, ti HTTP presretači nisu bili dostupni u Angularu do verzije 4.3. U ovom vodiču koristit ćemo presretače u Angularu za upravljanje HTTP zahtjevima i odgovorima te za obradu pogrešaka.
Preduvjeti
Angular aplikacije koriste Node.js runtime. Kako biste dovršili ovaj vodič, morat ćete imati instaliran Node.js na svom računalu. Srećom, Node.js je prilično lako instalirati. Imamo cjeloviti vodič o tome Kako instalirati Node.js na Ubuntu 18.04 ovdje.
Osim toga, bit će vam korisno poznavati Angular i biti upoznati s korištenjem Angular CLI za izradu Angular aplikacija. Koristit ćemo Node v8.12.0 i npm v6.4.1.
Korak 1: Izrada Angular aplikacije
Za početak, stvorimo novu Angular aplikaciju pomoću Angular CLI-ja. Nazvat ćemo našu aplikaciju Angular-Interceptor. Pokrenite naredbu u nastavku kako biste stvorili aplikaciju:
|
1 |
npx @angular/cli@7.0.6 new Angular-Interceptor |
Bit ćete upitani za nekoliko izbora. Unesite zadane vrijednosti i nastavite:
Zatim idite u direktorij aplikacije i pokrenite naredbu u nastavku za pokretanje aplikacije:
|
1 |
npx ng serve --open |
Zatim otvorite http://localhost:4200 u svom pregledniku kako biste vidjeli aplikaciju. Sada ste konfigurirali osnovnu Angular aplikaciju.
Korak 2: Stiliziranje Angular aplikacije
Ovdje ćemo stilizirati našu Angular aplikaciju koristeći Angular Material. Da biste instalirali Angular Material u svoj projekt, pokrenite naredbu u nastavku:
|
1 |
npm install --save @angular/material@7.0.4 @angular/cdk@7.0.4 @angular/animations@7.0.4 |
Ovo će instalirati @angular/material, @angular/cdk, i @angular/animation u vaš projekt. Zatim ćemo postaviti animaciju u projektu. Dodajte BrowserAnimationsModule u svoju src/app/module.ts datoteku:
|
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 { } |
Koristit ćemo komponentu Dialog iz Angular Materiala. Da bismo koristili komponentu Dialog, moramo uvesti MatDialogModule u src/app/app.module.ts datoteku:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
... import { MatDialogModule } from '@angular/material'; @NgModule({ ... imports: [ ... MatDialogModule ], ... }) export class AppModule { } |
Kako bi korisničko sučelje bilo privlačnije, dodajmo indigo-pink.css u vašu styles.scss datoteku:
|
1 |
@import "~@angular/material/prebuilt-themes/indigo-pink.css"; |
Korak 3: Izrada vašeg Angular presretača
Unutar mape app stvorit ćemo novu mapu pod nazivom interceptor. Unutar te novoizrađene mape stvorite novu httpconfig.interceptor.ts datoteku.
Moramo uvesti neke ovisnosti u našu httpconfig.interceptor.ts kako bi naš presretač radio. Te ovisnosti su HttpInterceptor, HttpRequest, HttpResponse, i HttpHandler, HttpEvent, HttpErrorResponse.
Naša httpconfig.interceptor.ts datoteka izgledat će ovako nakon uvoza:
|
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'; |
Zatim stvorite klasu HttpConfigInterceptor i implementirajte sučelje HttpInterceptor. Ovo je primjer:
|
1 2 3 4 5 6 7 |
@Injectable() export class HttpConfigInterceptor implements HttpInterceptor { intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { // ... } } |
Dodajte kod u nastavku u httpconfig.interceptor.ts datoteku:
|
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; })); } } |
Kako bi ovo radilo, moramo uvesti httpconfig.interceptor.ts u našu app.module.ts datoteku:
|
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 ], ... }) |
Dodajte HttpConfigInterceptor u providers. Postavit ćemo multi: true za rukovanje s više presretača:
|
1 2 3 4 5 6 7 8 9 10 |
... @NgModule({ ... providers: [ ... { provide: HTTP_INTERCEPTORS, useClass: HttpConfigInterceptor, multi: true } ], ... }) ... |
U sljedećem odjeljku izradit ćemo našu uslugu za rukovanje pogreškama.
Korak 4: Usluga za rukovanje pogreškama
Ovdje ćemo pisati kod za rukovanje pogreškama. Morat ćemo uhvatiti pogreške i prikladno ih prikazati krajnjim korisnicima. Ukratko, u nastavku su koraci koje ćemo slijediti:
- Izradite mapu pod nazivom error-dialog u app mapi.
- Izradite uslugu za pogreške pod nazivom errorDialogService u datoteci pod nazivom errordialog.service.ts.
- Dodajte kod u nastavku u 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('Dijalog je 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> Razlog: {{data.reason}} </p> <p> Status: {{data.status}} </p> </div> </div> |
Ukratko, nabrojimo korake u nastavku:
- Započnite s uvozom errordialog.service.
- Zatim ćemo dodati konstruktor za errorDialogService.
- Također ćemo dodati kod za rukovanje odgovorom o pogrešci pomoću catchError i throwError.
- Uvezite errordialog.service i errordialog.component u AppModule.
Nakon što napravimo izmjene, modificirat će se dvije datoteke: app.module.ts i 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); })); } } |
Korak 5: Stvaranje oglednih servisa
U ovom koraku stvorit ćemo dva servisa kao primjer:
- API za prijavu
- API za detalje o korisniku
Stvorite novu mapu pod nazivom services u mapi src . Zatim unutar te novostvorene mape stvorite novu datoteku pod nazivom login.service.ts, i dodajte dvije funkcije:
|
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'); } } |
Korak 6: Pozivanje servisa HTTP klijenta
Konačno, stigli smo do posljednjeg dijela našeg vodiča. Pozvat ćemo naš HTTP servis iz app.component.ts datoteke. Dodajte dvije LoginService funkcije u app.component.ts. Pozovite API za prijavu s onload i customers/details s 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); }); } } |
Sada moramo dodati UI element u app.component.html, kako bi korisnik mogao kliknuti na njega:
|
1 |
<h2 (click)="getCustomerDetails()">Dohvati detalje o kupcu</h2> |
Za kraj, morat ćete uključiti LoginService u providers u AppModule:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
... import { LoginService } from './services/login.service'; ... @NgModule({ ... providers: [ ... LoginService ] ... }) |
U nastavku pronađite snimku zaslona dijaloškog okvira za rukovanje pogreškama:
Zaključak
U ovom smo vodiču naučili kako rukovati HTTP zahtjevima i odgovorima pomoću Angular presretača. Također smo naučili kako rukovati pogreškama pomoću dijaloškog okvira u Angular Materialu.
Angular aplikacije koriste Node.js kao svoje runtime okruženje. Ako želite saznati više o Node.js-u i kako implementirati Node.js aplikacije na Dockeru, pogledajte naš Kako implementirati Node.js (Express.js) aplikaciju s Dockerom na Ubuntu 20.04 vodič. Također možete pogledati Kako obavljati produkcijske zadatke na Ubuntu 20.04 s Node.js-om i Instalacija Node.js-a na CentOS 8: cjeloviti vodič.
Sretno kodiranje!
Komentari
Još nema komentara. Budite prvi.