Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Register a Service to Angular’s Dependency Injection Mechanism

    5 - 7

    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.



    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In




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

    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.

    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.

    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.

    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.

    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.

    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.

    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.

    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.

    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.