Power of Angular Dependency Injection

In “You don’t know Angular Series” today, we will explore the most interesting coding pattern which is typically used to enhance efficiency and modularity of our applications.

The services or objects which our class needs to perform its operations are called dependencies. We inject these dependencies in our classes. In Angular, these dependencies are provided to the classes at the class initialization.

In this post, we are not going to see “How DI works” but we will try to learn two powerful features of Dependency Injection which will give our applications enough modularity and efficiency.

Removing Hardcoded API Endpoints:

Hardcoded API Endpoints in a single file are some day to day Frontend problems. To explain this, let’s take an example:

I am using a third party API say /api/v1/dialogflow/. Now, the API team has changed the endpoint to api/v2/dialogflow/. Please be honest with you, how many files you are going to change for this v1 to v2 change :p

When we start writing code, we don’t realize the scalability issues. The ideal solution is to change only one file so that it can inject that dependency in all other files. But, how can we achieve this?

The solution to this problem is to learn theuseValue property inside NgModule.

app.module.ts

Whatever we declare as a useValue, can be injected into the services as a variable, it means we no longer have to hardcode our variable into the services :)

To inject it into our service, we will use Inject decorator from @angular/core. Finally, we can access the Injected variable with this keyword.

main.service.ts

Here, the value of the keyprovide in the providers array of app.module.ts will be matched with the argument of Inject Decorator. The this.api logs the complete endpoint in the console asapi/v5/dialogflow.

Using Injected Tokens

The previous method of injecting variables helps you in modularity but is not scalable. With the hardcoded provide key as api we are not allowed to use the same key with a different useValue.

providers: [
{provide: 'api', useValue: 'api/v5/dialogflow'},
{provide: 'api', useValue: 'api/v5/dialogversion'}
]

The code shown above is not going to work, as it refers to the same hardcoded instantiation i.e api.

We need to create an object of InjectionToken class and have to remove the hardcoded value api. In this way, we will be able to create multiple instances and can use them inside our providers array. We have written the token.ts as follows:

The InjectionToken from @angular/core helps us to achieve this as shown in the example above. We can then replace our hardcoded api in both service and module.ts files.

The TOKEN’S can be injected into the service after importing it from token.ts.

Now, we can inject all the tokens into our app.module.ts as well.

Even if we have many services using the API endpoints, updating the useValue once updates the dependencies of all of them wherever the TOKEN is injected. InjectionToken helps to make the code modular without any hassle of figuring out where you have written your endpoints or variables.

Conclusion and Next Steps

Okay, so in this post, we’ve learned the powerful concepts of Dependency Injection.

I have tried my best to help with the complete code. In case you need to clone the code, report any issues, you can check the repository:

If you liked the article, please clap your heart out. Tip — Your 50 claps will make my day!

Want to know more about me? Please check out my website. If you’d like to get updates, follow me on Twitter and Medium. If anything isn’t clear or you want to point out something, please comment down below.