これをこうした (Viewのリファクタ)

命名、フォルダ構造、Viewと機能（性質）をごっちゃにしないのは大切ですよ、という反省。

フォルダ構造

├── components
│   ├── baz
│   │   ├── abstract
│   │   ├── a
│   │   └── b
│   ├── bazes-container
│   ├── main
│   │   └── bg
│   ├── qux
│   │   ├── abstract
│   │   ├── a
│   │   └── b
│   ├── quxes-container
│   └── utils.ts
├── container.ts
└── services

<main>
  <!-- bg -->
  <main-bg>
  </main-bg>
  <!-- bazes -->
  <bazes-container>
    <baz-a ng-repeat="..."></baz-a>
    <baz-b ng-repeat="..."></baz-b>
  </bazes-container>
  <!-- quxes -->
  <quxes-container>
    <qux-a></qux-a>
    <qux-b ng-repeat="..."></qux-b>
  </quxes-container>
</main>

変更前

フォルダ構造

├── components
│   ├── a-baz
│   ├── a-bazes-container
│   ├── a-qux
│   ├── bazes-container
│   ├── main
│   ├── b-baze
│   ├── b-bazes-container
│   ├── qux
│   └── quxes-container
├── container.ts
└── services

<main>
  <bazes-container>
    <!-- a(s) -->
    <a-bazes-container>
      <a-baz ng-repeat="..."></a-baz>
      <a-qux></a-qux>
    </a-bazes-container>
    <!-- b(s) -->
    <b-bazes-container>
      <b-baze ng-repeat="..."></b-baze>
      <quxes-container>
        <qux ng-repeat="..."></qux>
      </quxes-container>
    </b-bazes-container>
  </bazes-container>
</main>