Angular CRUD with Web API Tutorial Part #8 - CRUD Feature Module Routing

hi friends welcome to our tutorials we are continuing with our angular crud tutorial series and this is part 8 where we are going to implement routing strategy for our application throughout this crud series we are trying to build a feature module called products in our e-commerce application so far we have done some groundwork of generating an application from scratch we have installed bootstrap we have learned to set up mock endpoints we have also generated few components today's episode is extremely critical starting point because this is the routing which will help us to design and use the application welcome back friends my name is sridhar i bring over 10 years of experience as a full stack developer and i'm here to share my knowledge on modern web technology stack i will share my knowledge on angular node express mongodb and much much more i'm also here to share my knowledge as well as to learn from you i know that a lot of you are building your own feature modules along with the series and i cannot wait enough to see what you build i'm here right here to help you if you have any doubts just drop in them in the comment section below i'll be happy to answer them also i want to personally assure you that if you are trying to build a crud at the end of the series you will be able to build it by your own i am here to help you so this is part of the angular correct tutorial full tutorial series and the playlist link is in the description box below make sure you check it out we are again we are trying to build a products feature module into an e-commerce shopping cart application all right that's the context now moving on to the so far story so we have it uh we have created the basic things in the last seven series like introducing to the project setting up mock data setting up angular application installing bootstrap and also creating angular's feature module and creating some components in the last episode i showed you how to do a site framework and create a layout for our application today we will create route routes for our whole application and test them thoroughly so to to configure routes we have to go to our the product feature modules routing file which is our if you see if you're following along so let me check out the notes for you it's important that you have the understanding correct because if you know what to do where to do it's easy that you can easily get things done so let me just open it here for you it's this file all right so in the routing what we are going to do we are going to we are going to update we are going to update the products feature modules routing file all right and we are going to explore different types of routes right so if you remember we have created components right so we will need a route for these components so we'll have a create product which is for adding a new product this is one of the route right so i'll let i'm listing down all the routes that we need all the routes we need in our feature module so these are nothing but also the functionality you can say like that right so let's call it here let's just start with 2 1.1 okay and then we need we need view i'll say list products which will show us list of all the products right and then this is for adding a new product and then similarly list products list or i can say search right i can search by category equal to right so i can say list products by category similarly we'll need a route where we'll say search by date so this will list all products by date added right so and then we also need delete product right so this will delete the product and then we also need to view a particular product right so we need view product slash the id of it right so the unique id of the product that we want to use so we need a unique id uh identifier so this i'll say view product view a specific product all right and then finally you also need update product slash id so this will update a specific product right so if you see all these use cases your crud functionality will be covered right so if you see crude functions so this is your create right this is your read because you're reading the list of products this is again read because you're reading products by certain category this is again read this is your delete right and this is again read for a particular product right specific product and here you are updating so this is update so see now you get an idea that you're doing multiple operations with respect to the products feature module where you can do read create read update and delete right so this applies to any any functionality that you are trying to build these are more or less common or generic will be similar for most web applications right so so what we need to do the next step now that we have identified these are the routes we need let's go to our products routing module which is products.routing.ts right so you can find that under the products module here products.routing.module right so so here in this file let's go here okay so we added few uh in the previous episode we added some basic ones like view product etc so let's add some more uh let's remove this and i'm going to remove all of it okay and we are going to now add all of these one by one okay so let's copy this here and go here okay so let's first delete all these nodes that's we don't need let's clean up so these are nothing but just the routes that we need and if you see i'm just using a path strategy and not hash strategy in my code so cleanup all right just give one more minute okay so this is the routes we want let's start configuring them now so here i'm going to say path is create product and the component that it should map is create product component okay close it next then again i'm going to say path is list products and again component will be view all products component okay then again we'll add a path if you have any doubts friends please ask me in the comments section i'll be happy to help you okay so here we are going to implement a query param right so we will simply say okay search okay we don't need that at the rate because we will use query params i'll show you how to do that so here we'll have component and then here we are going to say view products by category we all products category by component all right and we will use similar one for view all products by date okay so here we can use same component search with different component that it can be displayed similarly we are going to say path delete product and we can say component and we'll say delete products component close it here and we will now see carefully here it should it should not be just id it should be just a minute view product component let me just convert it and then i'll fix that issue okay and then we'll say update that product component so here it should be colon that's how angular will know that it's a variable that's coming in okay and if you see all the components are imported automatically in the routing file and our routes are ready okay so now that we have done it let's test it quickly and let's go to our application okay so the first thing if there is nothing it goes to product component which is what product works right so here i'm going to say welcome to products feature module or you can right so this so welcome to products feature module right and then again you can add some links here that you know add a add a product update a product view product or we'll build a table here to display that that's for later let's first check out our routes right so the first route is create product create product so since it's a feature module it will be inside the products so we see we had created a simple basic template form uh we'll tweak it here so but it's points into correct feed correct component now similarly we have list products which is listing all the products that's correct and then we have the search okay so it shows the same value we will implement it with the category and date okay so here or we can say search by date okay so that's also correct so we can say search date right and then we can say delete products no sorry it should be delete product right and oh sorry it's a feature modules delete product so it comes under delete product works now similarly we will say view product it doesn't do anything because it has to be under product slash view product slash 10 so it will show the value of 10 right whichever id that is taking similarly we can say update update product works so it's capturing the value right so for these let's capture the value quickly right so what i'll do i'll go to first view product right go to view product go to component and here in the constructor let's import activated route activated route and in the ng on init we will say this dot activated route dot since it's a param right it's not a query param it's a param so i'll say subscribe and data and i will bind this value i'll say product id selected equal to zero initially and this dot product id is equal to this dot sorry or just data right now this dot product id it says uh params is not assignable to data type right so what we will do first actually let's just console log here and we will know what data it is getting so what we can do is this dot product id is equal to data dot id okay so so now in the template i'm just going to show it here and i will say product id using interpolation i'm binding that data okay so let's see so here let me go to view product now it should show 10 here if you see here it's showing 10 now if i make it 20 this will become 20. so i'm able to read this value of a particular id whichever id i want to pass right so that's clear that i'm able to capture it so far so good similarly we'll do it for update right the code will be exactly same to capture let's get it here in the update go to component paste it here this dot activated and all right and let's define this id again okay and similarly in the template we will say product id so similarly now if i go to update product now it says update product 30 if i go to 20 it says product id 20 if i go to 10 it says 10 right that means i am able to easily capture the data of which one i want to work with now similarly let's go to category because now here we are saying in the routing in the routing we are saying whenever it is search you search by category right so let's go to search okay and go to so there is no search but there is view products all component right so here again i will inject activated route okay but here the query will be little different here i'll say activated.query params dot subscribe data and i'll use arrow operator here and and here i will say here i will say search category equal to empty initially there is no id that search then i'll say this dot search category equal to data dot category okay and this i will put it in the template and here i will say h2 showing search results for category and let's put interpolation again and we'll put this id okay now let's go and search it if i put there is nothing right because it's empty but now if i say category equal to 3 it says for category 3 right you see here i'm passing category equal to 3 and here i'm passing 10 i'm passing 10 so you see this is query param now so i can dynamically click on any category and search that particular value right i'm just setting up all the routes that i need similarly i'll need some things on the same lines right for products by date right so again we will need this okay search date so we'll make it search date and in the template we will say date searched or we can say showing results by date okay and then we are doing just the search date now let's see now i'm going to again say product slash search date it won't show anything initially if it's empty then i'll say date equal to say 0 8 0 1 20 20. okay so you it's okay that's because we here it should be date so now you see it shows zero eight zero one twenty if somebody selects some other date it would then again reflect that data right so basically i have fixed all my routes in today's episode and i've got all the homework done for all my routing right so all my routing strategy routes are in place and ready to roll and ready to roll right so i have covered all these routes they're all in place just one last thing let's do it for delete also that's the one pending so again it would be similar to like view okay like in view product if you have done just take it as it is similarly it would be exactly same because you are working on a particular id a particular specific to a particular product right so once you have it then you can map it again in product id product id okay so we have now let's quickly test product slash delete product slash 10 what happened it's not delete products it's delete it's delete product let's check in the routes what's the route we have configured it's just ids right so that's why so we have to make that also an id okay and now we are going to give 10 so it says product id 10 now i will make it 12 it will be 12 i'll make it 44 any value that you want to give that is captured right so all our routes part is done all the hard work of our routes is done so this was this is setting all the groundwork we are all ready now in the next episode we will start with services um that's what we are we have to create a common service for our application which is what will be used across all the crud services right so we'll be using http client and building it and writing our service if you are liking the video if you're liking this series if you're enjoying it please give a thumbs up please do like the video i'll see in the next part where i'll cover about angular service and then we'll create model we are coming closer to completing our functionality i hope you're getting the feel of the product and we'll also do some tweaking along to make the ui beautiful it's going to be exciting last five episodes make sure you're tuning in make sure you're following along ask me your doubts i will see you in the next episode thank you so much

Channel: ARC Tutorials

Views: 9,114

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, CRUD Feature Module Routing, creating routes for crud feature module, Angular CRUD feature module, angular crud module routing, angular module routes, angular routing

Id: fKChsy2iUi4

Length: 21min 14sec (1274 seconds)

Published: Sun Aug 02 2020