Share a Service Across Angular 2 Components and Modules
Services are used to share data between components. They follow a module pattern that allows you to use the data throughout your application so that your data is consistent and in sync.
[00:00] To illustrate the difference between smart components and presentation components, first we need to make a service, so let's go ahead and create a services directory /simple.service.ts. This service is injectable.
[00:17] We export class simple service, and this will have a message saying hello from the simple service. To share this service across modules, we create a service module. We'll just call it services.module.ts, and this is ng module as well.
[00:44] Since we're going to share these services across our entire application, we don't really need to declare anything in here. We're going to export a class called services module.
[00:58] Have a static method on it called for route, which returns an object, and on that object, we'll say the module is going to be services module, and the providers are going to be simple service.
[01:17] This is going to help it so that the same instance of simple services used throughout the application, so that in my App module, when I import my services module, I'm actually going to say for route and invoke that static method off of it.
[01:32] That way, instead of giving me the configuration that usually comes from here, I'm actually giving this object, which has an ng module pointing to itself, and then listing the providers in here so it gives us that same simple service throughout the application.
[01:46] Now because that's configured an App module, that service is actually available inside of all of our components.
[01:52] So if I go into home component, I can use the dependency injection syntax to inject, I'll say private simple service, and simple service, and you'll see that the export here automatically, the one the WebStorm picked up was from simple.service.
[02:11] A good practice here is actually in your services module to export all of the things that you import and want to use inside of this module. That way, in your components, I can import this from the services module.
[02:29] I'll still get the same thing, but inside of the services module, it's going to allow me to refactor and change things here, as long as I still export something called simple service.
[02:40] I can change as much as I want underneath the hood of this entire module. So this module is kind of a wrapper around this directory, and then re-export everything from this module.