Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular DIスキ

Avatar for Shinichi Kozake Shinichi Kozake
March 20, 2017
Technology
2
1.4k

Angular DIスキ

ng-kyoto Angular Meetup #5
の発表資料です。

Avatar for Shinichi Kozake

Shinichi Kozake

March 20, 2017
Tweet

More Decks by Shinichi Kozake

See All by Shinichi Kozake
アーキテクトとは
Avatar for Shinichi Kozake kozake
0
2.2k
Ionic React でサービス開発したお話
Avatar for Shinichi Kozake kozake
0
140
ドキッ！失敗だらけのシステム開発
Avatar for Shinichi Kozake kozake
1
830
やはり俺のWeb APIは間違えている
Avatar for Shinichi Kozake kozake
0
540
すごい大規模 たのしく作ろう
Avatar for Shinichi Kozake kozake
4
2.4k
KHipster ~JHipsterで始めるKotlin Web プログラミング~
Avatar for Shinichi Kozake kozake
0
900
Docker with JHipster
Avatar for Shinichi Kozake kozake
1
570
実践JHipster #jsug #sf_36
Avatar for Shinichi Kozake kozake
2
7.7k
Ionicでアプリ作ったよ！開発方法の紹介
Avatar for Shinichi Kozake kozake
2
1k

Other Decks in Technology

See All in Technology
手動からの解放！！Strands Agents で実現する総合テスト自動化
Avatar for 井手亮太 ideaws
3
390
TypeScript 上達の道
Avatar for Kanon ysknsid25
23
4.8k
VLMサービスを用いた請求書データ化検証 / SaaSxML_Session_1
Avatar for Sansan R&D sansan_randd
0
110
Amazon CloudWatchのメトリクスインターバルについて / Metrics interval matters
Avatar for ymotongpoo ymotongpoo
3
280
Kiroから考える AIコーディングツールの潮流
Avatar for Oikon s4yuba
1
330
ビジネス文書に特化した基盤モデル開発 / SaaSxML_Session_2
Avatar for Sansan R&D sansan_randd
0
120
【CEDEC2025】大規模言語モデルを活用したゲーム内会話パートのスクリプト作成支援への取り組み
Avatar for Cygames cygames
PRO
1
320
Expertise as a Service via MCP
Avatar for Yoda Keisuke yodakeisuke
1
160
AI時代の知識創造 ─GeminiとSECIモデルで読み解く “暗黙知”と創造の境界線
Avatar for Yukinaga OISHI nyagasan
0
160
Kiro Hookを Terraformで検証
Avatar for ao-inoue ao_inoue
0
140
CSPヘッダー導入で実現するWebサイトの多層防御：今すぐ試せる設定例と運用知見
Avatar for llamakko llamakko
1
270
ML Pipelineの開発と運用を OpenTelemetryで繋ぐ @ OpenTelemetry Meetup 2025-07
Avatar for Yoshimura Naoya getty708
0
320

Featured

See All Featured
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
11k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
51
8.6k
Docker and Python
Avatar for Tania Allard trallard
45
3.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
34
5.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.8k
Adopting Sorbet at Scale
Avatar for Ufuk Kayserilioglu ufuk
77
9.5k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
35
6.8k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
72
4.9k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.4k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
51
3.3k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
1
510

Transcript

  1. None

  2. #PIWNCT Ⰸⱞש؃׵קʙ猳猳獑

  3. NGULAR %* εΩ

  4. ࣗݾ঺հ 5[UVGO#TEJKVGEV 鰄鰇鰂鰈鱄鯵鰒 0COG 鱻鲑鱔鲍鲂⹻ㅕ䃩鰰 #IG 5[UVGO#TEJKVGEV ,QD ,CXC 5MKNN

    .KMG

  5. "HFOEB 9JCVņU2TQXKFGT! 9JCVņU1RVKQPCN! 9JCVņU+PLGEVCDNG 9JCVņ+PLGEVQT6TGG

  6. 8IBU`T1SPWJEFS 9JCVņU2TQXKFGT! 9JCVņU1RVKQPCN! 9JCVņU+PLGEVCDNG 9JCVņ+PLGEVQT6TGG

  7. 2TQXKFGTKU !$PNQPOFOU \  QSPWJEFST<)FSP4FSWJDF>   ^  FYQPSUDMBTT)FSPFT$PNQPOFOU\^

    !/H.PEVMF \  QSPWJEFST< 6TFS4FSWJDF  \QSPWJEF"11@$0/'*( VTF7BMVF)&30@%*@$0/'*(^ >   ^  FYQPSUDMBTT"QQ.PEVMF\^ TSDBQQBQQNPEVMFUT TSDBQQIFSPFTIFSPFTDPNQPOFOUUT 鰄鰽 鰄鰽

  8. 2TQXKFGTKU +PLGEVQT鯽 *19 9*#6 ͲΜͳτʔΫϯͰ ͲͷΑ͏ʹ +PLGEV鰊鰼鯼鰟崎⹻

  9. 2TQXKFGTKU +PLGEVQT鯽 *19 9*#6 ͲͷΑ͏ʹ RTQXKFG WUG%NCUU WUG8CNWG WUG(CEVQT[ WUG'ZKUKVPI

    OWNVK +PLGEV鰊鰼鯼鰟崎⹻ ͲΜͳτʔΫϯͰ

  10. WUG%NCUU WUG8CNWG WUG(CEVQT[ WUG'ZKUKVPI 2TQXKFGTKU +PLGEVQT鯽 *19 ͲͷΑ͏ʹ OWNVK +PLGEV鰊鰼鯼鰟崎⹻

    9*#6 RTQXKFG ͲΜͳτʔΫϯͰ

  11. DMBTT)FMMP4FSWJDF\ IFMMP)FMMPXPSME ^ !$PNQPOFOU \ TFMFDUPSBQQSPPU  UFNQMBUF6SMBQQDPNQPOFOUIUNM  QSPWJEFST<)FMMP4FSWJDF>

     TUZMF6SMT<BQQDPNQPOFOUDTT> ^  FYQPSUDMBTT"QQ$PNQPOFOU\ DPOTUSVDUPS !*OKFDU )FMMP4FSWJDF QSJWBUFIFMMP)FMMP4FSWJDF \^ UJUMFUIJTIFMMPIFMMP ^ BQQDPNQPOFOUUT 5ZQF サービスをコンポーネントにDIする⼀般的な⽅法が上のコードです。 （コンポーネントにサービスのクラスを書くのはѱ⼿ですが、今回は分かりやすさを優先してここに書いています。） コンポーネントデコレータのprovidersにサービス型を定義し、コンストラクタでそのサービスをインジェクトします。

  12. DMBTT)FMMP4FSWJDF\ IFMMP)FMMPXPSME ^ !$PNQPOFOU \ TFMFDUPSBQQSPPU  UFNQMBUF6SMBQQDPNQPOFOUIUNM  QSPWJEFST<\QSPWJEF)FMMP4FSWJDF

    VTF$MBTT)FMMP4FSWJDF^>  TUZMF6SMT<BQQDPNQPOFOUDTT> ^  FYQPSUDMBTT"QQ$PNQPOFOU\ DPOTUSVDUPS !*OKFDU )FMMP4FSWJDF QSJWBUFIFMMP)FMMP4FSWJDF \^ UJUMFUIJTIFMMPIFMMP ^ BQQDPNQPOFOUUT 5ZQF 先ほどのproviders定義は、上のコード指定と同じです。 providでHelloServiceの型をインジェクショントークンとして指定し、インスタンスはHelloServiceクラスから作成することを 指定しています。 QSPWJEFST<)FMMP4FSWJDF> ⛭鰉秷鯵

  13. DMBTT)FMMP4FSWJDF\ IFMMP)FMMPXPSME ^ !$PNQPOFOU \ TFMFDUPSBQQSPPU  UFNQMBUF6SMBQQDPNQPOFOUIUNM  QSPWJEFST<\QSPWJEF)FMMP4FSWJDF

    VTF$MBTT)FMMP4FSWJDF^>  TUZMF6SMT<BQQDPNQPOFOUDTT> ^  FYQPSUDMBTT"QQ$PNQPOFOU\ DPOTUSVDUPS !*OKFDU )FMMP4FSWJDF QSJWBUFIFMMP)FMMP4FSWJDF \^ UJUMFUIJTIFMMPIFMMP ^ 5ZQF インジェクショントークンとインジェクトする引਺の型が同じ場合、Injectデコレータによるトークン指定を省略することがで きます。 䧢䡆⛐聚

  14. DMBTT)FMMP4FSWJDF\ IFMMP)FMMPXPSME ^ !$PNQPOFOU \ TFMFDUPSBQQSPPU  UFNQMBUF6SMBQQDPNQPOFOUIUNM  QSPWJEFST<\QSPWJEF)FMMP4FSWJDF

    VTF$MBTT)FMMP4FSWJDF^>  TUZMF6SMT<BQQDPNQPOFOUDTT> ^  FYQPSUDMBTT"QQ$PNQPOFOU\ DPOTUSVDUPS !*OKFDU )FMMP4FSWJDF QSJWBUFIFMMP)FMMP4FSWJDF \^ UJUMFUIJTIFMMPIFMMP ^ BOZ providには型以外も指定できます。 例えば、’HelloService’という⽂字列を指定することも出དྷます。 㡨⸸⓸鰘稊⹻

  15. DMBTT)FMMP4FSWJDF\IFMMP)FMMPXPSME^ DMBTT%*TVLJ4FSWJDF\IFMMP%*TVLJXPSME^ !$PNQPOFOU \ TFMFDUPSBQQSPPU  UFNQMBUF6SMBQQDPNQPOFOUIUNM  QSPWJEFST<\QSPWJEF)FMMP4FSWJDF VTF$MBTT)FMMP4FSWJDF^

     \QSPWJEF)FMMP4FSWJDF VTF$MBTT%*TVLJ4FSWJDF^>  TUZMF6SMT<BQQDPNQPOFOUDTT> ^  FYQPSUDMBTT"QQ$PNQPOFOU\ DPOTUSVDUPS !*OKFDU )FMMP4FSWJDF QSJWBUFIFMMP)FMMP4FSWJDF  !*OKFDU )FMMP4FSWJDF QSJWBUFIFMMP%*TVLJ4FSWJDF \^ UJUMFA\UIJTIFMMPIFMMP^\UIJTIFMMPIFMMP^A ^ BOZ ただ、⽂字列でインジェクショントークンを指定した場合、同じ⽂字列で別の定義があると、定義が上書きされてしまいます。 複਺プロバイダによるインジェクショントークンの衝突が⼼配です。 上のコードでは、helloม਺にはHelloServiceではなく、DIsukiServiceのインスタンスがインジェクトされてしまいました。 鰚鰒鰺鰳&+UWMK猳

  16. DMBTT)FMMP4FSWJDF\IFMMP)FMMPXPSME^ DMBTT%*TVLJ4FSWJDF\IFMMP%*TVLJXPSME^ DPOTU)FMMP5PLFOOFX0QBRVF5PLFO )FMMP4FSWJDF  DPOTU)FMMP5PLFOOFX0QBRVF5PLFO )FMMP4FSWJDF  !$PNQPOFOU \

    TFMFDUPSBQQSPPU  UFNQMBUF6SMBQQDPNQPOFOUIUNM  QSPWJEFST<\QSPWJEF)FMMP5PLFO VTF$MBTT)FMMP4FSWJDF^  \QSPWJEF)FMMP5PLFO VTF$MBTT%*TVLJ4FSWJDF^>  TUZMF6SMT<BQQDPNQPOFOUDTT> ^  FYQPSUDMBTT"QQ$PNQPOFOU\ DPOTUSVDUPS !*OKFDU )FMMP5PLFO QSJWBUFIFMMP)FMMP4FSWJDF  !*OKFDU )FMMP5PLFO QSJWBUFIFMMP%*TVLJ4FSWJDF \^ UJUMFA\UIJTIFMMPIFMMP^\UIJTIFMMPIFMMP^\)FMMP5PLFO)FMMP5PLFO^A ^ 0QBRVF5PLFO そのような衝突をさけるҝに、⽂字列のトークンではなくOpaqueTokenを⽤います。 OpaqueTokenは同じ⽂字列でも違うものとして認識されます。 *GNNQ6QMGP*GNNQ6QMGP

  17. RTQXKFG ͲΜͳτʔΫϯͰ 9*#6 2TQXKFGTKU +PLGEVQT鯽 +PLGEV鰊鰼鯼鰟崎⹻ *19 OWNVK WUG%NCUU WUG8CNWG

    WUG(CEVQT[ WUG'ZKUKVPI ͲͷΑ͏ʹ

  18. DMBTT)FMMP4FSWJDF\ IFMMP)FMMPXPSME ^ !$PNQPOFOU \ TFMFDUPSBQQSPPU  UFNQMBUF6SMBQQDPNQPOFOUIUNM  QSPWJEFST<\QSPWJEF)FMMP4FSWJDF

    VTF$MBTT)FMMP4FSWJDF^>  TUZMF6SMT<BQQDPNQPOFOUDTT> ^  FYQPSUDMBTT"QQ$PNQPOFOU\ DPOTUSVDUPS QSJWBUFIFMMP)FMMP4FSWJDF \^ UJUMFUIJTIFMMPIFMMP ^ VTF$MBTT useClassは値としてクラスを受け取り、Injectのたびにそのクラスのインスタンスを作ります。 Injectのたびにຖ回newです。

  19. DMBTT)FMMP4FSWJDF\IFMMP)FMMPXPSME^ DMBTT%*TVLJ4FSWJDF\IFMMP%*TVLJXPSME^ !$PNQPOFOU \ TFMFDUPSBQQSPPU  UFNQMBUF6SMBQQDPNQPOFOUIUNM  QSPWJEFST<\QSPWJEF)FMMP4FSWJDF VTF$MBTT%*TVLJ4FSWJDF^>

     TUZMF6SMT<BQQDPNQPOFOUDTT> ^  FYQPSUDMBTT"QQ$PNQPOFOU\ DPOTUSVDUPS QSJWBUFIFMMP)FMMP4FSWJDF \^ UJUMFUIJTIFMMPIFMMP ^ VTF$MBTT ちなみに、provideで指定したインジェクショントークンと異なる型のクラスを指定することも出དྷます。 ただし、不必要に混ཚを招くため、このような使⽤⽅法は避けたほうがいいでしょう。 䡑鰛鰼⩬猳猳獑

  20. DMBTT)FMMP4FSWJDF\IFMMP)FMMPXPSME^ DMBTT%*TVLJ4FSWJDFFYUFOET)FMMP4FSWJDF\IFMMP%*TVLJXPSME^ !$PNQPOFOU \ TFMFDUPSBQQSPPU  UFNQMBUF6SMBQQDPNQPOFOUIUNM  QSPWJEFST<\QSPWJEF)FMMP4FSWJDF VTF$MBTT%*TVLJ4FSWJDF^>

     TUZMF6SMT<BQQDPNQPOFOUDTT> ^  FYQPSUDMBTT"QQ$PNQPOFOU\ DPOTUSVDUPS QSJWBUFIFMMP)FMMP4FSWJDF \^ UJUMFUIJTIFMMPIFMMP ^ VTF$MBTT インジェクショントークンの型をܧ承したクラスをuseClassに指定するなどの使⽤⽅法は、型として互換があるので問題ないと 思います。 ⩬鰙鰈鰗ⅳ稰鯽鯳鰼

  21. DMBTT)FMMP4FSWJDF\ DPOTUSVDUPS QSJWBUFOBNFTUSJOH \^ IFMMPA)FMMP\UIJTOBNF^A ^ MFUIFMMP"OHVMBSOFX)FMMP4FSWJDF "OHVMBS  !$PNQPOFOU

    \ TFMFDUPSBQQSPPU  UFNQMBUF6SMBQQDPNQPOFOUIUNM  QSPWJEFST<\QSPWJEF)FMMP4FSWJDF VTF7BMVFIFMMP"OHVMBS^>  TUZMF6SMT<BQQDPNQPOFOUDTT> ^  FYQPSUDMBTT"QQ$PNQPOFOU\ DPOTUSVDUPS QSJWBUFIFMMP)FMMP4FSWJDF \^ UJUMFUIJTIFMMPIFMMP ^ VTF7BMVF useValueは値としてオブジェクトを受け取り、Injectされるたびにそのࢀ照を渡します。 定਺のように使えますが、ࢀ照が渡ってくるのでDIされたオブジェクトをม更すると、別の箇所に影響しますので注意が必要で す。 餿䑈鱃䄂鰊

  22. DMBTT)FMMP4FSWJDF\ DPOTUSVDUPS QSJWBUFOBNFTUSJOH \^ IFMMPA)FMMP\UIJTOBNF^A ^ !$PNQPOFOU \ TFMFDUPSBQQSPPU 

    UFNQMBUF6SMBQQDPNQPOFOUIUNM  QSPWJEFST<\QSPWJEF)FMMP4FSWJDF  VTF'BDUPSZ OFX)FMMP4FSWJDF "OHVMBS ^>  TUZMF6SMT<BQQDPNQPOFOUDTT> ^  FYQPSUDMBTT"QQ$PNQPOFOU\ DPOTUSVDUPS QSJWBUFIFMMP)FMMP4FSWJDF \^ UJUMFUIJTIFMMPIFMMP ^ VTF'BDUPSZ useFactoryの値にはؔ਺を渡します。Injectされるたびにؔ਺が࣮⾏され、その໭り値が注⼊されます。 環境によって異なるインスタンスを⽣成したい場合などに、useFactoryを使⽤します。

  23. DMBTT)FMMP4FSWJDF\ DPOTUSVDUPS QSJWBUFOBNFTUSJOH \^ IFMMPA)FMMP\UIJTOBNF^A ^ !$PNQPOFOU \ TFMFDUPSBQQSPPU 

    UFNQMBUF6SMBQQDPNQPOFOUIUNM  QSPWJEFST<\QSPWJEF)FMMP4FSWJDF  VTF'BDUPSZ OFX)FMMP4FSWJDF "OHVMBS ^>  TUZMF6SMT<BQQDPNQPOFOUDTT> ^  FYQPSUDMBTT"QQ$PNQPOFOU\ DPOTUSVDUPS QSJWBUFIFMMP)FMMP4FSWJDF \^ UJUMFUIJTIFMMPIFMMP ^ VTF'BDUPSZ @armorik83 さんから勉ڧձでご指摘頂きました。ありがとうございます！ exportしていないクラスやアローؔ਺式のFactoryはAoTコンパイルでエラーとなります。 ؾをつけましょう！ FYQPSUDMBTT)FMMP4FSWJDF\ DPOTUSVDUPS QSJWBUFOBNFTUSJOH \^ IFMMPA)FMMP\UIJTOBNF^A ^ FYQPSUGVODUJPO)FMMP4FSWJDF'BDUPSZ \ SFUVSOOFX)FMMP4FSWJDF "OHVMBS  ^ !$PNQPOFOU \ TFMFDUPSBQQSPPU  UFNQMBUF6SMBQQDPNQPOFOUIUNM  QSPWJEFST<\QSPWJEF)FMMP4FSWJDF  VTF'BDUPSZ)FMMP4FSWJDF'BDUPSZ^>  TUZMF6SMT<BQQDPNQPOFOUDTT> ^  GZRQTV鰈鰗鯵鰛鯵鱓鲍鱝鰠#Q6鱗鲗鱵鱈鲏鰘鱌鲍鯮 鱆鲑鯮鏈窚ㇰ鰳#Q6鱗鲗鱵鱈鲏鰘鱌鲍鯮 鰄鰟鰹鯷鰜㧙鰀鰙 鱗鲗鱵鱈鲏蒌鰼

  24. DMBTT)FMMP4FSWJDF\ DPOTUSVDUPS QSJWBUFOBNFTUSJOH \^ IFMMPA)FMMP\UIJTOBNF^A ^ DPOTU)FMMP/BNFOFX0QBRVF5PLFO OBNF  !$PNQPOFOU

    \ TFMFDUPSBQQSPPU  UFNQMBUF6SMBQQDPNQPOFOUIUNM  QSPWJEFST<\QSPWJEF)FMMP/BNF VTF7BMVFOHLZPUP^  \QSPWJEF)FMMP4FSWJDF  VTF'BDUPSZ OBNFTUSJOH OFX)FMMP4FSWJDF OBNF   EFQT<)FMMP/BNF>^>  TUZMF6SMT<BQQDPNQPOFOUDTT> ^  FYQPSUDMBTT"QQ$PNQPOFOU\ DPOTUSVDUPS QSJWBUFIFMMP)FMMP4FSWJDF \^ UJUMFUIJTIFMMPIFMMP ^ VTF'BDUPSZ useFactoryを⽤いる場合、depsでインジェクショントークンを指定することが出དྷます。 depsでインジェクショントークンを指定すると、useFactoryのؔ਺にインジェクトした引਺を渡すことが出དྷます。

  25. DMBTT)FMMP4FSWJDF\ DPOTUSVDUPS QSJWBUFOBNFTUSJOH \^ IFMMPA)FMMP\UIJTOBNF^A ^ !$PNQPOFOU \ TFMFDUPSBQQSPPU 

    UFNQMBUF6SMBQQDPNQPOFOUIUNM  QSPWJEFST<\QSPWJEF)FMMP4FSWJDF  VTF'BDUPSZ OFX)FMMP4FSWJDF "OHVMBS ^  \QSPWJEF)FMMP"OHVMBS  VTF&YJTUJOH)FMMP4FSWJDF^>  TUZMF6SMT<BQQDPNQPOFOUDTT> ^  FYQPSUDMBTT"QQ$PNQPOFOU\ DPOTUSVDUPS !*OKFDU )FMMP"OHVMBS QSJWBUFIFMMP)FMMP4FSWJDF \^ UJUMFUIJTIFMMPIFMMP ^ VTF&YJTUJOH useExistingは値としてインジェクショントークンをとり、それにରするエイリアスを作ります。 つまり異なるインジェクショントークンで同じインスタンスが得られるようになります。 useClassとはਅ逆で、⼀切newしません。 上のコード例の場合、’HelloAngular’の⽂字列トークンでもHelloServiceのインスタンスを得ることが出དྷています。 ┆痓鱃∽㓱

  26. DMBTT)FMMP4FSWJDF\IFMMP)FMMPXPSME^ DMBTT%*TVLJ4FSWJDF\IFMMP%*TVLJXPSME^ !$PNQPOFOU \ TFMFDUPSBQQSPPU  UFNQMBUF6SMBQQDPNQPOFOUIUNM  QSPWJEFST<\QSPWJEF)FMMP4FSWJDF VTF$MBTT)FMMP4FSWJDF

    NVMUJUSVF^  \QSPWJEF)FMMP4FSWJDF VTF$MBTT%*TVLJ4FSWJDF NVMUJUSVF^>  TUZMF6SMT<BQQDPNQPOFOUDTT> ^  FYQPSUDMBTT"QQ$PNQPOFOU\ DPOTUSVDUPS !*OKFDU )FMMP4FSWJDF QSJWBUFIFMMP\IFMMPTUSJOH^<> \^ UJUMFA\UIJTIFMMP NBQ PPIFMMP SFEVDF N N N  N ^A ^ NVMUJ 通常は同じインジェクショントークンにରして複਺Providerを宣⾔すると、最後に宣⾔されたものに上書きされますが、multiを trueに指定すると、インジェクショントークンにରして複਺のProviderを提供することが出དྷます。 この場合、インジェクトされるม਺の型は配列にします。 苭窚鰛鰟鰘蔥⓸

  27. 8IBU`T0QUJPOBM 9JCVņU2TQXKFGT! 9JCVņU+PLGEVCDNG 9JCVņ+PLGEVQT6TGG 9JCVņU1RVKQPCN!

  28. DMBTT)FMMP4FSWJDF\ IFMMP)FMMPXPSME ^ !$PNQPOFOU \ TFMFDUPSBQQSPPU  UFNQMBUF6SMBQQDPNQPOFOUIUNM  QSPWJEFST<\QSPWJEF)FMMP4FSWJDF

    VTF$MBTT)FMMP4FSWJDF^>  TUZMF6SMT<BQQDPNQPOFOUDTT> ^  FYQPSUDMBTT"QQ$PNQPOFOU\ DPOTUSVDUPS  !*OKFDU "OHVMBS4FSWJDF QSJWBUFIFMMP)FMMP4FSWJDF \^ UJUMFUIJTIFMMPOVMM UIJTIFMMPIFMMPOVMM ^ 0QUJPOBM 依存性解決出དྷなかった場合、DIエラーとなってしまいます。 上のコードの場合、’AngularService’という⽂字列のインジェクショントークンで依存性が解決出དྷなかったので、エラーがൃ ⽣します。 㨋⹻劊鰟鱬鯮鱓鲗

  29. DMBTT)FMMP4FSWJDF\ IFMMP)FMMPXPSME ^ !$PNQPOFOU \ TFMFDUPSBQQSPPU  UFNQMBUF6SMBQQDPNQPOFOUIUNM  QSPWJEFST<\QSPWJEF)FMMP4FSWJDF

    VTF$MBTT)FMMP4FSWJDF^>  TUZMF6SMT<BQQDPNQPOFOUDTT> ^  FYQPSUDMBTT"QQ$PNQPOFOU\ DPOTUSVDUPS  !0QUJPOBM !*OKFDU "OHVMBS4FSWJDF QSJWBUFIFMMP)FMMP4FSWJDF \^ UJUMFUIJTIFMMPOVMM UIJTIFMMPIFMMPOVMM ^ 0QUJPOBM 依存性解決出དྷなかった場合にもエラーにしたくない場合は、Optionalデコレータで指定します。 こうすることで、依存性解決出དྷなかったม਺の値がnullとなるだけで、エラーはൃ⽣しません。 VJKUJGNNQ鰟甧鰠PWNN

  30. 8IBU`T0QUJPOBM 9JCVņU2TQXKFGT! 9JCVņ+PLGEVQT6TGG 9JCVņU+PLGEVCDNG 9JCVņU1RVKQPCN!

  31. DMBTT8IP\OBNF"OHVMBS^ DMBTT)FMMP4FSWJDF\ DPOTUSVDUPS QSJWBUFXIP8IP \^ IFMMPA)FMMP\UIJTXIPOBNF^A ^ !$PNQPOFOU \ TFMFDUPSBQQSPPU

     UFNQMBUF6SMBQQDPNQPOFOUIUNM  QSPWJEFST<8IP )FMMP4FSWJDF>  TUZMF6SMT<BQQDPNQPOFOUDTT> ^  FYQPSUDMBTT"QQ$PNQPOFOU\ DPOTUSVDUPS QSJWBUFIFMMP)FMMP4FSWJDF \^ UJUMFUIJTIFMMPIFMMP ^ *OKFDUBCMF サービスもDIにより依存性を解決出དྷますが、上のコードはエラーとなります。 理由としては、Injectorで依存性解決可能なクラスとして認識されていないからです。 鱵鲍鲅鯮鱣鱃茭㽛鰘鯾鰛鯵猳

  32. !*OKFDUBCMF  DMBTT8IP\OBNF"OHVMBS^ !*OKFDUBCMF  DMBTT)FMMP4FSWJDF\ DPOTUSVDUPS QSJWBUFXIP8IP \^ IFMMPA)FMMP\UIJTXIPOBNF^A

    ^ !$PNQPOFOU \ TFMFDUPSBQQSPPU  UFNQMBUF6SMBQQDPNQPOFOUIUNM  QSPWJEFST<8IP )FMMP4FSWJDF>  TUZMF6SMT<BQQDPNQPOFOUDTT> ^  FYQPSUDMBTT"QQ$PNQPOFOU\ DPOTUSVDUPS QSJWBUFIFMMP)FMMP4FSWJDF \^ UJUMFUIJTIFMMPIFMMP ^ *OKFDUBCMF サービスも依存性解決ର象にしたい場合は、Injectableデコレータを指定します。 Angularでは、すべてのサービスにInjectableデコレータを指定するスタイルが推঑されています。 なお、ComponentでInjectableが必要なかった理由は、ComponentやDirective、Pipeは、Injactableのサブタイプだからで す。

  33. 8IBU`T0QUJPOBM 9JCVņU2TQXKFGT! 9JCVņU1RVKQPCN! 9JCVņU+PLGEVCDNG 9JCVņ+PLGEVQT6TGG

  34. *OKFDUPS5SFF ∼Rangle's Angular Training Book [The Injector Tree] よりൈਮ∼ AngularのInjectorはコンポーネントツリーとฒ⾏してツ

    リーを形成します。 Injectorはすべてのコンポーネントຖに作成されるわけでは なく、デコレータでprovidersが指定されたコンポーネント ຖに作成され、Injector Treeを形成します。 コンポーネントは⾃分⾃⾝、もしくは⾃分の親のコンポーネ ントのInjectorをたどることで、依存性解決を解決します。 Injectorຖにインスタンスはシングルトンなので、その⼦コ ンポーネントは親と同じインスタンスをࢀ照します。

  35. ·ͱΊ 9JCVņU2TQXKFGT! 9JCVņU1RVKQPCN! 9JCVņU+PLGEVCDNG 9JCVņ+PLGEVQT6TGG ͍ΖΜͳϑϨϯζ͕͍ΔΑʂΘʙ͍ʂͨͷ͠ʙ͍ʂʂ (((ο( ƅ˜ƅ*)ο)))

  36. 5IBOLZPVBMM GPSMJTUFOJOH (((ο( ƅ˜ƅ*)ο)))