Build an App From Scratch With JavaScript and the MEAN Stack

6.7 Adding the View Application Markup

Now to the point where we can start dig a little bit deeper and take advantage of the routing that we've added into our application previously. So if we were to take a look at where we are right now, we now can create and manage the lawns. But now we wanna be able to do the same thing for the applications of products that we put on the lawns. So if you see now, when we click on View Applications for each of these individual lawns, we're gonna get to the next page where we can see view-application works, and obviously that's not what we want. We wanna be able to see more information and we wanna be able to get the actual data. So what we're gonna do now is we're going to modify the view-application component and the HTML. So once again, we're gonna dump in some code here. It's gonna be quite a bit, but it's gonna be once again strikingly similar to what we did previously. So I'm gonna go through these a little bit quicker now, because you will more familiar with them since you've already kind of seen something similar. So now this time we're going to have a header and we're going to take in this long title. And we're gonna call it the, whatever title. So if it's home it will be Home Lawn Applications. And then we're going to have another button up here, so we can go ahead and add an application. And then we're gonna have table-striped, so we're gonna have all the same kind of table that we've had before. The properties or the column names that we're gonna be dealing with are gonna be date, name and amount in pounds. So how many pounds of fertilizer? How many pounds of whatever it is we put into the lawn? And then we're gonna have some information about each one of those. So it's gonna have the date that we did it, and then the name of the product that we put down, and you can add to this as much as you want. You could talk about macronutrients and all sorts of crazy stuff that you're putting in the lawn, but I kept this rather generic, so we could have something simplistic to look at. And then, we're gonna have something similar to what we've done before. So we had the edit and we had the delete as well, as far as the applications are concerned on the lawn. So we can edit them if we didn't type them in correctly. We can delete them as well. And then we have similar modals at the bottom, as we've seen before. So one thing that we're gonna kinda have to work on right away is gonna be this concept of the lawn. So what lawn are we gonna be dealing with here? And how we gonna know what that is? Well, we're gonna kind of get to that. So it's gonna be one of those individual lawn service calls. But we'll go ahead and save this right now and see what we get. So if we come over here once we've saved it and refresh and we click View Applications, we're going to get an error over here and that's okay. Because we really don't have that lawn in there yet, so it doesn't know what applications are and so on and so forth. So it's not able to really output some of the things we want it to. But at least we'll be able to see kind of the basic structure as to what this is gonna look like. So that in the next lesson and in the upcoming lessons we can start to augment this with some code. And really start to give this a little bit of shape.