Angularでのサービスの作成方法とシングルトンデザインパターンについて

Qiita初投稿です！
技術ブログを書いたことがない＆メモ書き程度の文章なので読みにくかったらご容赦

サービス作成のコマンド

サービス名.service.tsを作成する

ng generate service サービス名

サービスの作り方

@injectableデコレーターが使われていることがサービスであることの条件

book.service.ts

import { Injectable } from '@angular/core';
import { Book } from './book';

@Injectable({
  providedIn: 'root'
})
export class BookService {

  getBook(): Book[] {
    return [
    ...

上記の例のように「providedIn: 'root'」が設定されている場合（デフォルト時）は、コンポーネント内でimportするだけでコンポーネントから直接呼び出すことができる。

それ以外の設定を使う場合、モジュールにサービスを登録するにはprovidersパラメータにサービスクラスを入れる
declarationsはコンポーネントを登録するパラメータなので間違えないこと
サービスはコンポーネント（@Componentデコレーター）のprovidersパラメーターでも登録できる。
その場合は登録したコンポーネントと子コンポーネントでのみサービスを利用できる。
(モジュールで指定されたサービスはモジュール全体でアクセス可能)

app.module.ts

import { NgModule } from '@angular/core';
...
import { BookService } from './book.service';

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    BrowserModule,
    ...
    CoopModule
  ],
  entryComponents: [EventComponent, BookComponent, WingsComponent],
  providers: [
    BookService
  ],

サービス生成のアプローチ

サービスを生成するときのオプションがいくつかある。
インスタンスを一つだけ生成して複数のコンポーネントで使いまわしたり、通常はコンポーネントに注入するたびにインスタンスを生成することができる。

サービスインスタンスの生成方法

プロパティ	概要
useClass	指定されたクラスを、注入のたびにインスタンス化
useValue	指定されたオブジェクトを常に引き渡す（同じインスタンスを使いまわす）
useExisting	指定されたトークンのエイリアスを生成
useFactory	指定されたファクトリー関数で、注入の際にオブジェクトを生成

使用例

use.component.ts

@Component({
  selector: 'app-use',
  templateUrl: './use.component.html',
  styleUrls: ['./use.component.scss'],
  providers: [
    { provide: UseService, useValue: new UseService() }
  ]

モジュール全体で一つのサービスインスタンスを使うには、ルートモジュールまたはbootstrapModuleメソッドでサービスを登録する
もっと簡単な方法がある。
サービスのprovidedInプロパティを'root'に設定すると、アプリ全体で一つのインスタンスが使いまわされる。
このように一つのインスタンスを使いまわす設計をシングルトンデザインパターンと呼ぶ。
Angularではサービスを作成するとデフォルトでprovidedInプロパティに'root'に設定されて、アプリ全体で使われるインスタンスが一つになる。

use.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class UseService {
  created: Date;

bootstrapModuleメソッドでサービスを登録する場合
※私が学習に使用したテキストのバージョンが古かったため下記の方法を記載していますが、Angular公式ではサービスにprovidedIn: 'root'を設定する上記の方法が推奨されています

main.ts

platformBrowserDynamic().bootstrapModule(AppModule, {
  providers: [
    { provide: UseService, useClass: UseService }
  ]
}).catch(err => console.error(err));