masalibの日記

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

Angular:テンプレートとcssファイルを使わないやり方

備忘録メモのその7です
CLIで自動的に作ってくれるテンプレートとcssファイルがあるのですが
それを使わない方法を記載します

個人的には良くないと思うけど
ファイルを読み込ませるのに時間かかるから??
それを省略するためにやっているのかな??

■テンプレートを使わない方法

修正前の/app/servers/servers.component.ts

@Component({
  selector: 'app-servers',
  templateUrl: './servers.component.html',
  styleUrls: ['./servers.component.css']
})

修正後の/app/servers/servers.component.ts

@Component({
  selector: 'app-servers',
  template: '<app-server></app-server><app-server></app-server>',
  styleUrls: ['./servers.component.css']
})

わかりにくいのですが
今まで app-severのセレクターが3つだったのを
2つにしています

f:id:masalib:20170505020026j:plain

もし改行がある場合は
'(シングルコーテーション)ではなく
`(pの隣にあるコーテーション)にする

★シングルコーテーションで改行するとエラーになるので注意です

cssファイルを使わない方法

修正前/app/app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

修正後/app/app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  //styleUrls: ['./app.component.css']
  styles : [`
  h3 {
  	color : dodgerblue;
  }
  `]
})

f:id:masalib:20170505020308p:plain

次は独自タグを使わない方法
masalib.hatenablog.com