Angular コンポーネントの分割
RxJSの学習を行う中でAngular after tutorialを行いました。
第一章の中で学んだコンポーネントの分割についてです。
役割を分担する
userの情報を返すapiにアクセスし、取得したuserの配列をviewに表示するシンプルなアプリケーションを作成し、それをリファクタリングする中で役割の分割という考えがあります。
このアプリケーションではapp.componentが以下の役割を持っています。
- アプリケーションブートストラップのエントリポイントになる
- apiから値を取得する
- 取得したuserの配列を表示する
- userの詳細情報を持つ
これでは一つのコンポーネントが持つ役割が多く、何らかの変更でapp.componentが正常に動作しない場合に全て影響が出てしまいます。
そのため、これらを一つずつ別のコンポーネントに分割することで役割を分担していきます。
このように機能ごとにコンポーネント毎に役割を分担して実装するのが良いと学びました。