Services
Services
Services
queries as from the server so instead of hardcoding them here we need to call an HTTP endpoint to get
the list of courses here we have two options one is to add the logic for calling and HTTP service here in
this component but there are a couple of problems with this approach the first problem is that this logic
is going to tightly couple this component to that HTTP endpoint now in the future when we want to
write unit tests for this class we don’t want to be dependent upon the live HTTP endpoint because this is
going to make it harder to execute those unit tests so we want to create a fake implementation of an
HTTP service so this is the first issue with writing this logic inside this class inside this component it’s
going to tightly couple this component with that HTTP endpoint the second issue is that maybe
somewhere else in the application we’re going to have another page where we display the list of courses
maybe it’s part of a dashboard maybe somewhere for an admin with this implementation we have to
repeat this logic the logic for consuming that HTTP service in multiple places and that’s not good and
finally the third issue with this implementation is that a component should not include any logic other
than the presentation logic that is the logic behind this view what should happen when we click a button
when we select an item from a drop down list and so on details of how courses are retrieved should be
delegated somewhere else in your application so where should we implement that logic in angular we
use services for that so we're going to define a separate class which we call a service and there we'll add
this logic for getting the list of courses from an HTTP service then we can reuse this class in multiple
places so let me show you how to do that here in the app folder I’m going to add a new file now look at
the naming convention courses dot service dot TS so the name of our service is courses and by
convention we have the word service in the file name finally dot TS when creating a component we use
horses does component TTS so note that difference now here once again you want to export the plain
TypeScript class so export glass horses service so once again by convention you add the word service as a
suffix and the class now when creating components we decorate this class with the component
decorator remember component but in angular we don’t have a decorator for services so a service is
essentially a plain TypeScript class so delete now here we want to add a method for getting the list of
courses get courses or now we don’t want to get distracted with the complexity of consuming an HTTP
service so let’s just return the same array that we had in our component and later I will show you how to
consume an HTTP service so back in our component I’m going to select this all right here cut that kind of
service and simply return it from this method now imagine here in this method we have that logic or
consuming an ecstatic service with this implementation we can reuse this class we can reuse this logic in
multiple places in our application and also this will separate or decouple our component from this logic
so back in our component here we’re not going to have any logic for consuming an HTTP service and this
allows us to unit test this class without dependency upon that HTTP endpoint so while unit testing in this
class we can provide a fake implementation of that service if that's too complicated don't worry about it
unit testing is something for the future OK now we have a service we need to use this service in our
component how that's the topic for the next lecture.