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

〜なんだかいけそうな気がする〜Angular入門

 〜なんだかいけそうな気がする〜Angular入門

関ジャバで発表した資料です。

Shinichi Kozake

February 18, 2017
Tweet

More Decks by Shinichi Kozake

Other Decks in Technology

Transcript

  1. Angular2 Angular 8IBU`T"OHVMBS Angular 2の正式名শは「Angular」です。Angular 4はAngular 2と互換性を維持し、そのまま移⾏できる予定です。 Angular 2から3を⾶ばしてAngular 4になるのは、Angular

    Routerがメジャーバージョンアップで4になり、混ཚしてしまうか らです。バージョン番߸のポリシーとして「セマンティックバージョンニング(Semantic Versioning)」を採⽤するとのこと。 6カ⽉に⼀度メジャーバージョンアップを⾏う予定らしいです。 ʰ"OHVMBSͷ࣍όʔδϣϯ͸ʮ"OHVMBSʯʹɺ೥݄ϦϦʔεɻ ࠓޙ͸୯ʹʮ"OHVMBSʯͱݺΜͰ΄͍͠ʱ http://www.publickey1.jp/blog/16/angularangular_420173angular.html
  2. 0OFGSBNFXPSL One framework. Mobile & desktop. •データバインディング •DI(依存性解決) •フォーム •ルーティング

    •モジュール Angularのサイトを訪れると、「One framework. Mobile & desktop」とあります。 AngularはモダンWebアプリケーションを構築するための⼀通りの機能がἧっています。 また、Mobileとあるとおり、端末性能の低いMobile端末でもܰ快に動作するよう意識して設計されています。 •コンポーネントスタイル •HTTP Client •テスト •and more…
  3. $PNQPOFOU NBJOUT "QQ.PEVMF "QQ$PNQPOFOU bootstrap bootstrap QMBUGPSN#SPXTFS%ZOBNJD CPPUTUSBQ.PEVMF "QQ.PEVMF 

    NBJOUT !/H.PEVMF \  CPPUTUSBQ<"QQ$PNQPOFOU> ^  FYQPSUDMBTT"QQ.PEVMF\^ BQQNPEVMFUT アプリケーション起動ॲ理の流れは上のਤのとおりです。 最初にmain.tsが呼び出され、起動するモジュールとしてAppModuleクラスが指定されてます。 AppModuleクラスの中では、デコレータで最初に起動するコンポーネントとしてAppComponentが指定されています。 デコレータとはクラスのメタデータを定義するもので、Javaでいうところのアノテーションです。 54 54
  4. BQQDPNQPOFOUUT BQQDPNQPOFOUIUNM !$PNQPOFOU \ TFMFDUPSBQQSPPU  UFNQMBUF6SMBQQDPNQPOFOUIUNM  TUZMF6SMT<BQQDPNQPOFOUDTT> ^

     FYQPSUDMBTT"QQ$PNQPOFOU\ UJUMFBQQXPSLT ^ I \\UJUMF^^ I  CPEZ BQQSPPU-PBEJOHBQQSPPU CPEZ IUNM JOEFYIUNM $PNQPOFOU AppComponentでもデコレータを⽤いてます。 デコレータでテンプレートHTMLを出⼒するタグ(app-root)やテンプレートHTMLのURLが定義されています。 HTML定義では、಺ૠ(interpolation)を⽤いてコンポーネントのtitleをデータバインディングして、その結果「app work」と表⽰ されます。 54 54 
  5. !$PNQPOFOU \ TFMFDUPSBQQSPPU  UFNQMBUF6SMBQQDPNQPOFOUIUNM  TUZMF6SMT<BQQDPNQPOFOUDTT> ^  FYQPSUDMBTT"QQ$PNQPOFOU\

    UJUMFBQQXPSLT` UJUMF)FMMP8PSME ^ BQQDPNQPOFOUUT I \\UJUMF^^ I BQQDPNQPOFOUIUNM $PNQPOFOU では、試しにtitleの値を’app works!’から’Hello World!’にม更してみましょう。 ը⾯の表⽰が「Hello World!」にม更されます。 なお、開ൃ⽤Webサーバはソースファイルのม更をݕ知して⾃動でリロードしてくれます。便利ですね! 54 
  6. !$PNQPOFOU \ TFMFDUPSBQQSPPU  UFNQMBUF6SMBQQDPNQPOFOUIUNM  TUZMF6SMT<BQQDPNQPOFOUDTT> ^  FYQPSUDMBTT"QQ$PNQPOFOU\

    UJUMF)FMMP8PSME ^ BQQDPNQPOFOUUT I \\UJUMF^^ I JOQVUUZQFUFYU< OH.PEFM >UJUMF BQQDPNQPOFOUIUNM $PNQPOFOU 次に、Two-wayデータバインディングでタイトルを⾃由にม更できるようにしましょう! app.component.htmlにinputタグを追加します。[(ngModel)]=“title” の部分がTwo-wayデータバインディングを࣮現してい る箇所です。 では、inputテキストの中の値をม更してみましょう。リアルタイムでタイトルをม更できます。 54 
  7. OHHFOFSBUFDPNQPOFOUCFFS !/H.PEVMF \ EFDMBSBUJPOT< "QQ$PNQPOFOU  #FFS$PNQPOFOU >  

    ^  FYQPSUDMBTT"QQ.PEVMF\^ BQQNPEVMFUT ʴ $PNQPOFOU では、次にコンポーネントを作ってみます。 `ng generate component beer` コマンドで新たなコンポーネントの雛形を⽣成出དྷます。 ⽣成したコンポーネントは、⾃動的にAppModuleのdeclarationsで指定されます。便利です。 54
  8. JNQPSU\$PNQPOFOU 0O*OJU^GSPN!BOHVMBS DPSF !$PNQPOFOU \ TFMFDUPSBQQCFFS  UFNQMBUF6SMCFFSDPNQPOFOUIUNM  TUZMF6SMT<CFFSDPNQPOFOUDTT>

    ^  FYQPSUDMBTT#FFS$PNQPOFOUJNQMFNFOUT0O*OJU \ DPOTUSVDUPS \^ OH0O*OJU \ ^ ^ CFFSDPNQPOFOUUT Q CFFSXPSLT Q CFFSDPNQPOFOUIUNM $PNQPOFOU ⽣成されたBeerComponentのソースコードはこのとおりです。 基本的に雛形のみで、なにも࣮૷がありません。 selectorに`app-beer`と定義されているので、BeerComponentは<app-beer>タグでHTMLテンプレートに定義できます。 54 
  9. !$PNQPOFOU \ TFMFDUPSBQQSPPU  UFNQMBUF6SMBQQDPNQPOFOUIUNM  TUZMF6SMT<BQQDPNQPOFOUDTT> ^  FYQPSUDMBTT"QQ$PNQPOFOU\

    UJUMF)FMMP8PSME ^ BQQDPNQPOFOUUT I \\UJUMF^^ I JOQVUUZQFUFYU< OH.PEFM >lUJUMF BQQCFFSBQQCFFS BQQDPNQPOFOUIUNM $PNQPOFOU AppComponentのHTMLテンプレートに<app-beer>タグを追加すると、「beer works!」と表⽰が追加されました。 54 
  10.  FYQPSUDMBTT#FFS$PNQPOFOUJNQMFNFOUT0O*OJU \ !*OQVU CFFS#FFS DPOTUSVDUPS \^ OH0O*OJU \ ^

    ^ CFFSDPNQPOFOUUT Q CFFSXPSLT \\CFFSOBNF^^JT\\CFFSEFTDSJQUJPO^^ Q CFFSDPNQPOFOUIUNM FYQPSUDMBTT#FFS\ DPOTUSVDUPS  QSJWBUFJETUSJOH  QSJWBUFOBNFTUSJOH  QSJWBUFEFTDSJQUJPOTUSJOH \ ^ ^ CFFSNPEFMUT $PNQPOFOU では、BeerComponentを࣮૷します。Inputデコレータでbeerプロパティを追加しました。 Inputデコレータを付༩することで、プロパティバインディング可能な⼊⼒プロパティが宣⾔出དྷます。 また、ビールの名前とઆ明を格納できるデータクラスも作成しました。 beerComponentはbeerプロパティに指定されたビールの情報を表⽰します。 54  54
  11. !$PNQPOFOU \ TFMFDUPSBQQSPPU  UFNQMBUF6SMBQQDPNQPOFOUIUNM  TUZMF6SMT<BQQDPNQPOFOUDTT> ^  FYQPSUDMBTT"QQ$PNQPOFOU\

    UJUMF)FMMP8PSME` NZ'BWPSJUF#FFS OFX#FFS  Ϟϧπ ࠷ߴͩ  ^ BQQDPNQPOFOUUT I \\UJUMF^^ I JOQVUUZQFUFYU< OH.PEFM >lUJUMF BQQCFFSBQQCFFS BQQCFFS<CFFS>lNZ'BWPSJUF#FFS BQQCFFS BQQDPNQPOFOUIUNM $PNQPOFOU AppComponentでおؾに⼊りビールを定義して、 <app-beer [beer]=“myFavoriteBeer”> と定義することで、おؾに⼊りのビール情報を表⽰出དྷました! 54 
  12. [beer]=“myFavoriteBeer” "QQ$PNQPOFOU #FFS$PNQPOFOU 5FNQMBUF<"QQ> 5FNQMBUF<#FFS> {{beer.name}} is {{beer.description}}!! NZ'BWPSJUF#FFS OFX#FFS

     Ϟϧπ ࠷ߴͩ  $PNQPOFOU このイメージをਤで表すとこのようになります。 AppComponentが保持するmyFavoriteBeerを、BeerComponentのbeerプロパティにバインディングし、಺ૠ (interpolation)を⽤いて表⽰出དྷています。
  13. !$PNQPOFOU \ TFMFDUPSBQQSPPU  UFNQMBUF6SMBQQDPNQPOFOUIUNM  TUZMF6SMT<BQQDPNQPOFOUDTT> ^  FYQPSUDMBTT"QQ$PNQPOFOU\

    UJUMF)FMMP8PSME` NZ'BWPSJUF#FFS OFX#FFS  Ϟϧπ ࠷ߴͩ  PO/JDF FWFOU \ UIJTUJUMF  Й ƅ˜ƅ Й  ^ ^ BQQDPNQPOFOUUT I \\UJUMF^^ I JOQVUUZQFUFYU< OH.PEFM >lUJUMF BQQCFFSBQQCFFS BQQCFFS<CFFS>lNZ'BWPSJUF#FFS BQQCFFS JOQVUUZQFCVUUPO WBMVF͍͍Ͷ DMJDL PO/JDF FWFOU  BQQDPNQPOFOUIUNM $PNQPOFOU では逆に、View(DOM)からのイベントをコンポーネントで受け取ってみましょう。 「いいね!」ボタンを追加しました。 「いいね!」ボタンのクリックイベントは、イベントバインディングで受け取ることが出དྷます。 ボタンが押されると、AppComponentのonNiceメソッドが呼ばれ、タイトルが喜びます。 「いいね!」されると嬉しいですからね! 54 
  14. $PNQPOFOU GXGPV ňJCPFNGTʼn %QORQPGPV &1/ ]]XCNWG__ = PI/QFGN ?ňRTQRGTV[ʼn =RTQRGTV[?ňXCNWGʼn

    [ ]が⼊⼒ ( )が出⼒ [ ]と( )を組み合わせた[( )]が⼊出⼒ 今まで出てきたバインディング⽅式をまとめました。 上から順に、಺ૠ(interpolation)、プロパティバインディング、イベントバインディング、Two-wayデータバインディングで す。[ ]がDOMへの⼊⼒、( )がDOMからの出⼒で、[ ] と ( )を組み合わせた[( )]が⼊出⼒と֮えましょう!
  15. %JSFDUJWF !$PNQPOFOU \ TFMFDUPSBQQSPPU  UFNQMBUF6SMBQQDPNQPOFOUIUNM  TUZMF6SMT<BQQDPNQPOFOUDTT> ^ 

    FYQPSUDMBTT"QQ$PNQPOFOU\ UJUMF)FMMP8PSME` NZ'BWPSJUF#FFS OFX#FFS  Ϟϧπ ࠷ߴͩ  JT/JDFGBMTF PO/JDF FWFOU \ UIJTUJUMF b Й ƅ˜ƅ Й  UIJTJT/JDFUIJTJT/JDF ^ ^ BQQDPNQPOFOUUT I \\UJUMF^^ \\UJUMF^^ TQBO OH*GlJT/JDF Й ƅ˜ƅ Й TQBO  BQQDPNQPOFOUIUNM 鯵鯵鰞鲀鱣鲗鰘鰄鰄鯽 ⓛ鰐鰻簉鯹鰐鰻鰊鰼鰹鯷鰜猳 ngIfはStructural Directive(構造ディレクティブ)と呼ばれるもので、DOM಺の要素を追加、削除することでHTMLレイアウ トをม更します。「いいね!」ボタンを押されたらタイトルをม更していましたが、isNiceਅِ値を切り替えることで、タイトル の表⽰が切り替わるようにม更します。ngIfにプロパティバインディングで指定した値のਅِ値で、そのDOM要素の表⽰•⾮ 表⽰が切り替わります。 54 
  16. OHHFOFSBUFEJSFDUJWFEJSFDUJWFIJHIMJHIU !/H.PEVMF \ EFDMBSBUJPOT< "QQ$PNQPOFOU  #FFS$PNQPOFOU  )JHIMJHIU%JSFDUJWF >

      ^  FYQPSUDMBTT"QQ.PEVMF\^ BQQNPEVMFUT ʴ %JSFDUJWF 「いいね!」ボタンを押された時のタイトルの喜びが今ひとつです。せっかくの「いいね!」なんだから、派⼿に喜びたいですね! ここでは、Attribute Directive(ଐ性ディレクティブ)を作成して、タイトルを華やかに喜ばせましょう! `ng generate directive directive/highlight` でDirectiveの雛形を作成できます。
  17. JNQPSU\%JSFDUJWF^GSPN!BOHVMBSDPSF !%JSFDUJWF \ TFMFDUPS<BQQ)JHIMJHIU> ^  FYQPSUDMBTT)JHIMJHIU%JSFDUJWF\ DPOTUSVDUPS \^ ^

    IJHIMJHIUEJSFDUJWFUT %JSFDUJWF ⽣成されたHighlightDirectiveのソースコードはこのとおりです。 基本的に雛形のみで、なにも࣮૷がありません。 selectorに`appHighlight`と定義されているので、DOM要素にappHighlightと指定すると、このディレクティブが有ޮとなり ます。 54
  18. !%JSFDUJWF \ TFMFDUPS<BQQ)JHIMJHIU> ^  FYQPSUDMBTT)JHIMJHIU%JSFDUJWF\ DPOTUSVDUPS \^ !*OQVU 

    TFUBQQ)JHIMJHIU DPOEJUJPOBOZ \ UIJTFMOBUJWF&MFNFOUTUZMFCBDLHSPVOE DPOEJUJPO ZFMMPXOVMM ^ DPOTUSVDUPS QSJWBUFFM&MFNFOU3FG \^ ^ IJHIMJHIUEJSFDUJWFUT %JSFDUJWF I I<BQQ)JHIMJHIU>JT/JDF \\UJUMF^^  BQQDPNQPOFOUIUNM h1タグにappHighlightを追加します。その際、プロパティバインディングでisNiceプロパティの値を受け取ります。 HighlightDirectiveでは、appHighLightのsetterをInputディレクティブの⼊⼒プロパティとして宣⾔します。 そして、isNiceのਅِ値がม更されるたびに、backgroundのスタイル⾊をม更します。 54 
  19. OHHFOFSBUFQJQFQJQFVQQFS !/H.PEVMF \ EFDMBSBUJPOT< "QQ$PNQPOFOU  #FFS$PNQPOFOU  )JHIMJHIU%JSFDUJWF 

    6QQFS1JQF >   BQQNPEVMFUT ʴ 1JQF では、ଓけてPipeを作ってみましょう!Pipeを⽤いてタイトルを⼤⽂字にします。 Pipeは、AngularJSでfilterと呼ばれていたものと同じです。 `ng generate pipe pipe/upper` でPipeの雛形を作成できます。
  20. JNQPSU\1JQF 1JQF5SBOTGPSN^GSPN!BOHVMBS DPSF !1JQF \ OBNFVQQFS ^  FYQPSUDMBTT6QQFS1JQFJNQMFNFOUT 1JQF5SBOTGPSN\

    USBOTGPSN WBMVFBOZ BSHT BOZ BOZ\ SFUVSOOVMM ^ ^ IJHIMJHIUEJSFDUJWFUT 1JQF ⽣成されたUpperPipeのソースコードはこのとおりです。 基本的に雛形のみで、なにも࣮૷がありません。 nameに`upper`と定義されているので、この名前でPipeが使⽤可能です。 54
  21. JNQPSU\1JQF 1JQF5SBOTGPSN^GSPN!BOHVMBS DPSF !1JQF \ OBNFVQQFS ^  FYQPSUDMBTT6QQFS1JQFJNQMFNFOUT 1JQF5SBOTGPSN\

    USBOTGPSN WBMVFBOZ BSHT BOZ BOZ\ SFUVSOOVMM USBOTGPSN WBMVFTUSJOH BSHT BOZ TUSJOH\ SFUVSOWBMVFUP6QQFS$BTF  ^ ^ IJHIMJHIUEJSFDUJWFUT 1JQF I I<BQQ)JHIMJHIU>JT/JDF \\UJUMF^^ \\UJUMFcVQQFS^^  BQQDPNQPOFOUIUNM transformメソッドで、引਺に渡された⽂字を⼤⽂字にม換するロジックを࣮૷します。 expression | pipe名 とパイプラインで۠切って使⽤します。Unixのパイプを連想させますね。 これで、Java表記もjavaサイトと同じになりました! 54 
  22. JNQPSU\*OKFDUBCMF^GSPN!BOHVMBSDPSF !*OKFDUBCMF  FYQPSUDMBTT#FFS4FSWJDF\ DPOTUSVDUPS \^ ^ CFFSTFSWJDFUT 4FSWJDF ⽣成されたBeerServiceのソースコードはこのとおりです。

    基本的に雛形のみで、なにも࣮૷がありません。 まあ、ServiceはComponentやDirective、Pipeと異なり、AppModuleに⾃動で定義されません。 54
  23. JNQPSU\*OKFDUBCMF^GSPN!BOHVMBSDPSF !*OKFDUBCMF  FYQPSUDMBTT#FFS4FSWJDF\ CFFST#FFS<>< OFX#FFS  Ϟϧπ ࠷ߴͩ 

     OFX#FFS  ΩϦϯ ޾ͤͩ   OFX#FFS  υϥΠ Ֆۚͩ  > DPOTUSVDUPS \^ HFU#FFST #FFS<>\ SFUVSOUIJTCFFST ^ ^ CFFSTFSWJDFUT 4FSWJDF !/H.PEVMF \ QSPWJEFST<>  QSPWJEFST< #FFS4FSWJDF >   ^  FYQPSUDMBTT"QQ.PEVMF\^ BQQNPEVMFUT では、BeerServiceを࣮૷します。ビールをたくさん返すgetBeersメソッドを追加しました。 そのあと、AppModuleのprovidersにBeerServiceの指定を追加しました。 54 54
  24. "QQ$PNQPOFOU "QQ.PEVMF declarations/ bootstap #FFS$PNQPOFOU declarations 4FSWJDF #FFS4FSWJDF providers )JHIMJHIU%JSFDUJWF

    declarations 6QQFS1JQF 現時点でこのような構成になっています。
  25. FYQPSUDMBTT"QQ$PNQPOFOU\ UJUMF)FMMP8PSME NZ'BWPSJUF#FFS OFX#FFS  Ϟϧπ ࠷ߴͩ  JT/JDFGBMTF DPOTUSVDUPS

     QSJWBUFCFFS4FSWJDF#FFS4FSWJDF \ ^ OH0O*OJU \ UIJTCFFSTUIJTCFFS4FSWJDFHFU#FFST  ^  ^ BQQDPNQPOFOUUT BQQDPNQPOFOUIUNM では、ComponentでBeerServiceを使⽤してみます。BeerServiceをコンストラクタの引਺に定義すると、DI(依存性注⼊)に よりBeerServiceのインスタンスが取得できます。 4FSWJDF 54
  26. "QQ$PNQPOFOU "QQ.PEVMF declarations/ bootstap #FFS$PNQPOFOU Create Serve 4FSWJDF #FFS4FSWJDF providers

    *OKFDUPS Inject OCKPVCKPUCEQPVCKPGT QHUGTXKEGKPUVCPEGU declarations )JHIMJHIU%JSFDUJWF declarations 6QQFS1JQF 構成としては次のとおりです。ModuleのProvidersに指定されたServiceはアプリケーション全ମで使⽤することが出དྷます。 Injectorにより、BeerServiceのインスタンスがアプリケーションで1つだけ⽣成されて、AppComponentにInjectされます。 Moduleだけでなく、ComponentでもServiceをProvidersで指定できます。その場合、インスタンスがコンポーネントຖに⽣成 されるなどの違いがあります。これはInjectorヒエラルキーの話になりますが、今回その話はର象外とします。
  27. FYQPSUDMBTT"QQ$PNQPOFOU\ FYQPSUDMBTT"QQ$PNQPOFOU JNQMFNFOUT0O*OJU\ UJUMF)FMMP8PSME NZ'BWPSJUF#FFS OFX#FFS  Ϟϧπ ࠷ߴͩ 

    CFFST#FFS<> JT/JDFGBMTF DPOTUSVDUPS  QSJWBUFCFFS4FSWJDF#FFS4FSWJDF \ ^ OH0O*OJU \ UIJTCFFSTUIJTCFFS4FSWJDFHFU#FFST  ^  ^ BQQDPNQPOFOUUT ngOnInitメソッドで、beerServiceのgetBeersメソッドを呼び出してbeersプロパティに໭り値を設定します。コンポーネント やディレクティブはAngularによってライフサイクルが管理されてます。コンポーネントの作成や更新、削除のタイミングをݕ 知できます。ngOnInitメソッドはコンポーネント作成時に呼ばれます。 $PNQPOFOU 54
  28. 1つまたは複਺のライフサイクルフックインターフェイスを࣮૷することで、ライフサイクルのタイミングで ॲ理を࣮⾏出དྷます(ݫ密にいえば、インタフェースを࣮૷する必要もありません)。 各インタフェースには୯⼀のフックメソッドがあり、その名前は「”ng” + インタフェース名」です。 たとえば、OnInitインターフェイスにはngOnInitという名前のフックメソッドがあります。 Angularは、次の順序でこれらのフックメソッドを呼び出します。 ϥΠϑαΠΫϧʹ͍ͭͯ ngOnChanges ⼊出⼒バインド値がม更されたとき。

    ngOnInit 最初のngOnChangesの後。 ngDoCheck 開ൃ者のカスタムม更ݕ出。 ngAfterContentInit コンポーネントの಺容が初期化された後。 ngAfterContentChecked コンポーネントの಺容を確認した後 ngAfterViewInit コンポーネントのビューが初期化された後。 ngAfterViewChecked コンポーネントのビューのすべてのチェックの後。 ngOnDestroy ディレクティブが破棄される直前。
  29. FYQPSUDMBTT"QQ$PNQPOFOU JNQMFNFOUT0O*OJU\ UJUMF)FMMP8PSME CFFST#FFS<> JT/JDFGBMTF DPOTUSVDUPS  QSJWBUFCFFS4FSWJDF#FFS4FSWJDF \ ^

    OH0O*OJU \ UIJTCFFSTUIJTCFFS4FSWJDFHFU#FFST  ^  ^ BQQDPNQPOFOUUT  BQQCFFS<CFFS>lNZ'BWPSJUF#FFS BQQCFFSEJW OH'PSMFUCFFSPGCFFST BQQCFFS<CFFS>CFFSBQQCFFS EJW  BQQDPNQPOFOUIUNM ngForディレクティブを使って、beersプロパティに定義されたビールの⼀ཡを表⽰します。 “let beer of beers”とngForに指定することで、beersの಺容をbeerでࢀ照できるようになります。 beerは「テンプレート⼊⼒ม਺」と呼ばれるものです。 %JSFDUJWF 54 
  30. JNQPSU\/H.PEVMF^GSPN!BOHVMBSDPSF JNQPSU\$PNNPO.PEVMF^GSPN!BOHVMBS DPNNPO !/H.PEVMF \ JNQPSUT< $PNNPO.PEVMF >  EFDMBSBUJPOT<>

    ^  FYQPSUDMBTT#FFS.PEVMF\^ CFFSNPEVMFUT .PEVMF ⽣成されたBeerModuleのソースコードはこのとおりです。 基本的に雛形のみですが、NgModuleデコレータでCommonModuleが指定されています。 54
  31. !/H.PEVMF \ JNQPSUT< $PNNPO.PEVMF >  EFDMBSBUJPOT< #FFS$PNQPOFOU > 

    FYQPSUT< #FFS$PNQPOFOU >  QSPWJEFST< #FFS4FSWJDF > ^  FYQPSUDMBTT#FFS.PEVMF\^ CFFSNPEVMFUT .PEVMF !/H.PEVMF \ EFDMBSBUJPOT< "QQ$PNQPOFOU  #FFS$PNQPOFOU  )JHIMJHIU%JSFDUJWF  6QQFS1JQF >  JNQPSUT<  #FFS.PEVMF >  QSPWJEFST< #FFS4FSWJDF >  CPPUTUSBQ<"QQ$PNQPOFOU> ^  FYQPSUDMBTT"QQ.PEVMF\^ BQQNPEVMFUT AppModuleからBeerModuleへBeerComponentやBeerServiceの指定を移動します。 ⼀⽅で、AppModuleのimportsにBeerModuleを指定します。 54 54
  32. "QQ$PNQPOFOU "QQ.PEVMF declarations/ bootstap #FFS$PNQPOFOU Create Serve #FFS4FSWJDF provider *OKFDUPS

    Inject declarations/ exports .PEVMF #FFS.PEVMF imports )JHIMJHIU%JSFDUJWF declarations 6QQFS1JQF 構成としては次のとおりです。AppModuleがBeerModuleをimportしているので、BeerModuleのexportsで定義された ComponentやDirective、PipeなどがAppModuleでも使⽤可能になります。また、BeerModuleのproviderで定義された Serviceもアプリケーション全ମで使⽤可能となります。
  33. 3PVUFS EJW OH'PSMFUCFFSPGCFFST BQQCFFS<CFFS>CFFSBQQCFFS EJW CFFSMJTUDPNQPOFOUIUNM I<BQQ)JHIMJHIU>JT/JDF \\UJUMFcVQQFS^^ TQBO OH*GJT/JDF

    Й ƅ˜ƅ Й TQBO I JOQVUUZQFUFYU< OH.PEFM >lUJUMF EJW OH'PSMFUCFFSPGCFFST BQQCFFS<CFFS>CFFSBQQCFFS EJW JOQVUUZQFCVUUPO WBMVF͍͍Ͷ DMJDL PO/JDF FWFOU  BQQDPNQPOFOUIUNM CRREQORQPGPVVU鰙DGGTNKUVEQORQPGPVVU鰟甜㹄鰠䧢䡆 AppComponentのHTMLテンプレートの⼀部を、BeerListComponentのHTMLテンプレートに移します。 AppComponentとBeerListComponentの修正は省略します。 54 
  34. JNQPSUT< #SPXTFS.PEVMF  'PSNT.PEVMF  )UUQ.PEVMF  #FFS.PEVMF  3PVUFS.PEVMFGPS3PPU

    < \ QBUI  DPNQPOFOU)PNF$PNQPOFOU ^  \ QBUICFFSMJTU  DPNQPOFOU#FFS-JTU$PNQPOFOU ^ >  >  BQQDPNQPOFOUUT  JOQVUUZQFUFYU< OH.PEFM >UJUMF EJW BSPVUFS-JOLIPNFB BSPVUFS-JOLCFFSMJTUϏʔϧB EJW SPVUFSPVUMFUSPVUFSPVUMFU  BQQDPNQPOFOUIUNM 3PVUFS IUUQMPDBMIPTU IUUQMPDBMIPTUCFFSMJTU AppModuleのimportsにRouterModuleを指定します。 RouterModuleでは、URLパスとそれにରするComponentを定義しています。 routerLinkディレクティブを⽤いることで、ը⾯のナビゲーションリンクを作成することができます。 router-outletタグの部分のը⾯が切り替わります。 54 
  35. UIϥΠϒϥϦ ▪リリースࡁ ▪リリース前 ▪ng2-bootstrap ▪ng-lightning ▪Prime NG ▪Semantic UI ▪Vaadin

    ▪ Wijimo ▪ OnsenUI(モバイルઐ⽤) ▪Angular Material2(slpha.10) ▪Fuel-UI(prerelease 0.3.9) ▪Kendo UI for Angular2(beta、2017年5⽉リリース予定) ▪ng-bootstrap(slpha.13) 「Angular2 によるモダンWeb開ൃ(p.25)」より引⽤ 2TKOG(CEG鰘竑痓鰛2TKOG6GM鯽㚱≼鰊鰼鲍鱈鱺鲍鲎 屬鰐䧏鰟啐鰆鰵鱡鯮鱝鰟屬蒌鰈鰆鱃勤㑏鰈 鰄鰒鰺鱃㚂䠉Ⅹ⹻