Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
A close look to Angular's new HttpClient
Search
Manfred Steyer
PRO
December 09, 2017
Programming
1
430
A close look to Angular's new HttpClient
Presentation from ng-be in December 2017.
Manfred Steyer
PRO
December 09, 2017
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
340
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
620
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
500
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
160
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
230
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
360
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
240
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
130
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
230
Other Decks in Programming
See All in Programming
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
240
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.3k
複雑なドメインに挑む.pdf
yukisakai1225
5
1.2k
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
1.8k
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
460
Navigating Dependency Injection with Metro
zacsweers
3
1k
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
110
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
390
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
440
Design Foundational Data Engineering Observability
sucitw
3
200
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
696
190k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
530
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Designing for Performance
lara
610
69k
Producing Creativity
orderedlist
PRO
347
40k
Become a Pro
speakerdeck
PRO
29
5.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Docker and Python
trallard
46
3.6k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
Transcript
A close look to Angular's new HttpClient Manfred Steyer SOFTWAREarchitekt.at
About me … • Manfred Steyer • Angular Workshops and
Consultancy • SOFTWAREarchitekt.at • Google Developer Expert (GDE) Page ▪ 2 Manfred Steyer
In the old days, everything was better ;-)
Just a few examples …
Http in Angular Http (Service) • Angular 2+ • Most
Common Use Cases (80:20 principle) • Experimental • Deprecated with 5.0 HttpClient • Angular 4.3 • A lot of additional features • Full comfort we know from $http
Contents • Short overview of Basics • Custom Data Formats
(Binary, Text) • Progress Information • Interceptors for Extensions • Token-based Security
DEMO
angular-crud
None
Basics
HttpClient HttpClientModule and HttpClient from @angular/common/http let url = 'http://www.angular.at/api/hotel';
let headers = new HttpHeaders() .set('Accept', 'application/json'); let params = new HttpParams() .set('city', this.city); this .http .get<Hotel[]>(url, { headers, params }) .subscribe( hotels => console.debug('hotels', hotels), err => console.error('err', err) );
Getting the full HttpResponse save(entity: HotelBooking): Observable<string> { let url
= […] let headers = […] return this.http .post<HotelBooking>(url, entity, {headers, observe: 'response'}) […] }
Getting the full HttpResponse save(entity: HotelBooking): Observable<string> { let url
= […] let headers = […] return this.http .post<HotelBooking>(url, entity, {headers, observe: 'response'}) .pipe( map((response: HttpResponse<HotelBooking>) => { console.debug('status', response.status); console.debug('body', response.body); return response.headers.get('Location'); })); }
Testing
Main Idea: Mock the HttpBackend HttpClientTestingModule Your Code Test HttpClient
HttpBackend Server MockBackend
Testing it('can load hotels by city', () => { let
service: HotelService = TestBed.get(HotelService); let ctrl: HttpTestingController = TestBed.get(HttpTestingController); […] });
Testing it('can load hotels by city', () => { let
service: HotelService = TestBed.get(HotelService); let ctrl: HttpTestingController = TestBed.get(HttpTestingController); service.find({ city: 'Graz' }).subscribe( hotels => expect(hotels.length).toBe(2), err => fail(err) ); […] });
Testing it('can load hotels by city', () => { let
service: HotelService = TestBed.get(HotelService); let ctrl: HttpTestingController = TestBed.get(HttpTestingController); service.find({ city: 'Graz' }).subscribe( hotels => expect(hotels.length).toBe(2), err => fail(err) ); let req = ctrl.expectOne('/hotel?city=Graz'); expect(req.request.method).toBe('GET'); […] });
Testing it('can load hotels by city', () => { let
service: HotelService = TestBed.get(HotelService); let ctrl: HttpTestingController = TestBed.get(HttpTestingController); service.find({ city: 'Graz' }).subscribe( hotels => expect(hotels.length).toBe(2), err => fail(err) ); let req = ctrl.expectOne('/hotel?city=Graz'); expect(req.request.method).toBe('GET'); req.flush([{id: 1, name: 'Hotel Mama'}, {id: 2, name: 'Budget Hotel'}]); ctrl.verify(); });
Custom Data Formats (Text and Binary)
Using XML findById(id: string): Observable<HotelBooking> { […] return this.http .get(url,
{ headers, params, responseType: 'text'}) […] }
Using XML findById(id: string): Observable<HotelBooking> { […] return this.http .get(url,
{ headers, params, responseType: 'text'}) .pipe( switchMap(xmlString => { let observableFactory = bindCallback(parseString); return observableFactory(xmlString, parserOptions); }), map(js => js[1].hotelBooking) ); } import { parseString } from 'xml2js';
DEMO
Interceptors
Idea • Providing a hook • Modify requests and responses
globally • Including Headers, e. g. for Auth. • Parsing Data Formats, like XML • Error Handling • Caching • …
Chain of Responsibility Logic (HttpRequest) Interceptor Interceptor Request Response
DEMO Sending Access Token for Auth Global Error Handler for
Auth
Conclusion observe: response, events, … responseType: text, blob, … Interceptor
Chain The Dark Knight: Best Movie ever!
Contact und Downloads [mail]
[email protected]
[blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer