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
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.7k
My Journey as Technical Presenter
jecfish
0
930
Becoming a GDE
jecfish
0
3.7k
How to get started in IT Freelancing
jecfish
1
270
New Web API & Stylings
jecfish
3
680
如何打造高性能且SEO友好的单页应用(SPA)
jecfish
2
830
JS SEO
jecfish
4
1.5k
Web Performance Optimization
jecfish
5
1.7k
Have Fun with Angular
jecfish
0
95
Other Decks in Programming
See All in Programming
VS Code Update for GitHub Copilot
74th
1
470
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
240
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
140
GoのGenericsによるslice操作との付き合い方
syumai
3
690
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
230
5つのアンチパターンから学ぶLT設計
narihara
1
120
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.6k
XP, Testing and ninja testing
m_seki
3
210
Java on Azure で LangGraph!
kohei3110
0
170
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
290
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.4k
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
110
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
For a Future-Friendly Web
brad_frost
179
9.8k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Code Review Best Practice
trishagee
68
18k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
4 Signs Your Business is Dying
shpigford
184
22k
Rails Girls Zürich Keynote
gr2m
94
14k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Side Projects
sachag
455
42k
KATA
mclloyd
30
14k
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 + +