7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

6.7 Adding the View Application Markup

When the user clicks on the View Applications button next to a lawn in the View Lawn component, this will navigate the user to a new page of the app and display all of the products that have been applied to the lawn.

1.Introduction
2 lessons, 07:21

1.1
Introduction
01:02

1.2
Prerequisites
06:19

2.Getting Started
3 lessons, 30:48

2.1
Creating the App Structure
11:46

2.2
Creating the Server-Side Entry Point
10:14

2.3
Starting the Angular and Express Apps
08:48

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

3.1
Getting MongoDB Up and Running
06:08

3.2
Connecting to MongoDB
06:47

3.3
Creating the Database Schema
07:49

3.4
Creating a Simple Data Access Layer
07:09

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

4.1
Handling Requests in Express
09:57

4.2
Taking Advantage of the Express Router
05:52

4.3
Adding the `GET` Handler to the API
05:34

4.4
Adding the `POST` Handler to the API
03:18

4.5
Adding the `PUT` Handler to the API
02:17

4.6
Adding the `DELETE` Handler to the API
02:18

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

5.1
Creating the Front-End Models
06:57

5.2
Creating an Angular Service
07:31

5.3
Making HTTP Requests From the Service
08:33

5.4
Setting Up the User Interface
09:05

5.5
Creating All the Components
05:28

5.6
Adding Routing to the App
08:18

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

6.1
Adding the View Lawn Markup
05:55

6.2
Adding the View Lawn Code
06:51

6.3
Adding the Add Lawn Markup
04:34

6.4
Adding the Add Lawn Code
07:41

6.5
Adding the Edit Lawn Markup
03:06

6.6
Adding the Edit Lawn Code
04:11

6.7
Adding the View Application Markup
02:54

6.8
Adding the View Application Code
07:46

6.9
Adding the Add Application Markup
02:16

6.10
Adding the Add Application Code
04:49

6.11
Adding the Edit Application Markup
04:20

6.12
Adding the Edit Application Code
05:39

7.Conclusion
1 lesson, 03:18

7.1
Conclusion
03:18


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.

Back to the top