Angular CRUD with Web API Tutorial Part #6 - Generate Components with Module and Routing

hi friends welcome back to our tutorials we are continuing with our angular crud tutorial series and this is part six of that series we are trying to build a product called product features module in our e-commerce application called shop for less we have covered few episodes we have done some ground work and starting last episode we have created a product features module today we will learn to create components and link them into our feature module as part of the lazy loading module welcome back friends my name is sridhar i'm bringing over 10 years of experience as a full stack developer and i'm here to share my knowledge on modern web technology stack like angular node express mongodb and much much more i'm here to share my knowledge with you all and i'm also here to learn from you so i know all of you have been building some amazing stuff and i can't wait enough to see what you build during the course of this project or the series that you're building if you have any doubts just ask me in the comment section i will try and help you as much as i can i can assure you that you will master how to write angular crud functionality at the end of the series so make sure you follow along code along and ask me if wherever you're stuck the playlist link is in the description box below for our viewers who are joining us new so you don't want to miss out on the tutorials and the series so make sure you check out the full tutorial playlist the link is in the description box below so far we have introduced the project we have set up the mock data we have set up angular application we installed bootstrap framework and now we created a products feature module for our e-commerce application and today we will create components for that feature module let's get started so to create components uh we will implement few functionality right when we talk about crud you create read update delete so we will use these um functionalities that are listed which is adding a product viewing product view all products update product delete product view products by date etc all right so let's build and learn how to generate the feature module components right so for that what we need to do we need to use our angular cli and we have to run the ng generate component command right make sure you do it in the module so that it's get attached to your module alternatively you can also pass the path of it all right so let's get started all right so here we are making some high level nodes uh where we are generating the components right so this is tutorial number six for you where we are generating components for our products feature module okay so we have our component and so the first thing this is our products feature module that we are doing for our ecommerce platform application commerce application and we called it shop for less i'm sure you can find out some better name all right so once you have it uh navigate to the module folder uh like i explained last time this is not mandatory you can also give the path of it but i always encourage my students and my team to navigate so that you don't make a mistake all right so open a terminal and navigate to the folder so we'll say shop less source app and then products all right so i'm inside that now i'll run the command ng generate component and let's start generating the component so the first component that we want as part of this list is will say add product right so this will be new product so i can also create i'll create product right so you can give any name of the component that you want um so it has updated the product module it has created a component here now similarly let's go ahead and create and i'll say view product that's the second one and keep noticing friends it's updating the module file okay i will it's updating the module file here that means it's easy for us to uh you can see here it's in the declarations it's in the declaration it is importing it is adding it so it will make it easy for us to configure the routes okay so we will do that in just a bit let's get started first complete this so now view all products so you all products again you can come up with better names like list all products list product again that's up to you how you want your application uh type nomenclature how to be so here i will say update product this is for a particular product which is our edit and then i'm going to say delete product right and then we have to products by date so we can say view product view all products by date so keep noticing how it's taking up shape right now you had a simple application now you have a feature module now you have all the components inside it this is how any product or any application that's built on angular grows each day right you have been little you are literally noticing this your first hand that how it's growing in terms of the functionality in the features so here you give the component name okay ng generate component component name all right so now you have generated all the we have generated all the components for this particular list all right so so far so good our components are already generated let's review them once okay now let's review the components inside the feature module okay so you see you have create update read delete view all products and then you have view all products right so this is so far so good we have got our everything in place we have all the files required every component will have a css html spec and component.ts file all right so that's that's the component but if you're not sure what it is please make sure you check out the angular 9 full tutorial series that i have created for beginners uh it's it's the link i'll share it in the description box but if you really want to understand and learn you can follow this series if you if you are new to angular all right so so far so good beautiful we have our um components generated they are added into our module file right so we can see that all of them are added right exceeds the maximum length so let's style this up little bit and so this is how you would so let's clean this up this is called the linting and make sure that you have a proper linting in your application it's it's much readable it helps you in making sure that you have similar coding standards in place right so you have the closing of declaration so all right so so so far all good all set we have our components that are there now go to your routing module right and we will configure the routes okay so how do we do that i'm just showing you one example but i'm sure there is a dedicated um episode that i want to cover it for you and explain them so you can see creating routes is where i wanted to cover this but then i will just show you a highlight of how to add how to how do how to show the configure so some of you can start putting it together the way you want it so i'll say create product and here i'll say create product okay so all right so i'm just showing you one but we will work on this routes in episode number eight but this is just to give you an overview okay so our application is compiled successfully so we have the products route right and we have the products module ignore this don't worry all right so we have the products and then i can say create product okay so now it says create product works right if you see the path it is inside the products right if i go here it will not load the it will not load the products just yet see it is not loading products let me show you again let me refresh and see there is no products which is loaded so you have to go to products feature module slash i will say create product so now you should see products module getting loaded right so the create product works similarly we'll go ahead and configure all our routes in episode number eight but some of you i know are eager to get this done go ahead add other routes that you want all right so i will leave it up to you for that and i'll i'm trying to take this easy and slow in part by piece uh so that way you learn it right the idea here is to learn for you so go ahead give it a try let me know in the next episode i'll create ui for these components and then we'll configure the routes and make it all work together drop in your comments doubts queries feedback that's so encouraging to see some of the really positive feedback and comments it's really encouraging thank you thank you so much for that keep doing it keep supporting me thank you so much for joining see you in the next episode

Channel: ARC Tutorials

Views: 8,839

Keywords: angular crud with web api, angular crud tutorial, angular crud operations, angular crud project, angular crud example, angular crud with json server, angular crud application tutorial, angular crud table, angular crud mysql, crud angular 9, crud angular 8, angular bootstrap crud example, angular bootstrap crud, angular generate component with module, angular generate component with routing, angular generate component, angular component generate, angular module and component

Id: -egDJxDmNVE

Length: 10min 46sec (646 seconds)

Published: Thu Jul 30 2020