プロバイダーとスコープ
ツリー内でサービスが存在する場所を制御します。
「プロバイダーとスコープ」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
プロバイダーとスコープ
providerは、Angularに依存関係の作成方法を伝えます。登録するスコープによって、存在するインスタンスの数と共有される範囲が決まります。
rootスコープ
providedIn: rootはサービスをrootインジェクターに登録します。アプリ全体で共有されるシングルトンが1つ作成されます。最も一般的な選択肢です。
@Injectable({ providedIn: 'root' })
export class AppStore {}コンポーネントのprovider
コンポーネントのproviders配列にサービスを指定すると、そのコンポーネントにスコープを限定できます。そのコンポーネントの各インスタンスは、サービスの独自のインスタンスを取得します。
import { Component } from '@angular/core';
import { LocalStore } from './local-store';
@Component({
selector: 'app-panel',
providers: [LocalStore],
template: ''
})
export class PanelComponent {}コンポーネントスコープを使う理由
各コンポーネントインスタンスが独立した状態を必要とする場合に、コンポーネントスコープのproviderを使います。たとえば、フォームの状態オブジェクトやウィジェットごとのストアなどです。
rootとコンポーネントの比較
Root：どこからでも共有される1つのインスタンス。Component：コンポーネントインスタンス（およびその子）ごとに1つのインスタンス。状態を共有するか分離するかに応じて選択します。
インジェクター階層
Angularのインジェクターはツリーを形成します。依存関係を解決するとき、Angularはコンポーネントインジェクターを確認し、親へとたどって、最後にrootを確認します。
子コンポーネントへの継承
コンポーネントで提供されたサービスは、そのコンポーネントの子でも利用できます。ただし、子が独自のインスタンスを提供した場合は、親のインスタンスがシャドーイングされます。
アプリケーションレベルのprovider
bootstrapApplicationのproviders配列で、bootstrap時にproviderを登録することもできます。これはrootスコープと似ており、多くの場合provide*関数を使います。
// bootstrapApplication(AppComponent, {
// providers: [provideHttpClient()]
// });useClassとuseValue
providerでは、useClassでトークンをクラスに、useValueで固定値に、useFactoryでファクトリに対応付けることができ、実装の差し替えや設定が可能になります。
// providers: [{ provide: Logger, useClass: ConsoleLogger }]実装の差し替え
providerはトークンを実装に対応付けるため、利用側を変更せずに実装を差し替えられます。たとえば、テストではモックに置き換えられます。
スコープの選択
共有シングルトンには、まずrootを選びます。インスタンスごとに状態を分離する必要がある場合にだけ、コンポーネントproviderを使用します。
クイックチェック: スコープ
インスタンスごとの状態。
まとめ: プロバイダーとスコープ
providerは依存関係の作成方法を定義し、スコープはインスタンス化を制御することを学びました。rootはアプリ全体のシングルトンに、コンポーネントproviderはインスタンスごとの分離に使用します。Angularはインジェクター階層を通じて依存関係を解決し、useClass/useValue/useFactoryで実装を差し替えられます。次はインジェクショントークンです。
よくある質問
「プロバイダーとスコープ」レッスンは無料ですか？
はい。「プロバイダーとスコープ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「プロバイダーとスコープ」で何を学びますか？
ツリー内でサービスが存在する場所を制御します。 ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「プロバイダーとスコープ」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- サービスとInjectable
- inject関数
- プロバイダーとスコープ
- インジェクショントークン