Scribd
Upload
44 views1 page

Services

This document discusses refactoring code to call an HTTP endpoint to retrieve a list of courses from a server into a reusable service class rather than directly in the component class. Calling the endpoint directly in the component class would tightly couple it to the server and make unit testing difficult. Instead, a new "CoursesService" class is created to encapsulate the data retrieval logic. The component class is updated to get the course data via the service rather than calling the endpoint itself. This decouples the component from the data retrieval implementation and allows both code reuse and isolated unit testing of each class.

Uploaded by

AMAN SINHA
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
44 views1 page

Services

This document discusses refactoring code to call an HTTP endpoint to retrieve a list of courses from a server into a reusable service class rather than directly in the component class. Calling the endpoint directly in the component class would tightly couple it to the server and make unit testing difficult. Instead, a new "CoursesService" class is created to encapsulate the data retrieval logic. The component class is updated to get the course data via the service rather than calling the endpoint itself. This decouples the component from the data retrieval implementation and allows both code reuse and isolated unit testing of each class.

Uploaded by

AMAN SINHA
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 1

Now we have the list of courses here but in a real world application most of the time we get these

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.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy