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" 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 explains the need for services to orchestrate data coming to and from the server, demonstrates how to uses services, and use services to render data on the UI.

Get Unlimited Access Now

Transcript from the "Services" Lesson

[00:00:00]
>> As an Angular developer. I think one of the most fundamental mistakes that new Angular developers make, and that is, that there's not a proper abstraction from component functionality to functionality that exist in the server. And so I'm now gonna start to kinda touch on state management. And so I'm just going to hint at this.

[00:00:29] And, the one thing that I wanna point out, Is as we look at our components, What do we notice about them? And so, I'll just condense this down that it's a class. And if we look at our module, what do we notice? It is a class. And, so now the question is, when you have a component that has data, that you need to share with another component, what do you do?

[00:01:27] And the answer is, well, you abstract that data or that functionality into a higher abstraction that both of those components can then share. And so, for instance, if we go to the app, and we have the courses route with that feature, and if we went to the home component or the home route, let's say I wanted to also add in courses.

[00:02:06] Well right now, the courses data structure exists naively which is fine as we iterate in the courses collection that's local to the courses component. And so, what we need to do is, I call this refactoring through promotion cuz we need to promote this functionality or the minimum this data structure into a service.

[00:02:38] And then share it with any component that's interested or needs that data. So, we're going to do this as a service. And so, let's hop into our command line and I'm going to generate this so ng g s. And, let's go with typically what I'll do is anything that is shared, I'll either put it in a common or a shared directory, so put the services, group them together, and let's go with courses.

[00:03:26] So what I wanna do is create a shared courses service. Let me just do a dry run and see what is going, To happen, all right? And so this command here, I'll just, Put this up here, so it's ng g for generate, s for service, shared/services/courses, and this is going to generate the services core.

[00:03:57] So I'll put this back up, and I'm taking the d flag with the dry run flag off, and I'm going to generate this. All right, so what this has done is it's generated not only the service but the service spec, and so now I have eight courses service.

[00:04:18] Now, when I happen to this class, what do you think that we're going to see or the service, what are we going to see? Well, wanna pull this up, and, Lo and behold, it's another class. And so there is one slide that I do want to show, and it's in here.

[00:04:45] I know we have been pretty light on slides, I've just enjoyed coding with everybody. But, everything that we do in Angular is just a class, what? So when you do a component, or a directive, or a service or a pipe, it is simply a JavaScript class with some metadata, hooking it back in to Angular.

[00:05:17] And so, this is actually a pretty short module in the sense that we already fundamentally kind of understand what we're doing. Or we kind of understand the shape, because of component classes. So, now we have this CoursesService and so let's start to refactor this. So what I'm gonna do is I'm going to copy this structure out, and I'm going to paste it into the courses service.

[00:06:05] And, Just like a class now that that's here, it is available. But, what we need to do is we need to make it available to the rest of our application. And so, we're gonna go in here into the app component or rather the app module, and in providers, and so, imports are for modules.

[00:06:39] Declarations are for components and providers are for services. So we'll go Courses service so I'm just going to add this in. And then, now that it's in my module, I'm going to come into my component. And I'm going to inject this. And so, if anybody's done AngularJS, they're familiar with this idea of dependency injection.

[00:07:07] Well dependency injection happens in the constructor, or at the constructor as a parameter. And so, I'm going to set private, so I'm going to set a visibility or an access modifier. And I'm going to go courses service and I'm going to type it as, CoursesService. Now, I don't wanna assume prior knowledge, but when you're working with TypeScript, that when you set an access modifier on a parameter in a constructor, then it will automatically assign that to a member of that class.

[00:07:57] So now what I can do is, I can set courses to null here. And then with ng on a net, I can go and this .courses, = this .coursesService, Courses. And if I refresh this, then it should show up but I want to just make sure that or prove that I am indeed pulling from this service.

[00:08:44] So, back to here, let's look at the app. Let me refresh. And you'll notice now that the courses that I'm pulling in is coming from the service