4. Add services
Last updated
Last updated
The Tour of Heroes HeroesComponent
is getting and displaying fake data.
Refactoring the HeroesComponent
focuses on supporting the view and making it easier to unit-test with a mock service.
Components shouldn't fetch or save data directly, and they certainly shouldn't knowingly present fake data. They should focus on presenting data and delegate data access to a service.
This tutorial creates a HeroService
that all application classes can use to get heroes. Instead of creating that service with the , use the that Angular supports to inject it into the HeroesComponent
constructor.
Services are a great way to share information among classes that don't know each other. Create a HeroService
next and inject it in the HeroesComponent
, to provide hero data.
HeroService
Run ng generate
to create a service called hero
.
The command generates a skeleton HeroService
class in src/app/hero.service.ts
as follows:
The HeroService
could get hero data from anywhere such as a web service, local storage, or a mock data source.
Removing data access from components means you can change your mind about the implementation anytime, without touching any components. They don't know how the service works.
The implementation in this tutorial continues to deliver mock heroes.
Import the Hero
and HEROES
.
Add a getHeroes
method to return the mock heroes.
HeroService
You must make the HeroService
available to the dependency injection system before Angular can inject it into the HeroesComponent
by registering a provider. A provider is something that can create or deliver a service. In this case, it instantiates the HeroService
class to provide the service.
To make sure that the HeroService
can provide this service, register it with the injector. The injector is the object that chooses and injects the provider where the application requires it.
The HeroService
is now ready to plug into the HeroesComponent
.
HeroesComponent
Open the HeroesComponent
class file.
Delete the HEROES
import, because you won't need that anymore. Import the HeroService
instead.
Replace the definition of the heroes
property with a declaration.
HeroService
Add a private heroService
property of type HeroService
to the component.
The parameter simultaneously defines a private heroService
property and identifies it as a HeroService
injection site.
getHeroes()
Create a method to retrieve the heroes from the service.
ngOnInit()
While you could call getHeroes()
in the constructor, that's not the best practice.
Reserve the constructor for minimal initialization such as wiring constructor parameters to properties. The constructor shouldn't do anything. It certainly shouldn't call a function that makes HTTP requests to a remote server as a real data service would.
Important! The class should implement the matching Interface:
After the browser refreshes, the application should run as before, showing a list of heroes and a hero detail view when you click a hero name.
The HeroService.getHeroes()
method has a synchronous signature, which implies that the HeroService
can fetch heroes synchronously. The HeroesComponent
consumes the getHeroes()
result as if heroes could be fetched synchronously.
This approach won't work in a real application that uses asynchronous calls. It works now because your service synchronously returns mock heroes.
If getHeroes()
can't return immediately with hero data, it shouldn't be synchronous, because that would block the browser as it waits to return data.
HeroService.getHeroes()
must have an asynchronous signature of some kind.
In this tutorial, HeroService.getHeroes()
returns an Observable
so that it can use the Angular HttpClient.get
method to fetch the heroes and have HttpClient.get()
return an Observable
.
HeroService
In the tutorial on HTTP, you can see how Angular's HttpClient
methods return RxJS Observable
objects. This tutorial simulates getting data from the server with the RxJS of()
function.
Open the HeroService
file and import the Observable
and of
symbols from RxJS.
Replace the getHeroes()
method with the following:
of(HEROES)
returns an Observable<Hero[]>
that emits a single value, the array of mock heroes.
HeroesComponent
The HeroService.getHeroes
method used to return a Hero[]
. Now it returns an Observable<Hero[]>
.
You need to adjust your application to work with that change to HeroesComponent
.
Find the getHeroes
method and replace it with the following code. the new code is shown side-by-side with the current version for comparison.
Observable.subscribe()
is the critical difference.
The previous version assigns an array of heroes to the component's heroes
property. The assignment occurs synchronously, as if the server could return heroes instantly or the browser could freeze the UI while it waited for the server's response.
That won't work when the HeroService
is actually making requests of a remote server.
The new version waits for the Observable
to emit the array of heroes, which could happen now or several minutes from now. The subscribe()
method passes the emitted array to the callback, which sets the component's heroes
property.
This asynchronous approach works when the HeroService
requests heroes from the server.
This section guides you through the following:
Adding a MessagesComponent
that displays application messages at the bottom of the screen
Creating an injectable, application-wide MessageService
for sending messages to be displayed
Injecting MessageService
into the HeroService
Displaying a message when HeroService
fetches heroes successfully
MessagesComponent
Use ng generate
to create the MessagesComponent
.
ng generate
creates the component files in the src/app/messages
directory and declares the MessagesComponent
in AppModule
.
Edit the AppComponent
template to display the MessagesComponent
.
You should see the default paragraph from MessagesComponent
at the bottom of the page.
MessageService
Use ng generate
to create the MessageService
in src/app
.
Open MessageService
and replace its contents with the following.
The service exposes its cache of messages
and two methods:
One to add()
a message to the cache.
Another to clear()
the cache.
HeroService
In HeroService
, import the MessageService
.
Declares a private messageService
property. Angular injects the singleton MessageService
into that property when it creates the HeroService
.
HeroService
Edit the getHeroes()
method to send a message when the heroes are fetched.
HeroService
The MessagesComponent
should display all messages, including the message sent by the HeroService
when it fetches heroes.
Open MessagesComponent
and import the MessageService
.
Declare a public messageService
property. Angular injects the singleton MessageService
into that property when it creates the MessagesComponent
.
The messageService
property must be public because you're going to bind to it in the template.
Angular only binds to public component properties.
MessageService
Replace the MessagesComponent
template created by ng generate
with the following.
This template binds directly to the component's messageService
.
@if
Only displays the messages area if there are messages to show.
@for
Presents the list of messages in repeated <div>
elements.
Binds the button's click event to MessageService.clear()
.
The following example shows how to display a history of each time the user clicks on a hero. This helps when you get to the next section on Routing.
Refresh the browser to see the list of heroes, and scroll to the bottom to see the messages from the HeroService. Each time you click a hero, a new message appears to record the selection. Use the Clear messages button to clear the message history.
Here are the code files discussed on this page.
You refactored data access to the HeroService
class.
You registered the HeroService
as the provider of its service at the root level so that it can be injected anywhere in the application.
You gave the HeroService
get data
method an asynchronous signature.
You discovered Observable
and the RxJS Observable
library.
You used RxJS of()
to return Observable<Hero[]>
, an observable of mock heroes.
The component's ngOnInit
lifecycle hook calls the HeroService
method, not the constructor.
You created a MessageService
for loosely coupled communication between classes.
The HeroService
injected into a component is created with another injected service, MessageService
.
Notice that the new service imports the Angular symbol and annotates the class with the @
()
decorator. This marks the class as one that participates in the dependency injection system. The HeroService
class is going to provide an injectable service, and it can also have its own injected dependencies. It doesn't have any dependencies yet.
The @
()
decorator accepts a metadata object for the service, the same way the @
()
decorator did for your component classes.
By default, ng generate service
registers a provider with the root injector for your service by including provider metadata, that's providedIn: 'root'
in the @
()
decorator.
When you provide the service at the root level, Angular creates a single, shared instance of HeroService
and injects into any class that asks for it. Registering the provider in the @
metadata also allows Angular to optimize an application by removing the service if it isn't used.
To learn more about providers, see the . To learn more about injectors, see the .
This is an interim code sample that allows you to provide and use the HeroService
. At this point, the code differs from the HeroService
in the .
When Angular creates a HeroesComponent
, the system sets the heroService
property to the singleton instance of HeroService
.
Instead, call getHeroes()
inside the and let Angular call ngOnInit()
at an appropriate time after constructing a HeroesComponent
instance.
Observable
is one of the key classes in the .
The shows you how to call HttpClient.get<Hero[]>()
, which also returns an Observable<Hero[]>
that emits a single value, an array of heroes from the body of the HTTP response.
Angular
The messages look better after you add the private CSS styles to messages.component.css
as listed in one of the tabs below.
You used to inject it into a component.