Understand Angular Dependency Injection

Inject an Angular Service into a Component using Providers

Use Provide and UseClass in Angular Providers

Use Angular Factory Providers

Use Angular Factory Providers with dependencies

Understand Angular @Injectable

Use Angular Value Providers

Understand OpaqueToken in Angular

Angular Dependency Injection (DI) Explained

This lesson discusses when and how to add dependencies, resolved by Angular’s DI, to factory providers. The example used in this lesson builts upon the previous lesson on understanding factory providers.

[00:01] A factory provider in Angular 2 often has its own dependencies to construct an object. In our list component, we have a factory provider that creates an instance of logDebugger without the need of additional dependencies, except the Boolean value that we can add straight to the constructor.

[00:16] Let's say we want to swap out this console.log call in log debugger with a reusable service, so we don't have to make changes if needed at several different places in our application where this function is called.

[00:28] We add a new file in source app, and call it console.service.ts, in which we create a service class, consoleService. It has a method, log, that simply takes a message, and calls console.log with it.

[01:00] Next, we go back to our logDebugger and import consoleService. Now, we want to make it a dependency of logDebugger. We add a new constructor parameter, consoleService, of type consoleService, and make sure it's used in the debug method instead.

[01:27] We now go back to our list component, and import consoleService here as well. Next, we add a provider for consoleService. If we take a look at the factory provider for logDebugger now, we realize that the call side of the logDebugger constructor doesn't match the constructor's signature anymore, because logDebugger now asks for a consoleService dependency.

[01:54] To get an instance of consoleService in the factory function, we can add property, deps, to the provider configuration. deps is a list of provider tokens that map to the dependencies we want to inject. In our case, we want to inject an instance of consoleService.

[02:10] All we have to do is to add the token for consoleService. Now, the cool thing is that all dependencies which are declared through their tokens on the deps property will now be injected into our factory function in the same order.

[02:24] In other words, since we have added the consoleService token to deps, we now get an instance of consoleService, which we can then pass to the logDebugger construction accordingly. We save the file, and see that we get the same output as before, but now consoleService is used to log the message.

[02:45] To wrap it up, we add a provider for a consoleService, so it can be constructed when we ask for it here in the deps property for our factory function, which then gets the actual instance injected, so we can pass it to our logDebugger's constructor.

Course

Angular Dependency Injection (DI) Explained

Use Angular Factory Providers with dependencies

Share this video with your friends