In this video, learn how to use the Angular CLI tool to generate the structure of your application using the ng generate component command to scaffold your application.
- [Instructor] The power of Angular comes when you take a big application, and you divide it into simpler pieces called components. So right now, we have a single component, and it's only really displaying this title right here. In a larger application, what you'd want to do is divide the pieces into the separate components, and that's actually called scaffolding. So we're going to scaffold our application into its different pieces, and I'll also show you how you can reorganize your application to make things a little bit easier to work with.
So right now, we have essentially the app.module.ts that controls the loading of the AppComponent. And then we just have the AppComponent in that .ts file. Now, to create additional components, we're going to need to use the terminal, and we're going to use, once again, the Angular CLI to create a couple of other components. So what I'll do is use the ng generate command. You can generate different types of things with the Angular CLI.
What we want to create is called a component, and then we can give this component a name. So I have three parts in my application that I want to create, want to create a form that will allow me to add things to my application, and I also want to create a search as well as a list of the different appointments. Now, if I say ng generate component add, what it will do is it will create a new component, and it'll just place it in this app folder. And when you have a ton of components, that's going to get a little bit messy, so what I'm going to add here is a directory, so when I say components/add and I hit Return, it's going to create a number of files and automatically make the folder for me.
You can see the component folders now has a folder called add, and inside that folder, we have the same files that we're used to when we create a component. It still has the test file which we're not really going to use, so we can go ahead and delete that, and it has a .css document which we're not going to use, so we can delete that, and then we got to make sure that we de-reference the .css right here. You can see that, since I deleted something that was referred to in this Decorator, this little @Component piece right here.
Then it's giving me an error because it doesn't know where this file is anymore. Now, this is how the Angular CLI displays errors. A little bit verbose, but it's still useful. It's telling you that at this location, so in this file right here, it failed to build, and it's saying that it did that because it couldn't find something. So let's go ahead and just make this smaller, and all we need to here is just delete this right there. And let's save it, and you can see that now, it loads up just fine.
So the Angular errors are pretty obvious and very useful. So let's go ahead and generate a couple more components. We're also going to generate a search component, and we'll also generate a list component. So all these are going to be in the components folder, and we'll need to go ahead and do the same thing here. Get rid of the spec file, we're not using .css, and we'll delete this one. Again, we'll get the error, and then we just need to make sure that we go to that other component and get rid of the .css reference right here, and do the same thing for this search.
So the .ts and the .css files, we'll delete, and we'll fix the reference here, and the component. All right, so, our application's working fine. So now, how do we get these components into the main component? That's actually quite easy, and right now, we're in the add.component.ts file, or I'm going to click on that. And you're going to see that just like with our main component, this component has this Decorator, so remember when you import these things from the Angular library, you are essentially making a copy of this component class.
And this Decorator allows you to expand or further define how that class works, and we're adding, of course, a URL for the HTML for this, which is right here, and all it says is the name of the component which is add, and then just some text that says works. And let's go back to add.component.ts. And what you see here is that it creates a selector for you. And this is the same thing that we saw when we were workin' with the AppComponent.
This app-root right here allows us to create a tag in our HTML file that we can reference. In the same way with the add.component, it actually makes this available as a tag that we can use in our components. Now, the other things that it's doing if you take a look at the app.module.ts files, when we generated these things, they actually automatically got added to the add.module.ts, as well.
So notice that components add/add.component is here, search and list. We didn't have to do that. The CLI took care of that for us. But we do need to go into the HTML of the main app.component right here. And we're just going to import the other sub-components. So just go to the .ts file and make a copy of the selector, and then in app.component, you just create an HTML tag with a beginning and end, and when you save that, you should see the text from that HTML file appear here.
I don't really need to look up the other ones. I know that they're called app-search would be the next piece of the component, right, so we can add that there, and app-list, so we can just type in those tags, it'll process, and then our three different components are now loaded into our main component. So that's pretty cool. Let's do one more thing because I find that the app folder gets super messy after a while.
There's so much stuff already in there that I like to move my app component into its own folder so that the only thing on the main folder is this app.module. So what I'm going to do is, in the app folder, create a new folder and call this app-component, and I'm going to move the app.component.html and the app.component.ts files in there. All right, that's going to create an error because now, it loses track of where things are, and let's close up this folder.
So all we really have to do is go back into our app module and update the reference to that file. You'll notice that when we go to the app.module file, the reference to where app-component is was automatically updated. Now, this is actually something that my editor is doing. My editor actually knew what kind of project I was working with, and it automatically updated the location of the file, but it did not save it.
So let's go ahead and save this, and you should see the application automatically work. Now, not all editors are going to take care of that automatically, so just know that if you move things around, you have to make sure that you update the reference to where the files are on your hard drive. So if you move the app-component to a sub-folder, then you need to make sure that you update your app.module that's loading up all those files, and make sure that it has the right reference.
So this is how you create a scaffold of the application. Next, we'll start workin' on the individual sub-components and start making our application functional.
- Building custom Angular projects
- Working with subcomponents
- Adding icons
- Adding search functionality
- Using lifecycle methods
- Managing list data
- Indexing your data
- Updating records