5.2 Creating an Angular Service

Now that we have our models on the back-end exposed via Express and our models on the front-end in the perspective of Angular, it's time to start to glue those things together. And typically, when you're creating Angular-based applications, you're gonna do that via a service. Now this service is gonna be in charge of living in the Angular world on the front-end and then making HTTP requests to the back-end, or to some other application or server or service somewhere, to interact with data. And it just so happens we have one of those. So now we need to create the service. Now, there's a number of different ways you can do this, you can create it by hand. But one of the ways that I like to do it is by using the Angular CLI. We went through the trouble of installing that earlier, why don't we continue to use it throughout the application as much as possible? So let's go ahead and switch back over to a shell in our terminal here. And we're gonna go ahead and create a service using the CLI. So the way that we do that is, we use ng again and then we want to generate. So you can either type out generate or just use the shortcut g. And we wanna generate a service, so we could type out service or we could just type s, so we wanna generate a service. And now we're gonna give it a name. Now, you can just give it a name and hit Enter. And if you do that, it's going to create whatever service you asked it to in the root of your app directory. I don't really want that, I like to kinda keep things together as much as possible. So if I'm creating services, I wanna put them in a services folder. So I'm gonna say services/, and I'm gonna call my service lawn. Now I could call it lawn service, but what Angular is going to do, or what the CLI is going to do, is it's going to append the word service onto the end of whatever you type in here. So if I type in lawn service, it's going to create the lawn service service. So if you wanna have service on the end of it like I do, then you should just leave it off the process we're using right now to create it via the CLI. So I'll go ahead and click Enter, and now it's gonna go ahead and create two files. It's gonna create the lawn.service file, the actual code file as well as a spec file for tests. So let's go in here and take a look, we now have a services folder, and I have my lawn.service.ts. And here is the basic structure or skeleton of a simple service in Angular. So we're gonna go ahead and put a little bit in here and get it kind of set up. We're not gonna do the implementation, we're gonna save that for the next lesson. But there's a little bit of wiring up you have to do when it comes to services as opposed to when you're creating components, which we'll do a little bit later on. So the first thing that we're gonna want to do is we're going to want to talk about what it is we're gonna use to communicate with the backend. And like I said before, we wanna make HTTP requests. And it just so happens that there is something already like that built into Angular that we can take advantage of. So the way we're gonna do this is we are gonna use a little bit of dependency injection, which Angular supports. And we're gonna create in the constructor a private instance of an httpClient and that's gonna of type HttpClient. Now right out of the gate, you're gonna see that's it not included, we're gonna get little squiggly lines here. But remember, if you running on a Mac you can use Cmd+., or on Windows you can use Ctrl+., and I'm gonna do that right now. And you're gonna see here, more than likely it's gonna say, yeah, we can Import HttpClient from module "selenium-webdriver/http". That is not the one that we want. So, really, the one that we want lives in a subfolder of Angular. So we're gonna do this one by hand. We're gonna use import, we're going to import HttpClient. And we're gonna import that from @angular/common/http, like that. And it would help if I were to type it in correctly. So this is the version of the HttpClient that we want. This is gonna make our development very, very easy. And just as a quick note. If you did declare a type like this in the constructor of one your services, or honestly, any of your classes, and you declare it as private, automatically, you're going to get that as a private instance variable tied to your class. So now I'm gonna have a this.HttpClient anywhere in my lawn.service, so that's kind of a nice little thing to have. So we've brought in HttpClient, that's good. But we're also gonna wanna bring in the actual models that we're gonna be dealing with, so we're gonna wanna bring in lawn. So I'm gonna import lawn that we created earlier. I'm gonna bring that in from, and this is back a level in models/Lawn. So that's gonna be the Lawn model that we created on the Angular side that's gonna map into what we created on the backend. And you're gonna see why we're gonna do that in an upcoming lesson. Now, another thing that we're gonna wanna do once we've done this is, obviously, fill out the implementation. But we're not quite ready for that just yet, so I'm gonna save what I've done here so far. Now you're gonna say, okay, well, there's nothing really here, what else would we have to do? Well, what we have to do when it comes to building services in Angular is we kind of have to register them as part of our application. And the way that we do that is through our app.module. Now, this is where you start to declare and define everything that you're gonna be using throughout your application.. It can be a little bit overwhelming once your application gets larger. And it can be a little overwhelming but it's really not all that bad. So the way to think about this, at least the way that it kind of helps me a little bit, and if you say it enough, you'll start to remember it. But we have four sections down here to start with. But there's three that are important to us for this particular application, declarations, imports, and providers. So if you just remember that you declare components, you import modules, and you provide services. Now, I know that if you've never heard that before it might sound a little strange. But the more you say that, the more you'll get used to it and the more it'll become a little bit normal to you. So you declare components, you import modules, and you provide services. So what we're gonna do now is we're going to come down into our imports and we need to add an import. So in order for us to be able to use that HttpClient that we were using in the service, we have to be able to bring in an HttpClientModule. So we're gonna bring that in and as you see, that's going to help us to facilitate using that HttpClient later on. And when I added that in here and selected that one, you're gonna see that it added this nice little import statement for me, right here. And make sure that it's the correct one right here, the same location as that HttpClient in @angular/common/http. All right, so we need to import that, and now that we have a LawnService, we wanna be able to provide that as well, so we're going to provide our LawnService. And when I do that, we're going to get another import statement added in for us right here, into ./services/lawn.service. So let's go ahead and save that. So now we have created our basic skeleton of our service, which we're gonna augment in the next lesson. And we have also made sure to register that service and its dependencies in here in our app.module by bringing in the HttpClientModule. We're importing our module and we're providing our LawnService. So now that we have that set up, we can now start to create the actual implementation of our service, which we're gonna do in the next lesson.