質問: IonicとAngularでの開発を勉強しているのですが、テンプレート部分を分割する方法について質問させていただきます。 今回の目的としてはテンプレートの共通化というよりは1つのテンプレートにすべて押し込むと肥大化して見通しが悪くなるので分けたいということでした。 調べたところ、componentを作成する方法が見つかったのですが、用途によっては大げさな気がしています。Angular1でいうng-includeみたいな感じで手軽に実装する方法はありますでしょうか? また、ionicのgeneratorでcomponentを作成するとcomponentというディレクトリに作成されると思いますがこちらも共通化が目的ではないのでどちらかというとpages以下に作成するのが正しい気がします。考え方的に何かずれているでしょうか? Angularのバージョンは5になります。
回答: component化しスコープの範囲を減らす(コードが見やすくなる)もしくは、directiveを作成したりすることで見やすくなると思いますよ。 下記は蛇足ですので暇なら componentは「構成要素」「部品」などの意味です。 Angularで構築する場合はtreeのように考えるとわかりやすいと思います。 !イメージ説明 これをtreeとして表すと ``` main-component + a-component + b-component + b-a-component + b-b-component ``` どれだけ分割するかは、その人次第です。 ionicでのコンポーネントもほとんど同じですが、pageという名前のcomponentが存在します。 まず、ionicはスマートフォン向けに作られて傾向が強い(PCのWEBページとしても使えるのでスマホ専用とは言い切れない。)と言うことを再確認してください。 ionicは1画面1pageで構成します。複数画面がある場合は複数pageで構成させます。page内でcomponentを使用することは可能ですが、page内でpageを使うというのはちょっと違います。 通販っぽいアプリを例として、「商品選択画面」「購入確認画面」「購入完了画面」の大まかな3画面があるとすると ``` 商品選択画面page 購入確認画面page 購入完了画面page ``` となります。 page内でcomponentを使用する場合のイメージでは ``` 商品選択画面page + suba1-component + subasub1-component + suba2-component + subasub2-component + subasub3-component 購入確認画面page + subb1-component + subbsub1-component 購入完了画面page + subc1-component ``` となります。また、treeは考え方なので、ディレクトリと共通化する必要はありませし、処理の少ないpageの場合はcomponent化する必要も当然ありません。