Angularでpugを使ってみた - 個人的なまとめ

ng add ng-cli-pug-loader を使えばOK.

なぜpug？

HTMLをそのまま書くのもいいかなぁと思ったけど、pugで楽にかけないかなと思って使ってみた。

これが

<table class="l-tasks">
  <thead>
  <tr>
    <td></td>
    <td>タイトル</td>
    <td>説明</td>
    <td>期限</td>
    <td>削除</td>
  </tr>
  </thead>
  <tbody>
  <ng-container *ngIf="(tasks$ | async) as t">
    <ng-container *ngIf="t.data.length; else notFound">
      <tr *ngFor="let task of t.data">
        <td class="m-done"><input type="radio"></td>
        <td class="m-title">{{task.title}}</td>
        <td class="m-description">{{task.description}}</td>
        <td class="m-due_date">{{task.due_date}}</td>
        <td class="m-delete">
          <app-button text="削除" (onClick)="delete(task.id)" buttonSize="small" buttonType="danger"></app-button>
        </td>
      </tr>
    </ng-container>
    <ng-template #notFound>
      <td colspan="4" class="no-task-message">data not found</td>
    </ng-template>
  </ng-container>
  </tbody>
</table>

こうなって比較的スッキリ

table.l-tasks
  thead
    tr
      td
      td タイトル
      td 説明
      td 期限
      td 削除
  tbody
    ng-container(*ngIf="(tasks$ | async) as t")
      ng-container(*ngIf="t.data.length; else notFound")
        tr(*ngFor="let task of t.data")
          td.m-done
            input(type="radio")
          td.m-title {{task.title}}
          td.m-description {{task.description}}
          td.m-due_date {{task.due_date}}
          td.m-delete
            app-button(text="削除", (onClick)="delete(task.id)", buttonSize="small", buttonType="danger")
    ng-template(#notFound)
      td.no-task-message(colspan="4") data not found

微妙だったところ

普段開発でIntellij IDEAを使っているが、リファクタリングとかで Find Usage ( option + F7) で使っている変数を探すときが多々あるが、pugにするとそこが動かない。まぁそうだよなぁというのはある。pugの便利機能をどこまで使うか？と言われるとうーん...と悩んでしまうので難しいところ。Angularの記法で書いたほうが健全な気がする