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
930
Becoming a GDE
jecfish
0
3.8k
How to get started in IT Freelancing
jecfish
1
270
New Web API & Stylings
jecfish
3
690
如何打造高性能且SEO友好的单页应用(SPA)
jecfish
2
840
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
知って得する@cloudflare_vite-pluginのあれこれ
chimame
1
120
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
24
10k
Google I/O Extended Incheon 2025 ~ What's new in Android development tools
pluu
1
180
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
ktr_0731
3
200
slogパッケージの深掘り
integral0515
0
150
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
7.5k
MySQL9でベクトルカラム登場!PHP×AWSでのAI/類似検索はこう変わる
suguruooki
1
230
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
810
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
330
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
17
6.1k
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
170
Googleの新しいコーディングAIエージェントJulesを使ってみた
tonionagauzzi
0
130
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Statistics for Hackers
jakevdp
799
220k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
The Invisible Side of Design
smashingmag
301
51k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
BBQ
matthewcrist
89
9.7k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
4 Signs Your Business is Dying
shpigford
184
22k
A designer walks into a library…
pauljervisheath
207
24k
Mobile First: as difficult as doing things right
swwweet
223
9.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 + +