Lessons: 34Length: 3.4 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

6.1 Adding the View Lawn Markup

This UI component will be the first that the user will see and will provide a list of all the lawns that they are managing. It will also provide the opportunity for users to create, update, or delete lawns.

2 lessons, 07:21



2.Getting Started
3 lessons, 30:48

Creating the App Structure

Creating the Server-Side Entry Point

Starting the Angular and Express Apps

3.Setting Up the Mongo Database
4 lessons, 27:53

Getting MongoDB Up and Running

Connecting to MongoDB

Creating the Database Schema

Creating a Simple Data Access Layer

4.Creating an API With Express
6 lessons, 29:16

Handling Requests in Express

Taking Advantage of the Express Router

Adding the `GET` Handler to the API

Adding the `POST` Handler to the API

Adding the `PUT` Handler to the API

Adding the `DELETE` Handler to the API

5.Building the Front-End Angular App
6 lessons, 45:52

Creating the Front-End Models

Creating an Angular Service

Making HTTP Requests From the Service

Setting Up the User Interface

Creating All the Components

Adding Routing to the App

6.Creating the App Components
12 lessons, 1:00:02

Adding the View Lawn Markup

Adding the View Lawn Code

Adding the Add Lawn Markup

Adding the Add Lawn Code

Adding the Edit Lawn Markup

Adding the Edit Lawn Code

Adding the View Application Markup

Adding the View Application Code

Adding the Add Application Markup

Adding the Add Application Code

Adding the Edit Application Markup

Adding the Edit Application Code

1 lesson, 03:18


6.1 Adding the View Lawn Markup

Now we are gonna start to dig in the component and the first one that we wanna look at is our view lawn component. So like I said before, this is the one where we are gonna wanna to give a list of all the lawns that we have within our application. And show them in nice little table format so they are easy to read, easy to see what's going on. And then also provide the opportunity to edit the lawn, add new lawn, view applications and all those types of things. So, the first thing that I'm gonna do is, I'm going to drop some markup in here, and it may seem like quite a bit. There are some pieces that are commented out for now, but we'll talk a little bit about that, and you'll see that it's really not all that bad. So, let's go ahead and paste some in here, let's take a look at what we're doing. So the first thing that we're doing here is we're gonna put a little header at the top, Lawn Care Maintenance App, or whatever you wanna call this. So you can put anything up there that you would like. And then right next to that I'm gonna put a button, and it's gonna be a green button, based on the btn-success class here, and it is going to say, Add Lawn. And that's fine, because we wanna be able to present the user with an opportunity to add a new lawn. Now underneath that, we wanna show a table that's gonna contain all the different lawns that we already have configured within the application. So let's take a look and see what we have here. So we have a table, it's gonna be striped bordered and there's gonna be a hover animation over it. Now these are all Bootstrap things. So it's really not a big deal to understand all of them. You can leave them out if you don't want them. You can just go with standard HTML tables, but I think the Bootstrap gives it a little bit of flair. So they're striped which means every other row is gonna alternate a little bit of a shade of color. Its gonna have a border around it, and it's going to have a hover animation. So when you hover your mouse over each one, you gonna see it's gonna highlight a little bit and show which ones are currently underneath the cursor. Then in the header, we're gonna have four columns. We're gonna have title, address, size, and then actions and then actions is where we're gonna show things like I wanna edit this lawn, I wanna view the applications, and I want to delete. So then once we have defined the header in the actual body, we're gonna put some rows in there. And the way that we're gonna do that is we're gonna use the ngFor block here that is used by Angular to determine what element within your HTML is going to be looped over. Which means I am going to loop through all of the lawns found with in this component now that doesn't exist yet, we haven't defined it, but we'll do that in the next lesson. So for all the lawns that we have I wanna loop through them all. And each one, individually within each instance of that loop, is going to be stored in a variable called lawn. And then for each one of those it's gonna create a table row. And then within there we're gonna have a couple pieces of information using normal binding in Angular with the double curly brackets. We're gonna display the title, address, and size and then finally a couple different actions. We're gonna have an edit action so we can edit that particular lawn, we're gonna view the applications. And this is an interesting one because the reason we did the routing changes in the previous lesson was so that we could do this bit of functionality here. Now this router link is a special attribute that is specific to Angular that is going to allow us to define a route within our application. And that route is gonna take us to /lawns and then the lawn_id that we've chosen. So like we saw on the routes, if we go to /lawn, slash whatever the ID is, it's gonna take us to the view applications controller. And then we'll be able to see more of the information about the applications that we've applied to that lawn. And then finally, we're gonna handle the delete scenario and you'll see a couple of different interesting things in here. We have a data-target here for the edit and we also have a data-target up here for the add, and the reason for that is because we're going to take advantage of Modals in Bootstrap 4. Now those modals are down here and they're commented out right now because if we leave them in there, there's some things defined in here that in this markup that are gonna cause problems. And we won't see this component display on the screen mostly because of these custom components, the addLawn and the editLawn, because like this Lawn doesn't exist yet and things like that. Because we just haven't created these components yet. So we're gonna leave these commented out for now, but we'll add those in later on once we start to add in the addLawn component, as well as the editLawn component. So that's pretty much it, a lot of the other things that you find in here is just basic Angular stuff. So we have some click event binding here with the (click) which means when we click on something we're gonna run the selectLawn function within this component. When we click on the delete button we're gonna run the deleteLawn function in this component. It's very basic stuff based on Angular. So, like I said, if you don't really understand some of these things, then I would highly recommend that you spend some time doing a little bit more research into the world of Angular. Check out some other TutsPlus tutorials and courses to find out more about them. So now that I've made some modifications to this, let's go ahead and save this component and let's head back over to our browser. And now you're gonna see here that we have a little bit different of a view. We have our header up here, we have our title, our header for our table here, and we don't really see anything in there yet and why don't we see anything yet? Because the rows are gonna be defined by the number of lawns that we have within our application and, of course, we don't have any of that yet. So right now, this is just the front end markup for our component. In the next lesson, I'm gonna take you through the process of actually building the TypeScript to back this up and then handle things like selectLawn and deleteLawn and those types of actions behind the scenes using TypeScript.

Back to the top