Register a Service to Angular’s Dependency Injection Mechanism

Share this video with your friends

Social Share Links

Send Tweet
Published 6 years ago
Updated 2 months ago

Given that services are simple classes we could just import them in our component via normal ES2015 import statements and then instantiate them accordingly.

However, a service might depend upon other services as well and we definitely don’t want to manually wire up the entire chain of such dependencies. That’s why we have the dependency injector in Angular which will do it for us.

In this lesson we learn how to wire up our service properly by defining a provider that creates our service. We will also see how services defined on NgModule are globally visible because they are hooked up onto Angular’s root injector.

Instructor: [00:02] Since Angular services are plain accuracy classes, we can just instantiate them and use them here in our components.

[00:09] The reality, however, is different, because these kind of services are usually not that simple. They have co-dependencies, as well, which you would then have to here manually wire up and provide to that people service. That's exactly work which you would like to delegate to the dependency injection mechanism.

[00:27] In order to wire up here our people service with the dependency injection mechanism of Angular, we have to create a provider. We do that at the modular level, where we defined our people service. There we have a provider's array here, where we can then import that people service.

[00:46] With that, we have defined an Angular provider, which provides such an instance of a people service whenever someone asks it in the dependency injection mechanism. We can go back here to our app component, and we can simply here use that people service.

[01:04] We can remove this one here, and now Angular will make sure to provide us that people service at run time. As you can see, the example still works.

[01:12] If you take a look again here at the definition of that provider, this is actually the short form of defining it. It is the short form of this one. We have to give it a provide keyword, and this will be the key basically with which we register that service on the dependency injection mechanism.

[01:32] We used to use class, where we say provide here the people service. Basically, whenever you see a token like this, which in this case would match this one here, provide me an instance of this class. What's also important to note here is that this provider will now be visible globally.

[01:52] When we switch, for instance, to our contacts module, which we have set up here, and we go to our contacts list and we import here our people service, as well, as you can see it gets that service here imported. We get injected here. Let's simply do a console of log of this.peopleService.getPeople.

[02:17] Now to jump back to our app component and actually use that app contact list, so that it gets activated. If we now open up the dev tools, we can see here that the array gets locked out from our contact list component.

[02:33] Therefore, it shows that that people service is visibly globally, even though the contacts module, in this case, doesn't even mention or import people module.

egghead
egghead
~ 36 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today