Angular のサービスクラスの作り方

Angular のサービスクラスの作り方

コンポーネントは部品です。テンプレートはビューです。ではサービスはというと、サーバーからデータを取得してくるビジネスロジックに当たります。

Angular のサービスクラスの特徴として、@Injectableデコレーターを指定します。

以下、サービスクラスを作成するコマンド例です。

serviceというディレクトリ配下にsv1.service.tsというサービスクラスを作成しました。

Angular のサービスクラスの作り方

sv1.service.ts

上記が雛型です。これを編集し、app.module.tsのprovidersに登録します。

app.module.ts

コンポーネントを作成すると、自動でapp.module.tsが編集されましたが、どうもサービスクラスを作成した場合は手動で追加する必要があるようです。

providersパラメータ

providersパラメータにサービスを指定するだけでサービスが使えるようになります。

Angular が内部的にProviderオブジェクトを生成してくれており、実際は以下のように記述するのと同じになります。

useClassの他にも色々あります。

  • useValue
  • useFactory
  • useExisting

useClass・・・呼ばれるたびに新たにインスタンスを生成する

useValue・・・呼ばれるたびに同一オブジェクトを注入する

useFactory・・・ファクトリー関数からインスタンスを生成する

コンストラクタでサービスをインスタンス化する

Angular にはDIコンテナがあるので、コンポーネントのコンストラクタでサービスを指定するだけで、実行時にインスタンスを設定してくれます。ここで重要なのはかならずprivateをつけることです。

以下コンポーネントの例です。

Angular のサービスクラスの作り方

Serviceクラスの通信

Angular では非同期通信(ajax)で通信を行い、SPAを実現していきます。

@angular/httpにHttpModuleがありますのでこのモジュールを利用します。

詳細は「AngularとTypeScriptでSPAを作成する」を参照ください。

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA