これをこうした (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>