Register a Service to Angular’s Dependency Injection Mechanism

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.