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
110
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
470
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
340
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
120
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
170
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
320
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
210
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
100
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
190
Other Decks in Programming
See All in Programming
それ CLI フレームワークがなくてもできるよ / Building CLI Tools Without Frameworks
orgachem
PRO
11
3k
AI Ramen Fight
yusukebe
0
120
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
2
730
[Codecon - 2025] Como não odiar seus testes
camilacampos
0
100
プロダクトという一杯を作る - プロダクトチームが味の責任を持つまでの煮込み奮闘記
hiliteeternal
0
290
副作用と戦う PHP リファクタリング ─ ドメインイベントでビジネスロジックを解きほぐす
kajitack
3
480
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
170
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
34
10k
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
220
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
240
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
2
220
Reactの歴史を振り返る
tutinoko
1
150
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Making Projects Easy
brettharned
117
6.3k
The Language of Interfaces
destraynor
158
25k
Raft: Consensus for Rubyists
vanstee
140
7k
The Cult of Friendly URLs
andyhume
79
6.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
760
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
720
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
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