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
Angular DI Processor Pattern
Search
Jecelyn Yeen
September 27, 2018
Programming
0
1.1k
Angular DI Processor Pattern
Implement Processor Pattern with Angular Dependency Injection
Jecelyn Yeen
September 27, 2018
Tweet
Share
More Decks by Jecelyn Yeen
See All by Jecelyn Yeen
WorkerConf 2021 - Browser automation with Puppeteer
jecfish
0
1.8k
My Journey as Technical Presenter
jecfish
0
950
Becoming a GDE
jecfish
0
3.8k
How to get started in IT Freelancing
jecfish
1
270
New Web API & Stylings
jecfish
3
700
如何打造高性能且SEO友好的单页应用(SPA)
jecfish
2
850
JS SEO
jecfish
4
1.5k
Web Performance Optimization
jecfish
5
1.8k
Have Fun with Angular
jecfish
0
100
Other Decks in Programming
See All in Programming
CSC305 Lecture 08
javiergs
PRO
0
220
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
250
Devvox Belgium - Agentic AI Patterns
kdubois
1
120
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
9
1.7k
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
260
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
33k
Cursorハンズオン実践!
eltociear
2
1.1k
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
200
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
11
6.8k
CSC509 Lecture 06
javiergs
PRO
0
260
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
410
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
200
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Building Adaptive Systems
keathley
44
2.8k
How to train your dragon (web standard)
notwaldorf
97
6.3k
Unsuck your backbone
ammeep
671
58k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Music & Morning Musume
bryan
46
6.8k
Site-Speed That Sticks
csswizardry
13
910
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Become a Pro
speakerdeck
PRO
29
5.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Transcript
Angular | Dependency Injection | Processor Pattern + +
@JecelynYeen From Kuala Lumpur, Malaysia • GDE - Web technologies,
Angular • Software Architect @ Randstad Organizer:
• Dependency Injection (DI) • DI in Angular • Processor
Pattern • DI + Processor Pattern in Angular + +
Dependency Injection . What & Why?
Weapon is made of material (wood). Ninja needs a weapon
(nunchakus). We have a ninja.
- Single Responsibility - Tightly coupled - Hard to unit
test
Dependency Injection
Hookup implementation during bootstrap inject in constructor no need to
instantiate
Replace implementation under the hood
Dependency Injection • Unit testable • Reusability • Loosely coupled
• Dependency Inversion principle
DI in Angular
service service hook up
• UseClass • UseValue • UseFactory • UseExisting + https://offering.solutions/blog/articles/2018/08/17/using-useclass-usefactory-usevalue-
useexisting-with-treeshakable-providers-in-angular/ https://blog.thoughtram.io/angular/2015/05/18/dependency-injection-in-angular-2.html
Dependency Injection is static
Dependency Injection is static hook up only once
what if our ninja need to switch weapon dynamically https://di-processor.firebaseapp.com/ninja-di
what if our ninja need to switch weapon dynamically https://di-processor.firebaseapp.com/ninja-di
nunchakus, dart, stick, sword
Processor Pattern using injection token & multi-provider
weapon interface name, draw(), animate() Inject into NinjaComponent as weapon[
] injection token processors multi-providers
Injection Token + Processor Interface
Processor implement the interface
Multiple providers with same token one token multiple implementations set
as multi
Inject multiple providers Injection 4 processors get one processor Invoke
processor functions
Production Use Case: Chart Processors
- chart type - title / menu - processing logic
- labels & tooltips Differences - they are all charts - same interface:- - processData() - name, title, etc Similar https://di-processor.firebaseapp.com
YYYY-MM what users want to see YYYY-MM-DD what backend returns
Frontend developer
what your chart library wants what you need to do
• transform data (loop & group it by year month) • sort it • generate chart configuration
What you actually do - Chart Processor https://github.com/chybie/di-processor/blob/master/src/app/chart-di/services/chart-new-starter-processor.service.ts private
Injection Token + Processor Interface
Multiple providers with same token
Dashboard Component
Other useful scenario • Data table processors • Search processors
https://stackoverflow.com/questions/48382323/angular-lookup-all- providers-implementing-a-specific-interface/ 48383858#comment83773434_48383858
Benefits • Abstraction • Plugins
slides: https://speakerdeck.com/chybie/angular-di-processor-pattern demo: https://di-processor.firebaseapp.com code: https://github.com/chybie/di-processor code (inject by service):
https://stackblitz.com/edit/ninja-weapon- processors?file=src%2Fapp%2Fninja%2Fninja.component.ts twitter: @JecelynYeen + +