angularのファイル名の意味が知りたい

Question

前提

angularのプロジェクトで以下のようなファイル構成になっていることがあります。

• aaa.component.ts
• aaa.service.ts
• b-aaa.component.ts
• b-aaa.service.ts
• aaa.component.html
• aaa.component.css

各ファイルの中身を見るとなんとなくそれぞれの役割は分かるのですが、いまいち人に説明できるレベルまで理解しきれていません。

• serviceとcomponentの役割の違いはなにか？
• なぜb-をプレフィックスしたファイルが必要なのか？またb-とはどういう意味なのか？（バインディング？）

をご存知であれば教えて頂けると幸いです。
よろしくお願いたします。

追加情報

Angular CLI: 11.2.4
Node: 14.15.4

Angular: 11.2.5

またそれぞれのファイルには以下のような内容の記述です。（import部分は省略し多少簡略化しています。）

aaa.component.ts

@Component({
  selector: 'app-aaa',
  templateUrl: './aaa.component.html',
  styleUrls: ['./aaa.component.css'],
  providers: [AaaService],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class aaaComponent extends BaaaComponent {
  constructor(
    aaaService: AaaService,
  ) {
    super(aaaService);
  }
}

aaa.service.ts

@Injectable()
export class aaaService extends BaaaService {
  constructor(
    datePipe: DatePipe,
  ) {
    super(datePipe);
  }
}

b-aaa.component.ts

@Component({
  template: '',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export abstract class BaaaComponent implements OnInit, AfterViewInit, OnDestroy, DoCheck {

  ngOnInit(): void {
    this.aaaService.initAaa():
    ...(省略)
  }

  ngDoCheck() {
    ...(省略)
  }

  ngAfterViewInit(): void {
    ...(省略)
  }

  ngOnDestroy() {
    ...(省略)
  }
}

b-aaa.service.ts

@Injectable()
export class foo {

  async initAaa() (
    ...(省略)
  }

  addData() {
    ...(省略)
  }

}

Comments

[miyabi_pudding]

Angularのバージョンによっても、多少違いがあるようなので、
（私の環境では、b-のファイルが存在しないため）
バージョンも記載お願いします。

[aaaaab]

コメントありがとうございます！
情報を追記致しました！

Answer 1

まずは、Angularはコンポーネント指向のフレームワークでありますので、
そこら辺も踏まえて回答いたします。

serviceとcomponentの役割の違いはなにか？

上記から考えても、componentファイルを中心に、
フレームワーキングしていますので、
componentファイルに、serviceファイルや、テンプレート（html）ファイルを読み込んだりしているわけです。
serviceファイルの役割としては、componentに拡張機能を与えたり、他のcomponentと連携させたりする時に（デリゲートもする）使用します。
もちろん、そのほとんどは、component内で処理を完結できるのですが、
そうしてしまうと、そのcomponentのみにしか使用できない機能となってしまいますので、
同じ機能を他のcomponentでも使用したいとなったときに、component毎に記述しなければいけなくなります。
そこで、機能自体は、serviceに記述し、複数componentで読み込む、とすることによって、
機能修正などが発生した場合、
そのservice一つの修正で完結できるというわけです。

上記も踏まえ、componentはあくまで、各ファイル等を扱う司令塔、serviceは機能面を司る、テンプレート（HTML）は、見た目を扱う、といった役割分担が、最も適したものになる（Angularの思想に適した）と思われます。

オブジェクト指向の考え方に則していますが、
Angularはそのオブジェクトにあたる概念が、コンポーネントというわけです。

また、多くのフレームワークは似た概念で構成されており、
PHPのフレームワークであるCakePHPは、
ビュー（Angularでいう、html）、コントローラー（Angularでいうservice）、コンポーネント、モデルなどといった構成になっています。

なぜb-をプレフィックスしたファイルが必要なのか？またb-とはどういう意味なのか？（バインディング？）

質問にコードを記載していただき、わかりました。
b-の方のコンポーネントには、ライフサイクル上の根本的なメソッドの記述がデフォルトで入っているようですね。
となると、ライフサイクル上の処理を記述するものなのかと。
b-がついてない方は、b-のクラスをextendしているため、b-のサブクラスとして定義されています。
（サブクラスとなっているのは、serviceも同様）
以上のことから、
おそらくではありますが、
ベースのbと思われます。
各コンポーネント、サービスの、基礎・根本的な処理、を司るのかと。

なので、表向きの実処理は、b-がついてないほうで記述する、など、使い分けができるのでしょう。
また、サブコンポーネント、サブサービスを増やしたりして、共通処理は、b-に記述し、
各サブコンポーネント・サブサービスには、個別の処理を記載する、などの工夫もとれるようになっているのでしょう。

Comments

[aaaaab]

大変ご丁寧な回答、有り難うございます！
service内で作った部品（開発した機能）を、component内で組み立てる（ライフサイクルで実行する様にする）、というイメージですかね？
普段開発しているときになんとなく「こうかな〜」と思っていたこととも一致し、とても納得出来ました。

後者の質問についてもお調べ頂けるとのことで、お手数ですがよろしくお願い致します！

[aaaaab]

追記部分ありがとうございます！
なるほど、baseの`b-`なんですね。
とういうことは当初の設計段階ではこれをベースに拡張版も開発することを視野に入れていた、などの背景が推測できますね。
納得できました！お調べいただきありがとうございます！
また、連絡遅くなり申し訳ありませんでした！