Angular CRUD with Web API Tutorial Part #5 - Feature Modules in Angular App

hi friends welcome back to our tutorials we are continuing with our angular tutorial series this is part 5 of that we are trying to build a products feature module into our angular application which is an e-commerce website it's interesting because we will learn different ways to do it in today's episode feature modules or modules in general are the fundamental blocks of building angular applications it can be done to make your application more modular which is easy to maintain easy to implement easy to design and allows us to implement a lot of reusable code code into our application we'll learn all about it in today's episode let's get started welcome back friends my name is sridhar i'm your host i bring over 10 years of experience as a full stack developer i'm here to share my knowledge on the modern web technology stack like angular node express mongodb and much much more i'm particularly excited to learn from you all because i know a lot of you are building your own product modules and feature modules so i can't wait to see what you build i just want to let you know that i'm right here if you need any help if you have any queries any doubts just drop in the comments i'll try and help you as much as i can i can definitely assure you that after completing this series you will be able to build your own feature modules in your application independently all right so i have created a playlist uh angular credit tutorial playlist the link is in the description box below make sure you check it out to build your own feature modules but if you're following this where we are building a products feature module for our ecommerce shopping cart application follow along with all the tutorials all right so so far we have understood about the project and the scope that we want to work with and basics of crud we have set up our mock data we have set up our application we have installed bootstrap framework in our application in the last episode today we will start creating our feature modules all right so so the first thing that when we talk about feature modules these are the things that comes to your mind what are the different approaches how should which approach should we take right and which is the best approach which is a simple approach which is the approach which will suit us what questions to ask to yourself to your lead to your manager when you are taking an approach of building a feature module what are some of the common use cases of feature modules these are all the questions that you will be able to answer at the end of this tutorial not now at the end of the tutorial because once you understand all of this you would be having a picture in mind of how to design your application how to architect them so let's get started i we will revisit this questions during our notes and we will learn how why what why not all of those questions first thing what is a feature module feature module is a great way of grouping related functionality right so if you are building a products feature module you will group everything related to products inside one module if you are building a users module you can have all the features and functionality of the users in that particular module now this allows us to implement lazy loading which means you request data and only that data will be loaded that will be enabled basically that module will be enabled it's easy to maintain it's easy to reuse at the same time we are helping in protecting the securing our protected pages right so that's an overview of feature module why we need it right so talking in our context that we are going to build we'll build a products feature module i'll write some nodes where it will be much clearer of as to what we are going to achieve but first understand that when working with angular in especially with respect to modules there are two ways or two approaches of building modules right one is you can build a module create a component and then import it into app module that's the first approach approach number one the second approach is using modules with lazy loading which means you create a routes secure them and lazy load them which means you load the components only when they are requested all right so these are the two approaches that you can take in building modules right so let me make some notes first before i show you how to generate each approach okay so let's get started here this is if you have uh just so update i have updated all the notes um of all the tutorials in the previous episode so make sure you check them out right so creating products feature module right so quick note what is a module module is nothing but it's like uh grouping right grouping related functionality together which is easy to develop maintain and reuse right so that's the high level of module so angular highly encourages and supports supports modular approach of applications all right so now there are two different approaches two different approaches to this right so the first approach is directly generating modules and the second is through generating thing modules via lazy loading which means we will only load them when they are requested okay so these are the starting nodes that we should consider the next we should look for is the next we should do is understand how to generate the module right so let's see that so to generate a simple module right if you want to generate a simple module what you need to do you need to use angular cli right so first generating modules right so how do we do that we will run the command npm install oh sorry um ng generate module followed by module name that you want to give right so we don't have any module right now in our application so let's go ahead and create two modules i'll create two one for with this approach i'll call them orders and the other is the one that we are trying to build which is the products using lazy loading right so let's first generate that ng generate these are the shortcuts you can use you don't have to write ng generate module you can also write ngg m right so this is also correct way short form ng generate module and then i'm going to say orders right so i have created an orders module here now you will see here it will generate under app so under app now we see there is a module which got generated right so it's an empty module there is no there is no component there is no association to it yet so once you do this step right so once you run this command you have the order module which is generated right then navigate navigate inside the orders module now this is optional you can also specify the path like this when you generate the components right but i prefer to do it by going to navigation right you can also alternatively give the full path of it but sometimes it makes mistakes so it's better to go into the navigate module so just so you know that you are doing it correctly now i'm going to generate some component i'm going to send g generate component and i'm going to say list orders let's say a component i'm generating so let's go into app orders right now i have gone into orders that means the new component will be generated inside this module right so by doing this we are telling cli to generate the component inside the module orders right if you don't do that it will create outside at app level so that's the difference so remember that all right so inside the orders and now i'm going to run the command ng generate component list orders right so it will now generate a component inside orders see here if you don't do if you don't mention the correct path or the module it will generate it by default for app right so now that we have our list orders generated right so this is our component now the thing that we need to do next to use right to use this orders module we will need to import it import it into app module okay and go to app module then go here and say import and say slash order slash odd order slash address module okay so here we are importing the orders module and once you have imported it add them to the array of imports okay so once you have imported right add the module into the imports array okay so once you have done this that means now you have in imported the module right and in the app component let's say i want to show this particular list component so take the selector name right take the selector name go to appcomponent.html and here let's throw in h3 and say list orders and i'm trying to use this component right now i have taken the selector name selector name and included it in the app.component.html okay this this will not work okay this will not work why because we have included the selector we have imported the module but what we have not done is we have not exported it right we have not exported exported the component okay that's why we cannot use it outside okay so to do that what we need to do go to orders module and here you have the list orders component and add exports array and just add it here and you're done right so once you have it you have exported the list address component and now you can use this into app component since you have exported it all right so now let's run this application it should show you the list orders in the home page let's see that it's building if you're enjoying the series if you're enjoying this video give a thumbs up to the video please friends all right let's just give a couple of seconds it should be done soon all right so it's done now let's see here let's reload so it says list order works right that's coming from our component which is this one right but imagine if i don't add it here you will not see the output if i am not exporting it you will not see this okay let's see this so it says error uh because you cannot use them right because it doesn't know that you are trying to use it so it's an error there um so so basically you get the point that you if you want to use this component outside in any other place like in any other component template or module you have to export it so this is how it works right so this is a classic example of how you build modules in angular right which has some components you want to work with it now this the next approach i told you was to generate the modules with lazy loading this is what we are trying to build and this is a correct approach because you don't want to load things all in one go right you want them only when they are requested right you don't want them to be loaded in every go otherwise what will happen is all the modules will load at once because of which your application size the performance will take a hit right so that's why you should always try and do lazy loading of modules because you load the module and the components and everything only when they are requested right so that's the most key important thing that you should remember so now let's learn about how to generate that so i've opened a new terminal go inside the application and now what we are going to do is we are going to learn approach number two which is the using through lazy loading so here what we will say will say ng generate module again same command but now we will add some more details like the module name and the routing to it so we will say here ng generate module products and then we have to specify the route right so we are going to say route will be products right that means how should this module be invoked by which route so i'm saying when i call products it should load the uh products right you can give any name you want here let's say um shop products my products anything any name you can use okay and then you finally specify which module you want to include this okay so here i am going to say app dot module right so here what we are telling here is create a new module by the name products the route of that should be products that means when i invoke and call the routes products it should load and then which module it should include and should start it should be app module so now let's run this command and now you'll see one more folder created with the name products it will have a default component also created you can expand this and see it has the routing file it has the product module it has the component at the same time there is should be an entry in our routing here you see here load children import products module right so this is the classic example of how you should use or how it is encouraged this way you will only load when it's called i'll show you that also right so now uh so now you see the path as products right so let's go here our application is still running so let's go here now let's inspect element right and i'm going to reload the page now all right okay so now we see here that the the products module is not loaded by default right but now we will go to products so you see here now products got loaded look carefully here right you see the product module.js right so this is because it is it will be loaded only when you have used this right otherwise it will not be loaded right so that's the beautiful example of how you should use the lazy loading to work with you and if you see here since we went to products work it came here but if i go here into if i clear this console and i just go to the home page right i don't have any i don't see any products that are listed here right and it will only be called once we have this loaded right products module will be loaded only when we call this route right so that is that is one of the classic examples of how you should use your product or feature modules using the lazy loading right so what was the command that we did we did ng generate module and then we ran products and then we mentioned routing right so route this is where um right so we gave products and then we also mentioned module which is app.module okay so this is the command we generated so we see that this is now connected now it has a default product right so in the next episode we are going to learn to generate some products inside it configure their routes and much more but today understand both these concepts of generating module and generating lazy loading module that's extremely important because a lot of times a lot of people make mistake in generating just the modules and not through lazy loading so through that way they'll end up loading all the modules all the time we don't want to do that we want to use it using lazy module right so now that we have our product module it's ready to go we have our routes and it's imported in our routes it's configured we are good to go right now similarly uh in the next episode we will configure our components and we will learn how to work with our product components create their path create some beautiful ui and start our crud operations on it i hope you find this useful i i hope you like this video if you have any doubts just drop them in the comments section i'll be happy to help you thank you so much

Channel: ARC Tutorials

Views: 11,729

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 feature module tutorial, angular feature module example, angular 9 modules, angular 9 module routing, angular 9 lazy loading modules, angular 9 features module

Id: Pt2HF_sOjr4

Length: 19min 27sec (1167 seconds)

Published: Thu Jul 30 2020