Harnessing Angular’s Dependency Injection
When creating a dynamic web application, the Angular framework does a lot of the heavy lifting for you.
One of Angular’s key functions is dependency injection, which is how we can share logic between classes.
But what if we wanted to use this powerful feature in a standalone class? Is that even possible?
Yes, it is! And it’s surprisingly easy to set up.
Let’s walk through an example and I’ll show you exactly how to do it.
A Basic Example
Let’s say that you are working on an application that features posts with timestamps.
In this application, you have a class that represents the post, which, for simplicity’s sake, we’ll call “Post.”
Since you want to centralize the logic for formatting the display of that post’s timestamp, you plan to create a function for this named “getFormattedTimestamp.”
Below is a version of this class and function that would use the Angular DatePipe.
In the class above, the DatePipe is being passed in using the constructor.
This certainly works, but it makes this class and everywhere it’s used a lot less maintainable.
What if you choose to use some other injected item later? Or, down the road, you decide to use a service other than DatePipe?
That could get messy and costly very quickly.
There’s A Better Way!
If you could get the injected resource directly from within the static class, you could eliminate the constructor parameter and make this class more self-contained.
Through the use of a global injector, this can be achieved.
What is a global injector?
A global injector is when you take the injector object by itself and store it in a global variable. This allows you to use dependency injection from any file within your Angular application, including static files like the Post class.
Below are files showing how to set up the global injector.
Now that you’ve set up the globalInjector object, you can refactor the Page class to use it as seen below.
In Conclusion
By using these techniques, you can harness the power of dependency injection throughout your entire angular application, even when dealing with static files.
This leads to a much more maintainable and extensible application structure.
This post was originally published by Chris Camac and is the second in a series of musings, how-to’s, and experiences from our Software Engineering team. We hope you’ll find it as helpful and informative as we do. Republished with permission.
To keep up with more of Chris’ work, you can follow him on Twitter @PilgrimSecret
