K4750.NET

Angularでcowsayしてみた

オライリーの「Docker」本で初めてcowsayコマンドの存在を知った・・・Angularで出来るかな？


１．Angularプロジェクト作成

いつものやつ。

$ ng new cowsayangular7

２．cowsayインストール

ずばりcowsayパッケージがあるので、これをインストールする。

$ cd cowsayangular7
$ npm install --save cowsay

３．AppComponent変更

とりあえず、app.component.htmlは超シンプルにして、

<pre>{{title}}</pre>

app.component.tsにimportを追加して、title行を変更し、

import { Component } from '@angular/core';
import { say } from 'cowsay/build/cowsay.es.js';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = say({ text: 'Hello Angular7 World!'});
}

app.component.scssはこんな感じか。

pre {
  font-family: "Lucida Console";
  font-size: 32px;
}

４．Cow say “Hello Angular7 World!”

実行してみる。

$ ng serve --open

出た出た＾＾

Hello Angular7 World