Building Awesomer Apps with Angular Services Demonstration
This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Services Demonstration" Lesson
>> Lukas Ruebbelke: I really do not want to solve your next challenge for you, so I'm gonna create a service, and we'll go from there. But it's not going to be a widget service, it's not going to be so easy. One thing I do wanna mention is that the question came up over lunch.
[00:00:20] Do you always put your services in kind of a shared or common folder? And the answer is, that depends. So the reason why I think you want to find the appropriate level of abstraction for the things that you're working on. So if I knew for a fact that I was in this widget's component, and I needed to call and get widgets from the server.
[00:00:51] And this widget's collection was never, ever, ever, ever, ever, ever going to exist or need to be used outside of the widgets component, I would put it at that level of abstraction. But, because i know that I may want to use widgets somewhere else, aka the home screen or the home component, that it needs to be shared across two components.
[00:01:21] And so, generally anything that communicates to a server that I will put it in the shared folder, just by default. And then what I will also do is, as I start to grow in complexity is, let's say there was 20 services in here. In the shared folder, I'd start to look and be like okay this is getting out of hand.
[00:01:43] We need to actually go and create yet another level of abstraction and kind of start to move things around. So, if you actually look like a full on, like a redux application, cuz a lot of times, you'll have your reducers in a folder, services in a folder, you know etc.
[00:01:56] So there's a few ways to do this, it's a bit art and science. But you want to have a level of abstraction that meets the needs of consumption. So if more than one component needs a service, well then, promote it to a shared folder. All right, with that said, let's create a service and,
>> Lukas Ruebbelke: We'll just call this caffeine service.ts, probably because I was thinking about Red Bull right now.
>> Lukas Ruebbelke: So when I create a component, Cider.
>> Speaker 2: Class
>> Lukas Ruebbelke: Lets do it the same thing, so export class. I just love the fact, that it just knows, you probably want to do this, and then from here, let's go injectable.
>> Lukas Ruebbelke: And remember, this is where you will get burnt as I have been burnt. If I walked away right now and I'm like, I'm out of here, this is done, I'd get into trouble because decorators are functions. You have to call the function, and so I've basically done injectable.
[00:03:12] And I'm like, I've imported I'm ready to go and I forget to actually call the function in the break. So just make sure that even though you've done the import and you've decorated it. Until you actually do that function call, nothing's going to happen. Okay, so I've created the service, and let's just create an array.
[00:03:35] We'll go red bull,
>> Lukas Ruebbelke: What's an energy drink that people like here?
>> Speaker 3: Monster.
>> Lukas Ruebbelke: Monster, I got Monster. What's that one I was like?
>> Speaker 4: Rockstar?
>> Lukas Ruebbelke: Rockstar, okay, I think we're good. I wanna make like a cocaine joke here but that might not be appropriate. Let's go,
>> Lukas Ruebbelke: All right, how's that?
>> Speaker 5: How about four Loco?
>> Lukas Ruebbelke: That's what I was trying to remember, so what is it?
>> Speaker 5: Four loco, number four and then, yeah.
>> Lukas Ruebbelke: Yeah, which I think is illegal in every state now.
>> Lukas Ruebbelke: Okay, so it's a property on my service, I can now, once I consume this properly, I can bind to this.
[00:04:28] So I've created this service, what's the next thing that I need to do?
>> Speaker 6: Create functions.
>> Lukas Ruebbelke: So I've kind of enhanced it, but I need to consume it somewhere. But before I can actually consume it, I need to expose it. So you're on the right track. So I created it, and now let's go into our app module, we'll go caffeine service.
[00:05:04] It picked it up and now you'll notice here that this did a single import, but what we can also do is, you'll notice this index.ts here. So this is a similar thing to what I was doing with the angular material modules, is I'm basically creating what's called a barrel roll.
[00:05:26] And so I'm saying, I'm going to create a single top level module that is going to export everything.
>> Lukas Ruebbelke: And so now what I can do is in my app module,
>> Lukas Ruebbelke: And so this is kind of the barrel roll. Cuz if there's an index.ts, it just assumes that it's kind of like an index.html on a web browser, like that's kind of the default.
[00:05:59] And that's where it looks first, so, kind of a node nothing happening here but, and so I don't have ten lines of imports, is that I'll just create this barrel roll. And I will export everything into then I can just pull everything in a single input statement, okay?
[00:06:16] So, caffeine service. I have created this service, expose the service, now let's consume the service. Let's go with home, that's kind of a good place.
>> Lukas Ruebbelke: And, so I need to get this into my service, dependency injection only into my component. Dependency injection to the rescue. So, we'll go private, caffineService, CaffineService, and then I'll put a comma here.
[00:06:59] And so now, we're injecting it in. And then I can go here, and I can say let's do sources.
>> Lukas Ruebbelke: Leave it like this, then I could say this.sources, so again just dealing with properties, equals this.caffeineservice.sources whoa. And now I'm just saying, take this property off of this, or the value on this property, and assign it to this local property, and then from here, we can,
>> Lukas Ruebbelke: Let's just do an ngFor real quick.
>> Lukas Ruebbelke: Not an ngFor, there we go, let source of sources.
>> Lukas Ruebbelke: Refresh the page, let's go home and there we have it. So the big thing here is create, expose, consume, CEC. If only that was a clever word. So I've created the caffeine service.
[00:08:21] I've exposed the caffeine service via the app module, and then over here I am consuming it. And from there you can consume properties and methods just like you would anywhere else.
>> Speaker 7: So, we can alter our borders directly on the component instead of the module, right? Because right now we are just putting it on the module, and then everyone in the module has access to those borders.
[00:08:46] But instead of them on the module we can just put it on the component, which is currently using it, given that right now we've mostly component.
>> Lukas Ruebbelke: So I think it has to go into the module, in order for angular to know about it. Dependency injection is not going to work unless, as far as I know I think.
>> Speaker 7: Because otherwise then lazy loading of the component won't work, right?
>> Lukas Ruebbelke: Right.
>> Speaker 7: Because if I'm lazy loading a component, then only those component aspects would have to be loaded at once. So I'm just thinking about it like,
>> Lukas Ruebbelke: You could possibly get it to work without putting it on module, and so for instance.
>> Speaker 7: Import caffeine service here, and just provide us in the component.
>> Lukas Ruebbelke: So you notice it's being imported here but, if I go, let's just see what happens. And I really hope this explodes. I hope this is messy.
>> Speaker 7: When, and you can add it to the caffeine, you would have to add it on the component as provider.
>> Lukas Ruebbelke: So you're saying, there's no provider, so it hasn't been registered.
>> Speaker 7: Yeah, but if you go into the component.
>> Lukas Ruebbelke: I think you can, but it's considered.
>> Lukas Ruebbelke: This is kind of anti best practice. So I think you can do this. If you really want to, let's see.
>> Lukas Ruebbelke: So it works, but you're kind of limiting your options in terms of latency loading and these different things like that. As well as when you, this is actually a good point. So this is now only available to this component. And so now if I needed it into like another service, or another component, I'd have to do this here.
[00:10:39] So it's much easier to do it at the module level, and let the module handle it.