Angular DIスキ

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

Transcript

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`T
   1SPWJEFS 9JCVņU2TQXKFGT! 9JCVņU1RVKQPCN! 9JCVņU+PLGEVCDNG 9JCVņ+PLGEVQT6TGG
7. 2TQXKFGTKU !$PNQPOFOU \
   
   
   
   
   
   
   
   
   
   
   QSPWJEFST
   <)FSP4FSWJDF>
   
   
   
   
   
   
   
   
   ^
   FYQPSU
   DMBTT
   )FSPFT$PNQPOFOU
   \
   ^ !/H.PEVMF \
   
   
   
   
   
   
   
   
   
   
   QSPWJEFST
   <
   
   
   
   
   6TFS4FSWJDF
   
   
   
   
   \
   QSPWJEF
   "11@$0/'*(
   VTF7BMVF
   )&30@%*@$0/'*(
   ^
   
   
   >
   
   
   
   
   
   
   
   
   ^
   FYQPSU
   DMBTT
   "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
    
    )FMMP
    XPSME
    ^
    !$PNQPOFOU \
    
    
    TFMFDUPS
    BQQSPPU
    
    
    UFNQMBUF6SM
    BQQDPNQPOFOUIUNM
    
    
    QSPWJEFST
    <)FMMP4FSWJDF>
    
    
    TUZMF6SMT
    <BQQDPNQPOFOUDTT>
    ^
    FYQPSU
    DMBTT
    "QQ$PNQPOFOU
    \
    
    
    DPOTUSVDUPS !*OKFDU )FMMP4FSWJDF
    QSJWBUF
    IFMMP
    )FMMP4FSWJDF
    \^
    
    
    UJUMF
    
    UIJTIFMMPIFMMP
    ^ BQQDPNQPOFOUUT 5ZQF サービスをコンポーネントにDIする⼀般的な⽅法が上のコードです。 （コンポーネントにサービスのクラスを書くのはѱ⼿ですが、今回は分かりやすさを優先してここに書いています。） コンポーネントデコレータのprovidersにサービス型を定義し、コンストラクタでそのサービスをインジェクトします。
12. DMBTT
    )FMMP4FSWJDF
    \
    
    
    IFMMP
    
    )FMMP
    XPSME
    ^
    !$PNQPOFOU \
    
    
    TFMFDUPS
    BQQSPPU
    
    
    UFNQMBUF6SM
    BQQDPNQPOFOUIUNM
    
    
    QSPWJEFST
    <\
    QSPWJEF
    )FMMP4FSWJDF
    VTF$MBTT
    )FMMP4FSWJDF
    ^>
    
    
    TUZMF6SMT
    <BQQDPNQPOFOUDTT>
    ^
    FYQPSU
    DMBTT
    "QQ$PNQPOFOU
    \
    
    
    DPOTUSVDUPS !*OKFDU )FMMP4FSWJDF
    QSJWBUF
    IFMMP
    )FMMP4FSWJDF
    \^
    
    
    UJUMF
    
    UIJTIFMMPIFMMP
    ^ BQQDPNQPOFOUUT 5ZQF 先ほどのproviders定義は、上のコード指定と同じです。 providでHelloServiceの型をインジェクショントークンとして指定し、インスタンスはHelloServiceクラスから作成することを 指定しています。
    QSPWJEFST
    <)FMMP4FSWJDF> ⛭鰉秷鯵
13. DMBTT
    )FMMP4FSWJDF
    \
    
    
    IFMMP
    
    )FMMP
    XPSME
    ^
    !$PNQPOFOU \
    
    
    TFMFDUPS
    BQQSPPU
    
    
    UFNQMBUF6SM
    BQQDPNQPOFOUIUNM
    
    
    QSPWJEFST
    <\
    QSPWJEF
    )FMMP4FSWJDF
    VTF$MBTT
    )FMMP4FSWJDF
    ^>
    
    
    TUZMF6SMT
    <BQQDPNQPOFOUDTT>
    ^
    FYQPSU
    DMBTT
    "QQ$PNQPOFOU
    \
    
    
    DPOTUSVDUPS !*OKFDU )FMMP4FSWJDF
    QSJWBUF
    IFMMP
    )FMMP4FSWJDF
    \^
    
    
    UJUMF
    
    UIJTIFMMPIFMMP
    ^ 5ZQF インジェクショントークンとインジェクトする引਺の型が同じ場合、Injectデコレータによるトークン指定を省略することがで きます。 䧢䡆⛐聚
14. DMBTT
    )FMMP4FSWJDF
    \
    
    
    IFMMP
    
    )FMMP
    XPSME
    ^
    !$PNQPOFOU \
    
    
    TFMFDUPS
    BQQSPPU
    
    
    UFNQMBUF6SM
    BQQDPNQPOFOUIUNM
    
    
    QSPWJEFST
    <\
    QSPWJEF
    )FMMP4FSWJDF
    VTF$MBTT
    )FMMP4FSWJDF
    ^>
    
    
    TUZMF6SMT
    <BQQDPNQPOFOUDTT>
    ^
    FYQPSU
    DMBTT
    "QQ$PNQPOFOU
    \
    
    
    DPOTUSVDUPS !*OKFDU )FMMP4FSWJDF
    QSJWBUF
    IFMMP
    )FMMP4FSWJDF
    \^
    
    
    UJUMF
    
    UIJTIFMMPIFMMP
    ^ BOZ providには型以外も指定できます。 例えば、’HelloService’という⽂字列を指定することも出དྷます。 㡨⸸⓸鰘稊⹻
15. DMBTT
    )FMMP4FSWJDF
    \
    IFMMP
    
    )FMMP
    XPSME
    ^
    DMBTT
    %*TVLJ4FSWJDF
    \
    IFMMP
    
    %*TVLJ
    XPSME
    ^
    !$PNQPOFOU \
    
    
    TFMFDUPS
    BQQSPPU
    
    
    UFNQMBUF6SM
    BQQDPNQPOFOUIUNM
    
    
    QSPWJEFST
    <\
    QSPWJEF
    )FMMP4FSWJDF
    VTF$MBTT
    )FMMP4FSWJDF
    ^
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    \
    QSPWJEF
    )FMMP4FSWJDF
    VTF$MBTT
    %*TVLJ4FSWJDF
    ^>
    
    
    TUZMF6SMT
    <BQQDPNQPOFOUDTT>
    ^
    FYQPSU
    DMBTT
    "QQ$PNQPOFOU
    \
    
    
    DPOTUSVDUPS !*OKFDU )FMMP4FSWJDF
    QSJWBUF
    IFMMP
    )FMMP4FSWJDF
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    !*OKFDU )FMMP4FSWJDF
    QSJWBUF
    IFMMP
    %*TVLJ4FSWJDF
    \^
    
    
    UJUMF
    
    A\UIJTIFMMPIFMMP^
    \UIJTIFMMPIFMMP^A
    ^ BOZ ただ、⽂字列でインジェクショントークンを指定した場合、同じ⽂字列で別の定義があると、定義が上書きされてしまいます。 複਺プロバイダによるインジェクショントークンの衝突が⼼配です。 上のコードでは、helloม਺にはHelloServiceではなく、DIsukiServiceのインスタンスがインジェクトされてしまいました。 鰚鰒鰺鰳&+UWMK猳
16. DMBTT
    )FMMP4FSWJDF
    \
    IFMMP
    
    )FMMP
    XPSME
    ^
    DMBTT
    %*TVLJ4FSWJDF
    \
    IFMMP
    
    %*TVLJ
    XPSME
    ^
    DPOTU
    )FMMP5PLFO
    
    OFX
    0QBRVF5PLFO )FMMP4FSWJDF
    DPOTU
    )FMMP5PLFO
    
    OFX
    0QBRVF5PLFO )FMMP4FSWJDF
    !$PNQPOFOU \
    
    
    TFMFDUPS
    BQQSPPU
    
    
    UFNQMBUF6SM
    BQQDPNQPOFOUIUNM
    
    
    QSPWJEFST
    <\
    QSPWJEF
    )FMMP5PLFO
    VTF$MBTT
    )FMMP4FSWJDF
    ^
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    \
    QSPWJEF
    )FMMP5PLFO
    VTF$MBTT
    %*TVLJ4FSWJDF
    ^>
    
    
    TUZMF6SMT
    <BQQDPNQPOFOUDTT>
    ^
    FYQPSU
    DMBTT
    "QQ$PNQPOFOU
    \
    
    
    DPOTUSVDUPS !*OKFDU )FMMP5PLFO
    QSJWBUF
    IFMMP
    )FMMP4FSWJDF
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    !*OKFDU )FMMP5PLFO
    QSJWBUF
    IFMMP
    %*TVLJ4FSWJDF
    \^
    
    
    UJUMF
    
    A\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
    
    )FMMP
    XPSME
    ^
    !$PNQPOFOU \
    
    
    TFMFDUPS
    BQQSPPU
    
    
    UFNQMBUF6SM
    BQQDPNQPOFOUIUNM
    
    
    QSPWJEFST
    <\
    QSPWJEF
    )FMMP4FSWJDF
    VTF$MBTT
    )FMMP4FSWJDF
    ^>
    
    
    TUZMF6SMT
    <BQQDPNQPOFOUDTT>
    ^
    FYQPSU
    DMBTT
    "QQ$PNQPOFOU
    \
    
    
    DPOTUSVDUPS QSJWBUF
    IFMMP
    )FMMP4FSWJDF
    \^
    
    
    UJUMF
    
    UIJTIFMMPIFMMP
    ^ VTF$MBTT useClassは値としてクラスを受け取り、Injectのたびにそのクラスのインスタンスを作ります。 Injectのたびにຖ回newです。
19. DMBTT
    )FMMP4FSWJDF
    \
    IFMMP
    
    )FMMP
    XPSME
    ^
    DMBTT
    %*TVLJ4FSWJDF
    \
    IFMMP
    
    %*TVLJ
    XPSME
    ^
    !$PNQPOFOU \
    
    
    TFMFDUPS
    BQQSPPU
    
    
    UFNQMBUF6SM
    BQQDPNQPOFOUIUNM
    
    
    QSPWJEFST
    <\
    QSPWJEF
    )FMMP4FSWJDF
    VTF$MBTT
    %*TVLJ4FSWJDF
    ^>
    
    
    TUZMF6SMT
    <BQQDPNQPOFOUDTT>
    ^
    FYQPSU
    DMBTT
    "QQ$PNQPOFOU
    \
    
    
    DPOTUSVDUPS QSJWBUF
    IFMMP
    )FMMP4FSWJDF
    \^
    
    
    UJUMF
    
    UIJTIFMMPIFMMP
    ^ VTF$MBTT ちなみに、provideで指定したインジェクショントークンと異なる型のクラスを指定することも出དྷます。 ただし、不必要に混ཚを招くため、このような使⽤⽅法は避けたほうがいいでしょう。 䡑鰛鰼⩬猳猳獑
20. DMBTT
    )FMMP4FSWJDF
    \
    IFMMP
    
    )FMMP
    XPSME
    ^
    DMBTT
    %*TVLJ4FSWJDF
    FYUFOET
    )FMMP4FSWJDF
    \
    IFMMP
    
    %*TVLJ
    XPSME
    ^
    !$PNQPOFOU \
    
    
    TFMFDUPS
    BQQSPPU
    
    
    UFNQMBUF6SM
    BQQDPNQPOFOUIUNM
    
    
    QSPWJEFST
    <\
    QSPWJEF
    )FMMP4FSWJDF
    VTF$MBTT
    %*TVLJ4FSWJDF
    ^>
    
    
    TUZMF6SMT
    <BQQDPNQPOFOUDTT>
    ^
    FYQPSU
    DMBTT
    "QQ$PNQPOFOU
    \
    
    
    DPOTUSVDUPS QSJWBUF
    IFMMP
    )FMMP4FSWJDF
    \^
    
    
    UJUMF
    
    UIJTIFMMPIFMMP
    ^ VTF$MBTT インジェクショントークンの型をܧ承したクラスをuseClassに指定するなどの使⽤⽅法は、型として互換があるので問題ないと 思います。 ⩬鰙鰈鰗ⅳ稰鯽鯳鰼
21. DMBTT
    )FMMP4FSWJDF
    \
    
    
    DPOTUSVDUPS QSJWBUF
    OBNF
    TUSJOH
    \^
    
    
    IFMMP
    
    A)FMMP
    \UIJTOBNF^A
    ^
    MFU
    IFMMP"OHVMBS
    
    OFX
    )FMMP4FSWJDF "OHVMBS 
    !$PNQPOFOU \
    
    
    TFMFDUPS
    BQQSPPU
    
    
    UFNQMBUF6SM
    BQQDPNQPOFOUIUNM
    
    
    QSPWJEFST
    <\
    QSPWJEF
    )FMMP4FSWJDF
    VTF7BMVF
    IFMMP"OHVMBS
    ^>
    
    
    TUZMF6SMT
    <BQQDPNQPOFOUDTT>
    ^
    FYQPSU
    DMBTT
    "QQ$PNQPOFOU
    \
    
    
    DPOTUSVDUPS QSJWBUF
    IFMMP
    )FMMP4FSWJDF
    \^
    
    
    UJUMF
    
    UIJTIFMMPIFMMP
    ^ VTF7BMVF useValueは値としてオブジェクトを受け取り、Injectされるたびにそのࢀ照を渡します。 定਺のように使えますが、ࢀ照が渡ってくるのでDIされたオブジェクトをม更すると、別の箇所に影響しますので注意が必要で す。 餿䑈鱃䄂鰊
22. DMBTT
    )FMMP4FSWJDF
    \
    
    
    DPOTUSVDUPS QSJWBUF
    OBNF
    TUSJOH
    \^
    
    
    IFMMP
    
    A)FMMP
    \UIJTOBNF^A
    ^
    !$PNQPOFOU \
    
    
    TFMFDUPS
    BQQSPPU
    
    
    UFNQMBUF6SM
    BQQDPNQPOFOUIUNM
    
    
    QSPWJEFST
    <\
    QSPWJEF
    )FMMP4FSWJDF
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    VTF'BDUPSZ
    
    
    OFX
    )FMMP4FSWJDF "OHVMBS
    ^>
    
    
    TUZMF6SMT
    <BQQDPNQPOFOUDTT>
    ^
    FYQPSU
    DMBTT
    "QQ$PNQPOFOU
    \
    
    
    DPOTUSVDUPS QSJWBUF
    IFMMP
    )FMMP4FSWJDF
    \^
    
    
    UJUMF
    
    UIJTIFMMPIFMMP
    ^ VTF'BDUPSZ useFactoryの値にはؔ਺を渡します。Injectされるたびにؔ਺が࣮⾏され、その໭り値が注⼊されます。 環境によって異なるインスタンスを⽣成したい場合などに、useFactoryを使⽤します。
23. DMBTT
    )FMMP4FSWJDF
    \
    
    
    DPOTUSVDUPS QSJWBUF
    OBNF
    TUSJOH
    \^
    
    
    IFMMP
    
    A)FMMP
    \UIJTOBNF^A
    ^
    !$PNQPOFOU \
    
    
    TFMFDUPS
    BQQSPPU
    
    
    UFNQMBUF6SM
    BQQDPNQPOFOUIUNM
    
    
    QSPWJEFST
    <\
    QSPWJEF
    )FMMP4FSWJDF
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    VTF'BDUPSZ
    
    
    OFX
    )FMMP4FSWJDF "OHVMBS
    ^>
    
    
    TUZMF6SMT
    <BQQDPNQPOFOUDTT>
    ^
    FYQPSU
    DMBTT
    "QQ$PNQPOFOU
    \
    
    
    DPOTUSVDUPS QSJWBUF
    IFMMP
    )FMMP4FSWJDF
    \^
    
    
    UJUMF
    
    UIJTIFMMPIFMMP
    ^ VTF'BDUPSZ @armorik83 さんから勉ڧձでご指摘頂きました。ありがとうございます！ exportしていないクラスやアローؔ਺式のFactoryはAoTコンパイルでエラーとなります。 ؾをつけましょう！ FYQPSU
    DMBTT
    )FMMP4FSWJDF
    \
    
    
    DPOTUSVDUPS QSJWBUF
    OBNF
    TUSJOH
    \^
    
    
    IFMMP
    
    A)FMMP
    \UIJTOBNF^A
    ^
    FYQPSU
    GVODUJPO
    )FMMP4FSWJDF'BDUPSZ
    \
    
    
    SFUVSO
    OFX
    )FMMP4FSWJDF "OHVMBS 
    ^
    !$PNQPOFOU \
    
    
    TFMFDUPS
    BQQSPPU
    
    
    UFNQMBUF6SM
    BQQDPNQPOFOUIUNM
    
    
    QSPWJEFST
    <\
    QSPWJEF
    )FMMP4FSWJDF
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    VTF'BDUPSZ
    )FMMP4FSWJDF'BDUPSZ
    ^>
    
    
    TUZMF6SMT
    <BQQDPNQPOFOUDTT>
    ^
    GZRQTV鰈鰗鯵鰛鯵鱓鲍鱝鰠#Q6鱗鲗鱵鱈鲏鰘鱌鲍鯮 鱆鲑鯮鏈窚ㇰ鰳#Q6鱗鲗鱵鱈鲏鰘鱌鲍鯮 鰄鰟鰹鯷鰜㧙鰀鰙 鱗鲗鱵鱈鲏蒌鰼
24. DMBTT
    )FMMP4FSWJDF
    \
    
    
    DPOTUSVDUPS QSJWBUF
    OBNF
    TUSJOH
    \^
    
    
    IFMMP
    
    A)FMMP
    \UIJTOBNF^A
    ^
    DPOTU
    )FMMP/BNF
    
    OFX
    0QBRVF5PLFO OBNF 
    !$PNQPOFOU \
    
    
    TFMFDUPS
    BQQSPPU
    
    
    UFNQMBUF6SM
    BQQDPNQPOFOUIUNM
    
    
    QSPWJEFST
    <
    \
    QSPWJEF
    )FMMP/BNF
    VTF7BMVF
    OHLZPUP^
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    \
    QSPWJEF
    )FMMP4FSWJDF
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    VTF'BDUPSZ
    OBNF
    TUSJOH
    
    OFX
    )FMMP4FSWJDF OBNF
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    EFQT
    <)FMMP/BNF>^>
    
    
    TUZMF6SMT
    <BQQDPNQPOFOUDTT>
    ^
    FYQPSU
    DMBTT
    "QQ$PNQPOFOU
    \
    
    
    DPOTUSVDUPS QSJWBUF
    IFMMP
    )FMMP4FSWJDF
    \^
    
    
    UJUMF
    
    UIJTIFMMPIFMMP
    ^ VTF'BDUPSZ useFactoryを⽤いる場合、depsでインジェクショントークンを指定することが出དྷます。 depsでインジェクショントークンを指定すると、useFactoryのؔ਺にインジェクトした引਺を渡すことが出དྷます。
25. DMBTT
    )FMMP4FSWJDF
    \
    
    
    DPOTUSVDUPS QSJWBUF
    OBNF
    TUSJOH
    \^
    
    
    IFMMP
    
    A)FMMP
    \UIJTOBNF^A
    ^
    !$PNQPOFOU \
    
    
    TFMFDUPS
    BQQSPPU
    
    
    UFNQMBUF6SM
    BQQDPNQPOFOUIUNM
    
    
    QSPWJEFST
    <\
    QSPWJEF
    )FMMP4FSWJDF
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    VTF'BDUPSZ
    
    
    OFX
    )FMMP4FSWJDF "OHVMBS
    ^
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    \
    QSPWJEF
    )FMMP"OHVMBS
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    VTF&YJTUJOH
    )FMMP4FSWJDF^>
    
    
    TUZMF6SMT
    <BQQDPNQPOFOUDTT>
    ^
    FYQPSU
    DMBTT
    "QQ$PNQPOFOU
    \
    
    
    DPOTUSVDUPS !*OKFDU )FMMP"OHVMBS
    QSJWBUF
    IFMMP
    )FMMP4FSWJDF
    \^
    
    
    UJUMF
    
    UIJTIFMMPIFMMP
    ^
    VTF&YJTUJOH useExistingは値としてインジェクショントークンをとり、それにରするエイリアスを作ります。 つまり異なるインジェクショントークンで同じインスタンスが得られるようになります。 useClassとはਅ逆で、⼀切newしません。 上のコード例の場合、’HelloAngular’の⽂字列トークンでもHelloServiceのインスタンスを得ることが出དྷています。 ┆痓鱃∽㓱
26. DMBTT
    )FMMP4FSWJDF
    \
    IFMMP
    
    )FMMP
    XPSME
    ^
    DMBTT
    %*TVLJ4FSWJDF
    \
    IFMMP
    
    %*TVLJ
    XPSME
    ^
    !$PNQPOFOU \
    
    
    TFMFDUPS
    BQQSPPU
    
    
    UFNQMBUF6SM
    BQQDPNQPOFOUIUNM
    
    
    QSPWJEFST
    <\
    QSPWJEF
    )FMMP4FSWJDF
    VTF$MBTT
    )FMMP4FSWJDF
    NVMUJ
    USVF^
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    \
    QSPWJEF
    )FMMP4FSWJDF
    VTF$MBTT
    %*TVLJ4FSWJDF
    NVMUJ
    USVF
    ^>
    
    
    TUZMF6SMT
    <BQQDPNQPOFOUDTT>
    ^
    FYQPSU
    DMBTT
    "QQ$PNQPOFOU
    \
    
    
    DPOTUSVDUPS !*OKFDU )FMMP4FSWJDF
    QSJWBUF
    IFMMP
    \
    IFMMP
    TUSJOH
    ^<>
    \^
    
    
    UJUMF
    
    A\UIJTIFMMP
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    NBQ P
    
    PIFMMP SFEVDF N
    N
    
    N
    
    
    
    
    N
    ^A
    ^
    NVMUJ 通常は同じインジェクショントークンにରして複਺Providerを宣⾔すると、最後に宣⾔されたものに上書きされますが、multiを trueに指定すると、インジェクショントークンにରして複਺のProviderを提供することが出དྷます。 この場合、インジェクトされるม਺の型は配列にします。 苭窚鰛鰟鰘蔥⓸
27. 8IBU`T
    0QUJPOBM 9JCVņU2TQXKFGT! 9JCVņU+PLGEVCDNG 9JCVņ+PLGEVQT6TGG 9JCVņU1RVKQPCN!
28. DMBTT
    )FMMP4FSWJDF
    \
    
    
    IFMMP
    
    )FMMP
    XPSME
    ^
    !$PNQPOFOU \
    
    
    TFMFDUPS
    BQQSPPU
    
    
    UFNQMBUF6SM
    BQQDPNQPOFOUIUNM
    
    
    QSPWJEFST
    <\
    QSPWJEF
    )FMMP4FSWJDF
    VTF$MBTT
    )FMMP4FSWJDF
    ^>
    
    
    TUZMF6SMT
    <BQQDPNQPOFOUDTT>
    ^
    FYQPSU
    DMBTT
    "QQ$PNQPOFOU
    \
    
    
    DPOTUSVDUPS
    
    
    
    
    !*OKFDU "OHVMBS4FSWJDF
    QSJWBUF
    IFMMP
    )FMMP4FSWJDF
    \^
    
    
    UJUMF
    
    UIJTIFMMP
    
    OVMM
    
    UIJTIFMMPIFMMP
    
    OVMM
    ^ 0QUJPOBM 依存性解決出དྷなかった場合、DIエラーとなってしまいます。 上のコードの場合、’AngularService’という⽂字列のインジェクショントークンで依存性が解決出དྷなかったので、エラーがൃ ⽣します。 㨋⹻劊鰟鱬鯮鱓鲗
29. DMBTT
    )FMMP4FSWJDF
    \
    
    
    IFMMP
    
    )FMMP
    XPSME
    ^
    !$PNQPOFOU \
    
    
    TFMFDUPS
    BQQSPPU
    
    
    UFNQMBUF6SM
    BQQDPNQPOFOUIUNM
    
    
    QSPWJEFST
    <\
    QSPWJEF
    )FMMP4FSWJDF
    VTF$MBTT
    )FMMP4FSWJDF
    ^>
    
    
    TUZMF6SMT
    <BQQDPNQPOFOUDTT>
    ^
    FYQPSU
    DMBTT
    "QQ$PNQPOFOU
    \
    
    
    DPOTUSVDUPS
    
    
    
    
    !0QUJPOBM
    !*OKFDU "OHVMBS4FSWJDF
    QSJWBUF
    IFMMP
    )FMMP4FSWJDF
    \^
    
    
    UJUMF
    
    UIJTIFMMP
    
    OVMM
    
    UIJTIFMMPIFMMP
    
    OVMM
    ^ 0QUJPOBM 依存性解決出དྷなかった場合にもエラーにしたくない場合は、Optionalデコレータで指定します。 こうすることで、依存性解決出དྷなかったม਺の値がnullとなるだけで、エラーはൃ⽣しません。 VJKUJGNNQ鰟甧鰠PWNN
30. 8IBU`T
    0QUJPOBM 9JCVņU2TQXKFGT! 9JCVņ+PLGEVQT6TGG 9JCVņU+PLGEVCDNG 9JCVņU1RVKQPCN!
31. DMBTT
    8IP
    \
    OBNF
    
    "OHVMBS
    ^
    DMBTT
    )FMMP4FSWJDF
    \
    
    
    DPOTUSVDUPS QSJWBUF
    XIP
    8IP
    \^
    
    
    IFMMP
    
    A)FMMP
    \UIJTXIPOBNF^A
    ^
    !$PNQPOFOU \
    
    
    TFMFDUPS
    BQQSPPU
    
    
    UFNQMBUF6SM
    BQQDPNQPOFOUIUNM
    
    
    QSPWJEFST
    <
    8IP
    )FMMP4FSWJDF>
    
    
    TUZMF6SMT
    <BQQDPNQPOFOUDTT>
    ^
    FYQPSU
    DMBTT
    "QQ$PNQPOFOU
    \
    
    
    DPOTUSVDUPS QSJWBUF
    IFMMP
    )FMMP4FSWJDF
    \^
    
    
    UJUMF
    
    UIJTIFMMPIFMMP
    ^ *OKFDUBCMF サービスもDIにより依存性を解決出དྷますが、上のコードはエラーとなります。 理由としては、Injectorで依存性解決可能なクラスとして認識されていないからです。 鱵鲍鲅鯮鱣鱃茭㽛鰘鯾鰛鯵猳
32. !*OKFDUBCMF
    DMBTT
    8IP
    \
    OBNF
    
    "OHVMBS
    ^
    !*OKFDUBCMF
    DMBTT
    )FMMP4FSWJDF
    \
    
    
    DPOTUSVDUPS QSJWBUF
    XIP
    8IP
    \^
    
    
    IFMMP
    
    A)FMMP
    \UIJTXIPOBNF^A
    ^
    !$PNQPOFOU \
    
    
    TFMFDUPS
    BQQSPPU
    
    
    UFNQMBUF6SM
    BQQDPNQPOFOUIUNM
    
    
    QSPWJEFST
    <
    8IP
    )FMMP4FSWJDF>
    
    
    TUZMF6SMT
    <BQQDPNQPOFOUDTT>
    ^
    FYQPSU
    DMBTT
    "QQ$PNQPOFOU
    \
    
    
    DPOTUSVDUPS QSJWBUF
    IFMMP
    )FMMP4FSWJDF
    \^
    
    
    UJUMF
    
    UIJTIFMMPIFMMP
    ^ *OKFDUBCMF サービスも依存性解決ର象にしたい場合は、Injectableデコレータを指定します。 Angularでは、すべてのサービスにInjectableデコレータを指定するスタイルが推঑されています。 なお、ComponentでInjectableが必要なかった理由は、ComponentやDirective、Pipeは、Injactableのサブタイプだからで す。
33. 8IBU`T
    0QUJPOBM 9JCVņU2TQXKFGT! 9JCVņU1RVKQPCN! 9JCVņU+PLGEVCDNG 9JCVņ+PLGEVQT6TGG
34. *OKFDUPS
    5SFF ∼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. 5IBOL
    ZPV
    BMM
    
    GPS
    MJTUFOJOH (((ο( ƅ˜ƅ*)ο)))