Angular 10 Tutorial #12 - Modules | Angular 10 Tutorial For Beginners

hi friends welcome to arc tutorials this is angular 10 full tutorial series for beginners in today's episode we are going to learn angular modules what are angular modules why are they important how should we use it what are the real use cases in actual applications that you will build and how modules can be interpreted into different ways which are also known as feature modules we'll learn how how to create them we learn how to use them we'll go step by step about what makes a angular module and that will give us confidence to build solid scalable performance wise and absolutely beautiful code which is easy to maintain and extend let's get started this is part 12 of the angular complete playlist i have planned around 100 tutorials for you in this series which includes detailed explanations as well as live project so make sure you keep checking the description box for notes and the code which i will be making available in the github all right so so far we have covered about uh the uh 10 11 episodes that we have seen so these are the 10 and 11 which we have already covered make sure that you have gone through each of these episodes so that you have continuity in your learning i have covered each and every topic in detail so that it will help you learn and master angular 10. all right today we are focusing on learning about angular modules all right so we'll learn about what are modules in angular how to create the module what does a module comprise of and all of that all right so let's get started i will also make some notes along which will help you understand even better so this is episode number 12 we will learn about angular modules right so first and foremost thing that you should know is that angular is a modular based architecture right which means what does it mean right so which means that angular itself is made up of multiple modules right so angular framework if you see there are lot of modules right so there are lot of modules which are built in [Music] which are built in right now if you want to see some of the examples just open app module which is inside your app module dot ts and you will see browser module app routing module browser animation module all of these are default modules that comes with it right so this is also an important question they ask you in your interviews that what are some of the built-in modules right so you can talk about browser modules you can talk about browser animation module you can talk about app routing right so these are all different modules which are available right now if you talk about angular material library right angular material library [Music] this this is also made up of modules right so that's why in the last episodes we have seen how to use mat button module similarly you have mat drop down module right and much more so if you see there is a pattern which is all the code is organized or grouped around modules right all the code and functionality is grouped in a module right so what does modules have right so if you see i'll show you a simple basic structure so this is a default one will not go into complex things we'll start with very very simple for you every module will start with an at the rate right now whenever whenever you see uh at the rate of symbol in angular it means it's a decorator right decorate what is a decorator everything will learn in the downline for now today what you should know is that it's a decorator which tells what it is now if you read this it means that this is a module right ng module right so this means every module will be defined using ng module right that means it's a module right and now you see here every module will consist of some components or i would say some parameters or attributes of this particular module now modules can take declarations it can have imports it can have providers it can have bootstrap it can also have exports right and all of that right so what consists of a module right what what modules consist right are first thing whenever we say declarations right now if you see here declarations that means it will have all the components this is where this is where we will add all the components of the module right what is the component will see that in detail in coming episodes for now understand declaration means all the components will be inside this whenever you say imports right a module can have a module inside it that's where we will use imports we can add more we can we can say import modules inside a module right so that is a dependency on modules now the next thing we will also see something called providers now this is nothing but the services that we need right services that we need will be injected here right so this is where we will inject the providers now bootstrap it tells that what is the component you should start with bootstrap means what is the first component the module should load right that is what bootstrap means also when you are doing a independent module you might want to use exports now this is to expo export and expose the component outside of the module right outside of the module so this is what a module will have it will have declarations it will have imports it will have providers it will have bootstrap right now let's talk some of the basic things every angular application should have at least one module right every angular application should have at least one module by default by default the angular framework or angular application provides us with app module right so if you see app you will see one module definitely it has to have a module and the name is app module by default right this particular the app module will have a one component inside it will have a component by the name app component inside it here right you see this component this is the app component which is defined inside app module right so that is how the default structure looks like now remember that whenever you are building an angular application whenever we are building angular applications we will first think of creating modules not components we will always think of modules first remember why is it important let me give you an example now in our case where we are building simple crm tool right a crm will have multiple features and functionality like i told you explained you in the previous episode also some of the modules are contacts users authentication then you would have leads you will have opportunities right and you will have settings you will have profile these are all functionality which can be which which we can also relate and say these are all the high level modules right why are the modules because tomorrow if you want to create a system let's say you will say free user right i'm creating three plans free user premium user and enterprise user right i'm creating three different types of plans right in the free users i want to give contacts and users in the premium i want to give right in the pre in the premium i want to give opportunity and for enterprise i want to give all the modules right so see now based on these three users they are having different different modules so the benefit is using modules we can we can always specify and say what modules we should make it available right also called feature modules now what this means you can you can turn on or off the modules based on conditions right now what is the condition i'm saying that for normal users for free users don't show some modules for premium users show only these modules so that's how we can add them into feature modules right so that is yet another important feature of modules that's why we think of modules in angular right everything is modular based approach so this was all the explanation about the modules right and like i said modules when we create modules we will have components inside it will have services so everything related to a particular module will be inside it right so think of it like a group grouping right group all the related components services pipes directives all of it together right all of them together becomes a module right so this is a high overview and this is i would say the detailed explanation for modules now let me show you by creating some modules right so i'm going to refactor our code that we did from last thing so i'm going to delete a few things and make it simple because we are going to refactor so let me clean up the code little bit here since we deleted we need to remove them and i will remove the material design also we will not need that we will start with bootstrap and we will then go to material design all right so here i have cleaned up the code i have removed the things that i don't need this is how the default application will come with alrighty so now what we'll do so let's learn to create a custom module right so we like i said we will start thinking everything in terms of modules right that's what i said whenever we are building angular applications we have we will always think of modules first so as part of this particular simple crm we are going to build these modules so let's go ahead and create modules for each of these right so the command that we will run to create modules is ng generate module followed by module name in this case i'm calling it contact right now let's go ahead and create that so we will say ng generate module and module name is contacts right so go ahead let's create that i'm giving s mod create contacts so it will create you the module i think we'll have to be inside this folder okay so we have to be inside that all right so the command will run is ng generate module contacts so we are telling angular cli generate as a module by the name contacts it will be by default inside the app we can generate it anywhere we want but by default it is created inside the app so you see here now it has generated a module file now again like i said it is an ng module that's why it has the add the rate ng module it has declarations which are empty it has imports which is only common module from angular common right nothing fancy simple empty shell of a module and its contact modules similarly let's create more modules for our applications i am going to call them leads and then we are going to call settings so you see all the modules are getting created here beautifully so friends remember we are also generating a live application while we are learning so i would encourage you to start coding with me so that you learn everything how to do it so i'm creating a module profile and then i'm going to generate one more module called contact leads settings profile and authentication right so this i will use it for authentication system that is login logout forgot new user everything right so so far so good so if you see we have created all our modules which are ready right now we have so i'm just making notes here so that i can share this also with you it will be easy for you to learn and use and cross check your details generate module authentication right all right so so far now we have created the modules if you go through each of the file they look similar because they are all empty shells right now they don't do much it has only the name which is this is authentication module this is contacts module this is leads module and this is profile and this is settings right so these are all the modules that we have created and i hope you are not now clear with what a module is how it works in the next episode we will learn what are components so that we will extend the modules that we created in this particular episode we will add components to the module and we learn a lot of things because components are the main building blocks of angular application all right so make sure you stay tuned and check out those episodes um also do like the video to share to comment to subscribe to my channel i'm always here to help you if you have any doubts just drop them in the comments section i'll be happy to help you if you like my work if you like my tutorials please buy me a coffee at buy me a coffee.com arc tutorials thank you so much for joining i'll see you in the next episode

Channel: ARC Tutorials

Views: 11,879

Keywords: Angular 10 tutorial for beginners, angular 10 crash course, angular 10 tutorial for beginners step by step, angular 10 tutorials for beginners 2020, angular tutorial 2020, angular 10 full course, angular full example, angular 10 for experienced, angular 10 full tutorial series, angular 10 crud tutorials, angular 10 tutorial for beginners, angular complete tutorial series, angular 10 tutorials, angular full tutorial series, angular 2021 full course, Angular modules tutorial

Id: 7sUkBbNPJ5k

Length: 15min 43sec (943 seconds)

Published: Sun Nov 01 2020