5.5 Creating All the Components

The next part just so happens to be one of my favorite parts. So what we're gonna do right now is we are going to create all the components that we're gonna be using in the front end of our application all together in one shot. So basically, what I like to do, at least in this case, is I like to think about how I want my application to work, the different pieces of my application that I can pull apart. And then create the components and kinda start to line them up a little bit. So what I'm gonna do now is I'm gonna go back to my terminal and I'm gonna go to a clean terminal here. And just like I was creating that service before, I'm gonna start using the angular CLI to generate components and we're gonna need six components for the remainder of this course. You might say six? Why do we need six? Well, in my head this is the way that I'm thinking about it. We're gonna need, two viewing components. We're gonna need to view the lawns and view the applications in the lawn, so those are going to be two separate pages. And we're gonna introduce routing between those a little bit later on. We're going to need to be able to edit a lawn and edit an application if we kind of put something in that's not right, we need to update it. And then we're gonna need to be able to add a new application to a lawn and we're gonna need to add new lawns to our list in general. So those are the six kind of main areas of our application that we're gonna focus on. So let's go ahead and create those. So once again, we're gonna be using ng, and we're going to generate. But this time, instead of generating a service, we're gonna generate a component. And you can write out component or you can just use the shorthand c. And once again you can put these all together in the root of your application. I don't like doing that I like to put them all in a components folder and then call them by name. So in this case we're gonna start with how about ViewLawn, so that will be our first component, so let's go ahead and create that one first. So it's going to create a folder called components and then within here, here you're gonna see a view-lawn component. And then in here, you're gonna see those four files. And you're gonna see that it created a ViewLawnComponent for me, and all those different pieces of functionality that we've talked about as far as app component, were created here for us in a nice little bundle. So, let's go ahead and do the remainder of them. So, now, we have a ViewLawnComponent. Let's create a ViewApplication component, and I guess you could probably call these view lawns and view applications, but, either way, it'll work just fine. So now we have ViewApplication. So now we're gonna want to do an edit, we're gonna want to be able to edit an application. Then we're also gonna want to be able to edit a lawn. And then once we have that, we'll also want to be able to add both of those, we'll wanna be able to do an AddLawn component. And then finally, we're going to do an AddApplication. And you're probably saying to yourself, well that's great, we can do all these types of things. We can view, we can update, we can add, what about delete? Well, we're gonna handle that a little bit differently, we're not gonna need a UI portion for that. Although I could think of a scenario where you might wanna use that, but we'll talk about that a little bit later on. So now we've created all these components. What do we have? So we have the add-lawn, add-application, edit-lawn, edit-application, and then view-lawn and view-application. So, these are all pretty cool. So, now, what's the basic front end of our application going to look like, what's the first thing that we're gonna wanna see? Well, when we have people navigate to the root of our application at local host 4200, I feel like we're gonna wanna show them a list of all the lawns that they currently have. Well, if you take a look at what they put in the HTML for each one of these components to get started with, they basically just show what the component is called. So in this case it's going to say view-lawn works. So just so that you can see how this is going to work let's go ahead and put this component. The view lawn component as the main view of our application. When users go to 4200 So you can at least see that that's up and running and working. So how do you do that? Well, in case you're not sure, you can go back into your component.ts file and remember, we have a selector here called app-view-lawn. So these are always created dynamically based on whatever you call your component. So I'm gonna go ahead and copy that and I wanna come back in, and now remember, we have our index.html, and it's calling into app-root. So I'm gonna leave that, I want that to continue to be there, because I want my app.component to fire up. But remember, I deleted what was in the app.component.html, so instead, now I'm gonna go ahead and use the app-view-lawn component in here simply by using that HTML element that is defined and connected with that selector. So if I save all of this and I go back over to my Google Chrome you're gonna see that it has updated now and view-lawn works. So now we have a basic structure to our application. We have all of the necessary components built out in a components folder, nice and tidy and now over the rest of the course we're gonna start to fill all these things out. Remember we're gonna do each one in two sections. We'll build out the UI portion of it and we'll talk through that a little bit and what we've done in there to create that angular front end. And then in the second portion, for each of those components, we'll start to actually talk about how to build out that implementation using TypeScript, and the nice little goodies found within Angular.