読者です 読者をやめる 読者になる 読者になる

masalibの日記

システム開発、運用と猫の写真ブログです

Angular:componentを作ってみる(CLI)

Angular(バージョン2以降)の勉強、その6です
CLIで自動的に作ってくれる機能があるみたいなので
そちらをやってみたいと思います


自動的に動いているng serveを
「control + c 」でとめて

ng generate component servers

と入力してみる

省略版
ng g c servers

installing component
  create src/app/servers/servers.component.css
  create src/app/servers/servers.component.html
  create src/app/servers/servers.component.spec.ts
  create src/app/servers/servers.component.ts
  update src/app/app.module.ts

できたっぽい
手動の苦労が嘘みたいです
servers.component.spec.tsは今すぐつかわないので削除してもいいみたい

f:id:masalib:20170504205005p:plain

/app/app.module.tsをみてみる
f:id:masalib:20170504210247p:plain

実際にHTMLに挿入する部分(セクター)は手動らしいので
ServersComponentにServerComponentの
セレクターを記載します

/app/servers/servers.component.html

<app-server></app-server>
<app-server></app-server>
<app-server></app-server>


app.component.htmlに記載さいている
serverのセレクターをserversのセレクターに修正する

修正前:/app/app.component.html

<h1>
  {{title}}I'm componet
</h1>
<hr>
<app-server></app-server>

修正前:/app/app.component.html

<h1>
  {{title}}I'm componet
</h1>
<hr>
<app-servers></app-servers> ←serverからserversに修正

f:id:masalib:20170504210341p:plain

componentの親子関係も勉強しました
繰り返し使う場合は便利だね

次はテンプレートファイルおよびcssファイルを使わないやり方です
masalib.hatenablog.com