Check out a free preview of the full Production-Grade Angular course

The "Creating a Service" Lesson is part of the full, Production-Grade Angular course featured in this preview video. Here's what you'd learn in this lesson:

Lukas demonstrates how to build a service that creates, updates, deletes, and finds widgets within the dashboard application started previously.

Preview
Close

Transcript from the "Creating a Service" Lesson

[00:00:00]
>> Let's go ahead and let's start to consume this. So, Accidentally closed this, let's open this back up and, Let's go widgets.service. And you'll notice here that we're not doing much. For the sake of time, I am going to copy some of this. Now what I'm gonna do is, I'm gonna copy the guts, but I'm gonna talk through some of this real quick because I think it's important to see, One of the const API.

[00:01:32]
What I would actually do at some point is I would replace this with a config file or a config value, all right? I feel like I pasted this service inside the service, All right. So what I wanna call out here is we start to work with this, is that I have an API endpoint, which is not going to change typically from one environment to the other.

[00:02:25]
Then I have In this case, the model, which is the widgets, and then based on what I'm trying to do, I either need to do one of two things, either get the URL or get the URL with the ID. And so, I can create a method called for instance, all.

[00:02:46]
And back to this real quick, I'm gonna copy this so I don't have to stumble over it. And I'm gonna just kind of burn through this, but I want us to see kind of some of the consistency here. I go return this.http, and we know what the verb is gonna be, it's get.

[00:03:16]
And then what we can do is we can type this, and so we're gonna get a widget, or rather an array of widgets. And then we're just gonna pass in geturl, Right here, but this is a method. Now I can take this and, I can, Go find, so I'll call this find, and I'll pass in a string.

[00:03:54]
So I wanna get a specific, Particular widget based on the ID. So I can do geturl with ID, and I can pass it in. Now notice, this is the same, almost the same exact method as the one above it. And then I can come here and I can do create.

[00:04:21]
And what this would take is a widget, we'll type it. And now from here, we're going to post. And we'll untype this, and we're gonna update the call here. And we're gonna pass in the widget, Which is still pretty close if I go here to update. Very, very close, the difference, really post and put are almost identical.

[00:05:06]
I just like to use put when I'm updating something, cuz I think it's a little bit more, I think descriptive of what you're doing. And, Geturl with ID. Still very, very, very, very close. And then from here, let's do one more, And it'll be delete. And this will just take in a widget as well, the difference is we're gonna go delete.

[00:05:46]
And you're good to go. This is a very, very consistent shape that we're going to use a lot.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now