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

Angular DIスキ

87e94dd0e8a5f52de58a0e4a0b1a1f3f?s=47 Shinichi Kozake
March 20, 2017
Technology
2
1k

Angular DIスキ

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

87e94dd0e8a5f52de58a0e4a0b1a1f3f?s=128

Shinichi Kozake

March 20, 2017
Tweet

More Decks by Shinichi Kozake

See All by Shinichi Kozake
87e94dd0e8a5f52de58a0e4a0b1a1f3f?s=48 kozake
0
42
87e94dd0e8a5f52de58a0e4a0b1a1f3f?s=48 kozake
1
340
87e94dd0e8a5f52de58a0e4a0b1a1f3f?s=48 kozake
0
280
87e94dd0e8a5f52de58a0e4a0b1a1f3f?s=48 kozake
4
1.5k
87e94dd0e8a5f52de58a0e4a0b1a1f3f?s=48 kozake
0
550
87e94dd0e8a5f52de58a0e4a0b1a1f3f?s=48 kozake
1
320
87e94dd0e8a5f52de58a0e4a0b1a1f3f?s=48 kozake
2
5.7k
87e94dd0e8a5f52de58a0e4a0b1a1f3f?s=48 kozake
2
730
87e94dd0e8a5f52de58a0e4a0b1a1f3f?s=48 kozake
0
990

Other Decks in Technology

See All in Technology
E10d51de51c08e913216385be87dc1ca?s=48 pongzu
1
270
E53046bb9794560f541fcf2cf0b9d526?s=48 sayokomiura
0
550
D8e79ab09f15e69d600c00131bf7d2a9?s=48 yfutamura
0
400
A4d5b3aae2e67f31b513c88c726514c2?s=48 smzksts
0
250
0deae06ab5d86b39feeec2e23a30b88a?s=48 yoku0825
PRO
0
160
2cf373725ded741824c50fd571eda6e1?s=48 udzura
1
300
3e8f61263f14a620f21d5f3f89c4b846?s=48 gamella
1
4.8k
C58432f23d4b6a94b92d9927c4fc20a3?s=48 masahirokanatani
0
300
966e29b84ae7dbde170f66b0bc75b7a6?s=48 ishiayaya
PRO
0
150
E598c2f9a8e5c94eea0e6505b4233d81?s=48 tomohide_tanaka
1
560
0d29d155ce5c5a93ed46363626da3ea7?s=48 ocise
0
170
5b47136bedcba2799edf4fcd27ea66d7?s=48 yaegashi
0
110

Featured

See All Featured
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
262
11k
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
237
23k
5ce91fa49a613cbc3e20d5f96856473f?s=48 edds
56
9.4k
C1daf20e5c49ff910745198ef9869ac2?s=48 hatefulcrawdad
256
17k
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
66
3k
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
333
29k
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
267
17k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
495
110k
7fa6101cd43067653cf4ac6c7ca54305?s=48 akmur
252
19k
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
73
270k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
242
21k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
12
1.8k

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 (((ο( ƅ˜ƅ*)ο)))