3 Angular Dependency Injection Tips

Joe Eames
Joe Eames
Sep 7 · 3 min read
Image for post
Image for post

Angular’s Dependency Injection System is a magic way to deliver the classes that house your business rules, or encapsulate other functionality, to your components. Here are three tips for using the dependency injector that are good to keep in mind as you learn, use, and master Angular.

1. Prefer ProvidedIn

When you create services, by default, use the ProvidedIn setting to put those services into the root injector. This gives you the safest, easiest and simplest way to create services. You won’t forget to add them to your module, and this method works best for 99.9% of all use cases. It looks like this:

Image for post
Image for post

The string ‘root’ has to be exactly that. That registers your service, and lets you just keep coding, no need to open up your module file and add it there. Easy Peasy.

2. Learn useValue

We default to only using services that are “classes” meaning full-on, constructed classes with properties, methods, etc. But what if you have an object you got from somewhere that you’d like to use, such as from a 3rd party library, or a JSON file, or what if you want to inject just a single value, like a timeout value.

Image for post
Image for post

Or maybe a collection of values

Image for post
Image for post

There’s no functionality here, so a class can be overkill. And if you get these values from somewhere else, you would need to then wrap them in a class.

To make this easier, you can just take single values, or simple objects, and create services out of them if you learn the useValue provider. You can find documentation on that here.

3. Non-Root Injection is a Code Smell

When creating services, registering them in the root injector is the default, which you can do using either the ProvidedIn syntax shown above, or by registering it in the providers section of your app.module file.

There are plenty of reasons to register a service somewhere else besides your root injector, and instead provide them in a component, a directive, or in a pipe. But whenever you use one of these methods, you should DEFINITELY understand what you’re doing, and the ramifications of that decision. So always consider this method a code smell. If you are considering using it, double-check that you are making a good decision, and actually need to do that.

And there you have it: three tips for Angular’s dependency injection.

Happy coding!

Signup for my newsletter here.

Visit Us: thinkster.io | Facebook: @gothinkster | Twitter: @GoThinkster

Joe Eames

Written by

Joe Eames

Mormon, Christian, Father, CEO of Thinkster.io, Organizer of @ngconf, @frameworksummit, React Conf. Front end developer, and Software Craftsmanship Evangelist.

Thinkster.io

Top Quality Tutorials

Joe Eames

Written by

Joe Eames

Mormon, Christian, Father, CEO of Thinkster.io, Organizer of @ngconf, @frameworksummit, React Conf. Front end developer, and Software Craftsmanship Evangelist.

Thinkster.io

Top Quality Tutorials

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store