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

5.5 Creating All the Components

The final pieces of the puzzle for our app involve creating the components in Angular that we'll use to display the UI and implement its functionality. In this lesson, you'll use the Angular CLI again to create the six components we'll be discussing throughout the rest of the course.

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


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.

Back to the top