Angular 9 Fundamentals

Angular 9 Fundamentals Services Solution: Building a Service


This course has been updated! We now recommend you take the Angular 13 Fundamentals course.

Check out a free preview of the full Angular 9 Fundamentals course:
The "Services Solution: Building a Service" Lesson is part of the full, Angular 9 Fundamentals course featured in this preview video. Here's what you'd learn in this lesson:

Lukas live codes the first part of the solution to the services exercise, and starts by creating a new service.

Get Unlimited Access Now

Transcript from the "Services Solution: Building a Service" Lesson

>> Let's get into our services challenge. So what we need you to do is create a lesson service and then move this course lessons data structure into the service and then service it back to our components. So from the command line, we'll just go ng g s. And so this is just short for ng, generate service and we're gonna go shared/services/lessons -d for dry run, and it looks good to me.

[00:00:43] Make sure I didn't spell anything wrong. And we'll add this in, good to go. And then what we'll do is we're going to, and further conversation, well, I'm going to do this just so we can see in our app module, we're going to go LessonsService. Did that import?

[00:01:13] Yes, it did, very good. And now, let's go into our home component. And we're going to inject this, so we'll go private. LessonsService. And then from here, I'm just going to chop this out. And actually what I'll do, I'll copy that because I'll need that in a moment, and I'll just set this to null.

[00:01:56] Now, in our, LessonsService, we're going to go here and what I'm gonna do is I'm just gonna call this lessons, it seems to me a little bit more semantically correct. And then what I'm gonna do is I will set this to private since I did this in the previous example.

[00:02:23] And we'll just go all return this lessons, all right? Now, back in our home component, when we go to ngOnInit, will go this.courseLessons = this.lessonsService.all, so we'll call this now, just so we can see this in action. If I take this private off, notice that it doesn't exist on type home component.

[00:02:55] And so this is kind of some TypeScript voodoo magic where if you add in this access modifier, then it adds it as a member of the class. So let me save this. Let me go back to my lessonsService and let me just create some, One more maybe possible data structure in here.

[00:03:23] And we're gonna have a lesson on YOLO, all right? We'll hop in here and let's go into go home, there we go. So pretty straightforward, the one thing that I'll do in closing on this challenge is that I find like the most kind of grievous things that happen in an application such as hidden state breaking the single responsibility principle nested logic structures.

[00:04:01] And in this case where you have, essentially logic and the wrong abstraction, in theory is that we saw how quickly I was able to just extract or extract out that data structure and move it into its appropriate place. And so I think the thing here is when you have something in your codebase, where you got this large, monolithic component, it's very easy to start to move that and break that out into its appropriate classes.

[00:04:33] And so this is when I talk about refactoring by promotion, this is really what it comes down to. It's actually pulling out something that doesn't belong at that abstraction or at that level, and then moving it into a smaller, more precise, fine grained method or class that handles just that thing.

[00:04:51] And so it's a lot of just pulling things apart and putting them into their place.