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
940
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
98
Other Decks in Programming
See All in Programming
Reduxモダナイズ 〜コードのモダン化を通して、将来のライブラリ移行に備える〜
pvcresin
2
670
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
natmark
0
510
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
2.9k
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
890
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
470
Build your own WebP codec in Swift
kishikawakatsumi
2
900
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
2
130
WebエンジニアがSwiftをブラウザで動かすプレイグラウンドを作ってみた
ohmori_yusuke
0
170
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
2
150
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
2.9k
XP, Testing and ninja testing ZOZ5
m_seki
2
270
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
koxya
1
1k
Featured
See All Featured
Fireside Chat
paigeccino
40
3.7k
RailsConf 2023
tenderlove
30
1.2k
Facilitating Awesome Meetings
lara
56
6.6k
A better future with KSS
kneath
239
17k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
For a Future-Friendly Web
brad_frost
180
9.9k
How STYLIGHT went responsive
nonsquared
100
5.8k
Producing Creativity
orderedlist
PRO
347
40k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
890
Typedesign – Prime Four
hannesfritz
42
2.8k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
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 + +