A Practical Guide to Providers

The application you work on

The application you work on

The application you work on

🤯

There are so many ways to incorporate providers in Angular!

How do we start?!?

You don't need to be an expert. Let's get practical!

What are providers in Angular?

What are providers in Angular?

A provider is an instruction to the Dependency Injection system on how to obtain a value for a dependency. Most of the time, these dependencies are services that you create and provide.

https://angular.io/guide/providers

Dependency Injection

Dependency Injection

Decouples object creation from using the object - promotes loose coupling

Dependency Injection

When we use dependency injection, we are taking advantage of a software design principle called Dependency Inversion

SOLID

By decoupling dependency creation from the consumer, you can change the dependency code without changing the consuming code.

Overview of Angular's DI system

Overview of Angular's DI system

• The injector is the main mechanism for handling DI in Angular. It creates the dependencies, maintains them, and hands you the dependency you're looking for. Very snazzy.
• To use the injector, we need to register our dependencies

But what if there are multiple baristas?

Angular has multiple injectors

When should you use Angular's DI system and providers?

As much as possible, ideally always

What I'll cover

• Providing dependencies
• Resolving dependencies
• Injection tokens
• Fine-grained configuration of providers
• Applying the different principles to practical examples

Providing dependencies

Providing dependencies

1. At creation time using the @Injectable() decorator
2. The providers array

Provide at creation time

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

          }
        

Recommended in Angular v6+ to support tree-shaking

Provide using the providers array

          @NgModule({
            providers: [DramaService]
          })
          export class AppModule {
          }
        

Access dependencies

          @Component({
            selector: 'app-kdramas'
          })
          export class KDramasComponent {

            constructor(private dramaService: DramaService) {
              // singleton instance of DramaService
              // is injected into this component
            }
          }
        

Access dependencies

          @Component({
            selector: 'app-kdramas'
          })
          export class KDramasComponent {
            constructor() {
              const dramaService: DramaService = inject(DramaService);
            }
          }
        

Available in Angular v14+

Providing to different injectors

Providing to different injectors

The injector you provide to affects the scope and lifetime of the provider.

Providing to different injectors

            @NgModule({
              providers: [DramaService] // provide to ModuleInjector
            })
            export class DramasModule { }
          

            @Component({
              selector: 'app-drama',
              providers: [DramaService] // provides to ElementInjector
            })
            export class DramasComponent { }
          

              const routes: Routes = [{
                path: 'dramas',
                loadChildren: () => import('./dramas/dramas.module').then(m => m.DramasModule),
                providers: [DramaService] // provides to EnvironmentInjector
              }];
            

            @Injectable({
              providedIn: 'root' // specify injector - a module, 'platform', or 'any'
            })
          

Depends on scope and lifetime desired

Angular resolves which dependency you get via a resolution process

Prefer simple

Injection Token Analogy

• The ticket is the injection token. We use it as a reference to the dependency we're looking for.

You can also add dependencies to abstractions that don't have a runtime definition, such as interfaces.

Injection Tokens

              interface Drama {
                // members here
              }

              class DramaComponent {
                constructor(private drama: Drama) { }
              }
            

Create an injection token

Use an injection token

When to use Injection Tokens

• As an abstraction for your dependency
• When you want to provide values & plain objects
• Examples of injection tokens in Angular: APP_INITIALIZER, DOCUMENT

The value in configuring the providers array

• You can change the underlying logic of a dependency without touching the consumer
• Configuring providers gives you more fine-grained control

Configuring the providers array

          @Component({
            selector: 'app-kdrama'
            providers: [
              KDramaService
            ]
          })
          export class KDramaComponent { }
        

Configuring the providers array

          @Component({
            selector: 'app-kdrama'
            providers: [
              { provide: KDramaService, howToProvide?: SpecialDependency }
            ]
          })
          export class KDramaComponent { }
        

Configuration options for providers array

• useClass- Associate a new instance of a class to the provider
• useExisting- Alias an existing instance to the provider
• useValue- Associate a fixed value
• useFactory- Create a dependency using a factory method

Original implementation

            @Injectable({
              providedIn: 'root'
            })
            export class DramaService {
              public getDramas(): Drama[] {
                // returns all dramas with a subset of details
              }

              public getDrama(id: number): DramaDetail|undefined {
                // returns the requested drama details
              }
            }
          

            @Component({
              selector: 'app-dashboard'
              template: ``
            })
            export class DashboardComponent {
              constructor(private dramaService: DramaService) { }
            }
          

          export abstract class DashboardService {
            abstract getDramas: () => [];
          }
          

          @NgModule({
            declarations: [ ],
            imports: [ ],
            providers: [
              { provide: DashboardService, useExisting: DramaService },
            ],
            bootstrap: [AppComponent]
          })
          export class AppModule { }
        

          @Component({
            selector: 'app-dashboard'
            template: ``
          })
          export class DashboardComponent {
            constructor(private dashboardService: DashboardService) { }
          }
        

The useExisting configuration option helped us narrow the API surface of an existing service.

Original implementation

          @Injectable({
            providedIn: 'root'
          })
          export class SuggestionService {
            public getSuggestions(id: number): Drama[] {
              // return suggested dramas based on the drama id passed in
            }
          }
        

          export function suggestedDramasFactory() {
            return (config: UserConfig) =>
              config.streamingService === 'myfavekdramas' ?
                new MyFaveKDramasSuggestionService() :
                new NetflixSuggestionService();
          }
        

          @Component({
            selector: 'app-suggested-drama',
            template: ``,
            providers: [{
              provide: SUGGESTED_DRAMAS_TOKEN,
              useFactory: suggestedDramasFactory(),
              deps: [USER_CONFIG_TOKEN]
            }]
          })
          export class SuggestedDramasComponent implements OnInit {
            public suggestedDramas: Drama[] = [];

            constructor(
              @Inject(SUGGESTED_DRAMAS_TOKEN) private svc: SuggestionService
            ) { }

            public ngOnInit(): void {
              const id = 123; // from ActivatedRoute
              this.suggestedDramas = this.svc.getSuggestions(id);
            }
          }
        

The useFactory configuration option allows us to define a factory method.
This is where the instance to use at runtime is determined, based on a dynamic value.

Keep providers practical

• Angular's DI system is extremely powerful
• Many configuration options lead to complexity
• Choose simple, straightforward ways to provide dependencies

You got this!

Learn more

Post about practical DI uses in Angular
bit.ly/ADAngularDI-okta

Angular DI docs
angular.io/guide/dependency-injection-overview

Code
github.com/alisaduncan/angular-practical-providers-code

Slides
practicalguidetoproviders.alisaduncan.dev

@AlisaDuncan