Multiple modules in Angular application | Angular Tutorial

[Music] because we are working on a real-time bookstore web application so in this application there will be multiple features and to work on the multiple features we have to work on multiple modules so let's understand how can we add multiple modules in an angular application and how can we associate the child components to those multiple modules before creating multiple modules in this application let's understand how many modules do we need in this bookstore application so here we are creating a bookstore application and in this bookstore application we will have multiple features based on those features we will have the multiple modules we will also have the security in this application and security means the login the sign up the chain password all those things then we will have the different layout because we will have the admin feature the logged in user feature and the public features in this application so based on all those scenarios we will have different layout and to work on the design we will be using bootstrap and the angular material it is not mandatory to use both of them you can design your entire application only by using the bootstrap and only by using the angular material but here because some of you might work on the bootstrap and some of you might like the angular material so we will understand the process of installing and using both of them we will also learn how to work on the popup or the models in this application and we will be using the angular material model then there are so many angular concepts like the form directive services pipe routing etc there are so many features that we will cover in this real-time application now here is the basic structure of this bookstore application in this application i want to have a public section where we will have a home page and we will have another page for the old books we will also have one more page where we can see all the book details then i want to have a feature for the users only the logged in users can add the book they can also edit their own book like that i also want to have a section for the admins and in the admin section they can see all the users how many users are there in this application and there are so many other features that we can use while in the development of this bookstore application other than this we will be using the authentication in this application so this is also a feature in itself we will be using the sign up login change password forward password email verification so many things are there so here you will see that there are multiple features first feature is this home page then the second feature is this users third is the admin and then the authentication is the next feature so based on all these features we can create our multiple modules now let's open the bookstore application and start adding all these modules and the components this is the application that we have created in the previous video let's go inside the application by using this cd command and here we have this bookstore app okay now let's open the entire code in the vs code editor and for that i can simply use this command code space dot hit the enter button if i will expand this src folder then you will notice we only have the basic skeleton that we have seen in few previous videos we only have one module that is the app module and we only have one component that is the app component now along with this app module it is time to add multiple other modules and for that let's open the terminal so here i can use this terminal and this new terminal and over here we have to write few commands by using the angular cli just like we have added the components in few previous videos in the same manner we can use the angular cli and we can generate our modules over here for all the public pages of this bookstore application i will create a new module with name public let's do that so here i have to write ng g or you can write the generate then either module or m and then the name of your module so let's say here i'm writing only the public hit the enter button let's enter and hit the enter button again okay so you can see we are having one more folder over here with name public and in this public folder we have one single file that is the public.module.ts let's open this file and this is the very basic structure of a module so this is the name public module then we have this ng-module decorator and the declaration imports creating a new module in the angular application is a very simple task just like we have added this public module let's add few more modules and this time let's use ng g m and let's say here i'm writing oauth at the enter button we got one more module the name is auth let's add one more module so this time i will be using user hit the enter button and we have one more module the name is user to organize the code better let's add one more module with name shared and all the common pages or tasks that will be used in this application we will define all of them in this shared module for example we have the header we have the footer and we also have the common models and the services we can define all of them in this shared module okay so far we have created multiple modules in this application and now it is time to add the components in these modules let's say i want to add a new component for the home page and for that here i'm writing ng g c c for the component and then i have to define the name of my component let's see here i'm writing without doing anything else if i will enter over here then you will notice that this component will be added in the app module because at the root level of this app folder we have this app module but i want to create this component for this public module and to organize my code better i want to save all the files of this home component inside this public folder and because in one single modules we can have different type of features like the components services models etc so here i want to create one more folder with name components and i want to have all the components in that particular folder now let's update this path and here i am writing public then inside the public folder i want to create one more folder with name components and then i want to generate a new component with name home now other than this i am not defining anything else over here and because this component will get generated inside this public folder and inside this public folder there will be one more folder with name components that we have defined over here and in that components folder we will have our home component now what is the nearest module in this component the nearest is this public module so this angular cli will automatically understand that you are generating a new component for this public module let's hit the enter button here you can see that we have one more folder within components and in this component folder we have one more folder here is the home and in this home we have all our four files let's have a look on this public module as well here in the declaration section we have this home component now if you navigate to this app module you can see there is no change this is how you can generate a component in this module let's add one more component over here and this time here i am having whole books hit the enter button we have two components this time this is the old books and then we have this home let's add one more over here and this is the book detail hit the enter button so in this public folder we are having three different components whole books book detail and the home now let's add the similar components in the other modules let's talk about this oauth and this time to generate the component i will be using again the cli command ng g c oath and i want to have everything in the components folder components then the login hit the enter button and let's expand this oauth folder we have one more folder within components and in this one we have login and we have all four files if i will have a look on this both modules then you can see we have this login component in this oauth module let's use for the sign up also hit the enter button and here we have one more folder with name the signup and we have the signup component this is how you can create multiple modules and multiple components in your application it is not necessary and recommended to create all your components at the first time we will create all our components and modules whenever they will be required and here is one more important concept let's say at the same level you have multiple modules for example in this auth folder we have one more module at this level and then i want to generate one component for this oauth module then how can i do that in that scenario let's say here i am generating one more component that is the change password and here you can define your module explicitly so for that here i'm writing module equal the name of your module that is the oauth so if at the same level you have multiple modules then you can define your module by using these options hit the enter button and here you can see that in the auth module this time we have one more component that is the change password component [Music] you

Channel: WebGentle

Views: 12,546

Keywords:

Id: UMvjzcPGyTg

Length: 10min 8sec (608 seconds)

Published: Tue Sep 07 2021