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

Angular(バージョン２以降)の勉強、その６です
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は今すぐつかわないので削除してもいいみたい

/app/app.module.tsをみてみる

実際に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に修正

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

Angular2によるモダンWeb開発 TypeScriptを使った基本プログラミング

AngularJS 2: Simple Guide on Web App Development (2nd edition) (English Edition)

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