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

Lukas discusses using angular services to allow functionality and data sharing between components. Defining a service, exposing a service using NgModule, and consuming a service via dependency injection in the constructor are also covered in this segment.

Get Unlimited Access Now

Transcript from the "Angular Services" Lesson

[00:00:00]
>> Let's talk about Angular services. So everything we've done up to this point has been within the context of a component. And the challenge is what happens when you have data or functionality that needs to be available for more than one component? So for the longest time the most popular question on Stack Overflow for AngularJS was how can two controllers share data?

[00:00:34] And so the answer here is that if you have functionality or data that needs to be shared across multiple components, well, you do that with a service. Now at this point, I am hoping that you've started to notice a bit of a trend in that when we define a model, when we define a component.

[00:01:00] That there is something very similar about those particular mechanisms that we're going to see even more so in Angular services and that is, everything is just a class. And so when I realized this, I had kind of a wat moment, and I started looking at all of the things that I was using in Angular.

[00:01:31] And I realised that when I'm using a module, it's a class with some metadata. If I'm building the pipe, class metadata, components, obviously we've seen it. Class metadata, services, directives everything that we do in Angular is a class with some metadata. So in the case of a service, we create a class, we define our methods and then we make this available using injectable and typically provide in root.

[00:02:07] And you can expose it directly to entry module in the providers, but again, typically I forego this unless I have a good reason by using provide in root. And then when we want to consume it, well, we do this via dependency injection in the constructor so, With that said, we're done with this module.

[00:02:36] Just kidding, we got a code demo, but then we're done with this module. I'm taking this really seriously. All right, so let's hop into the code. Let me just make sure I am on an appropriate branch. Zoom is being not cool. There we go, all right. So we are going to, Take what we have this far, and we are going to build out some services.

[00:03:11] So in our courses component, we have this data structure here courses. And we're going to extract that into a courses service. So if we hop into our command line, we're going to go ng g s will go common/services/courses. Let's go d just to make sure that everything is in the right place.

[00:03:46] So common/services/courses, there we go and, Let me go ahead and I'll take off the dry run flag here and let's go ahead and hop back into our code. And if we look inside of our common folder, we now have services with our courses service. So now what I'm going to do is I'm going to extract this data structure and I'm going to move it over into our courses service.

[00:04:29] So we'll go courses and I'm going to type this as an array of course objects and I'm going to paste this in. Now this is throwing up just a bit or it's angry because you notice here these are numbers and they should be strings so, With that said, I can also get rid of, The constructor, I'm not using it and providedIn root, and so all I've done is I've just picked this up, I've moved it into a service, nothing else has changed.

[00:05:14] And then from here, I can go into my constructor and I can inject this. So I'll go here, private coursesService. There we go and let's save this and then on ngOnInit, we're going to go this.courses = this.coursesService. Courses. All right, and what I wanna do real quick just, To illustrate that we are pulling this from somewhere else.

[00:06:26] We'll go Rapid Application Development Patterns and, I need to make a pretty important note here. THIS MUST BE DONE BY 3.30 OR ELSE! Don't forget! All right, so, Let's hop in here and let's check this out, so now, Here we are. I've just picked up a structure, put it into a service, and then I was able to pull this in.

[00:07:12] So hopefully that was incredible, you're stunned right now with how simple that is. That there are times where something is so easy and so underwhelming that I'm absolutely overwhelmed at how underwhelming it is. In this case, when we're talking about services in Angular, that in most cases it is simply a matter of, Promotion through refactoring, so what I'm going to do is in lieu of a challenge, if you notice here that we have in our home component rather, we have some lessons.

[00:08:01] So I'm going to go ahead and I'm going to create a lessons service, so common/services/lessons. I just do the dry flag, it's kinda muscle memory at this point, we'll go here, like so, we'll generate this and, I'm gonna call this lessons and I'm going to pick this up.

[00:08:30] Now the one thing that actually does not like lessons, which is fix this, save this. We'll go to our home component. I'm going to save this. Let's go into our lessons service. There we go. All right, so lesson service, lessons providedIn root. Let's go into our home component and we're going to make this available, lessonsService.

[00:09:11] LessonsService and then from here, this.lessons = this.lessonsService.lessons. All right, now, Let's see if this is rendering. All right, good, it is. Now since we're here, and since I am freestyling just a bit even though I told myself I would not, I can't help it, it is a sickness.

[00:09:49] But please, if you know the cure don't tell me, I am going to. All right, so now what I've done is just using the from operator, from xjs, I've just taken this lessons array, and I have now converted this into an observable stream. Let's go back to here and, Rather I'm going to, Just set this and so Angular does not like it when I do this, but whatever or it may not.

[00:11:13] All I'm doing here is from the lesson service, I'm just pulling in the lessons string. So what this is a, you can see here it's an observable of this object with the title on it. So we're talking about the async pipe here. If I go back into my home component here and if I change this to the dollar sign, what should happen is it should throw an error.

[00:11:51] Yay, that's the point. So now if I go back, what I can do is I can add in the async pipe, save this and did this, Get upset? Let me check. Let lessons of lessons. This is, well, all right, I'm gonna press pause on this for a sec because I will pick this up in a moment in terms of.

[00:12:45] I'm gonna pull this back off, but we are going to pick this up in component driven architecture. Once we get into component driven architecture, this will make a lot more sense, but setting the stage. So with that said, let's pause for some quick Q and A. And if anybody has any questions about this, I would love to hear it.

[00:13:11]
>> What's the difference between using the providers metadata, else instantiating the class with new?
>> Instantiating the class with new? So Riley, so the question is what's there in using the providers metadata versus instantiating a class with new? Well, so I typically do not new up a class because that is handled within the injector.

[00:13:49] So the injector is responsible for essentially keeping a reference. So you essentially have a key that says, when I'm looking for this thing, here's the reference and then they instantiate it and they keep that on record for you. So I'm trying to think of an instance where I've ever actually instantiated a class manually and typically I don't because I let the injector handle that.