Angular 9 Tutorial For Beginners #8 - Modules

hi friends welcome back to our tutorials and we are continuing with our angular 9 full tutorial series in today's episode we will learn all about modules in angular application modules are a very very important aspect of building any project modules you can think of it like a logical grouping of your functionality in your application we will learn all about that in the details in this episode my name is shredder I have close to 10 years of experience as a full-stack developer on both front end engineering technologies as well as back-end technologies I am here to share my knowledge with you and also to learn from you during the course of these tutorials if you have any doubts any queries drop them in the comment section below I will be happy to help you for free all right so so far we have covered the basic introduction of angular application how to upgrade your angular applications how to install how to install bootstrap folder structure we also learnt about angular CLI in the previous episode and in today's episode we will learn all about angular modules let's get started so what are modules in angular and importance of modules what's app module and how to generate our modules we will learn all about that in this tutorial let's get started as usual I am making some notes for with each of the tutorial if you have missed out on the notes please let me know I'll be happy to share these notes with you so these are five these are six notes these are seven that is angular CLI tutorial notes and now I'm going to make some notes for you on tutorial number eight which is all about angular modules alright so let's get started all right let's get started here so the first thing what is a module so think of it in let me give you an example first and then we'll learn about modules through that let's say you're building an application so you will have multiple components and pieces functional pieces in it right for example you would have a user authentication module you will have an authentication module and let's say if you are building a employee portal you would have a module called users if you are building a to-do list you will have some module called tasks if you are building some kind of settings for the user you will have settings module if you are building some kind of logging you will have a logger module if you are building for example so these are all different types of modules so what you can see is that all of these are a logical pieces logical functionality in your application so modules modules in application in angular are logical functional groups logical functionality that you to segregate related to its for example if you are building for example if you are building a user's module you will want everything related to users inside it for example you want register component you will have forgot password you will have new user or signup right so these are all components that you will use so multiple components or maybe you will have a services which are common to all these components all of this will become a part of a module so basically modules are nothing but logical grouping so modules can have modules can have components services directives pipes etcetera etcetera which all all are related related to a particular functionality so that is what angular modules means which means you you would group things together under one module and you can add you can remove the module as in when we go if you don't need a module on a particular page we won't loaded if we need them we'll load them so that is how modules work it's like you can also think of it like plug and play plug and play features allows us to do plug and play which means when you want it you load them when you don't want them don't load them now let's see some next thing which is our app module so we learned what is modules importance of modules it's very very important because it allows our application to be modular and it's easy to maintain it's easy to debug and it reduces the application footprint which means if you are if you are on a page which does not need a module simply don't load it if you need it if you need it load it so that way you know that you are just inserting or loading modules which are required for that particular page or that component that mu now the next thing that we learn is app module so this is where the in things get interesting by default by default every angular application has one module at least at least and that's called as app module you can see it here that every angular application at least needs one module and by default if you see your source app you would see AB dot module dot PS file so this is at least one module that has to be there in your angular application and by default it is called app dot module dot TS so you can see here there is a module and under app module we group all the other components everything together now there are a lot of other built-in modules that we import like browser module ng module app routing module this is one which we created so it means we this is a by default we need to import we need to import required modules from core packages like for example browser module like ng module right so these are all the other by default inbuilt modules that we require for HTTP we have HTTP client module etcetera so we can import the modules that we need now let's learn a little bit about little bit about app module tortillas now every module every module is defined by ng module so when you create a new module you will always have to mention at the rate ng module this is the beginning point and an module inside the module we will then decide and define what all the different declarations so under declarations array we will mention all the components that we want to use in the imports we will mention any other modules we want to import so simply saying a module can have other modules inside it under the providers we can put any services that we want to add bootstrap is nothing but when we tell the angular which component to start with to load first right so let's make some notes of what we just understood every module needs to be defined defined by at the rate ng module this is the main one that you need to define without this it will not work right now the next thing we learned is inside the module we can declare components we can declare components we need then we can also import other modules inside a module right so just like how we we have got it here if you see app module we imported browser module and app module so we can import any modules that we want we can import them inside a module we can also mention which component to bootstrap what we can mention which is the default which is the default or first component to load component to load in our case we are calling it app component right by default it's always apt component so this is how any module looks like now let's learn how to generate custom components so this was all about the built in component which is by default component which is apt module right in the previous episode we learned about ng CLI so let's generate a component here for us first we will write ng generate and then give the name of the module you want to generate right so using ng generate module followed by module name so we are going to give a module name and set our for our project I will also create a to-do list so I am just going to call this simple as to do right so this is a to-do module which will have everything related to to-do lists so this is where things will get interesting now beautiful let's get started let's do ng generate module module name is to do so you see now we have created a module by the name to do dot module dot TS now let's see that so we have a to do module right so here we see I told you that we declare any module with at the rate ng module and then we have declarations we have imports that we want to import now I am going to generate a component we will grow on it in the next episode where I am covering about decorators and components but for now understand that this is how you generate a module you can define the components inside it and declare them here and then you can load this entire module into your app module so right now all we have done is generated a simple module which is to do module now let's copy this and import it into our app module it is not yet imported so to make any module available you will need to import it so how do we import it just type import then followed by colon followed by the name and from and you will see to do slash to do module so any all the components or services that you have declared in the to do module will be loaded like now in the app dot module right and to include it again copy this and inside the imports will load right so this is how you import a module into another module beautiful so now we are done by creating a module and importing the module we will add some components will extend this to do module in the next coming episodes so stay tuned for that this is how you have done it now if you have any doubts during this course of this tutorial any concepts you did not understand you want me to covermore please do let me know subscribe ask in the comment section I will be happy to help you for free in the next episode we are going to talk everything about decorators that's very very important concept to understand and please don't make sure that you don't miss it out please encourage me by supporting and subscribing to my channel if you like this video give a thumbs up - thank you so much see you in the next episode

Channel: ARC Tutorials

Views: 22,351

Rating: 4.9141326 out of 5

Keywords: Angular 9 Tutorial For Beginners, Angular module tutorial, Angular modules, angular 9 tutorial for beginners, angular 9 crash course, angular 9 tutorial for beginners step by step, angular tutorial for beginners 2020, angular tutorial 2020, arc tutorial angular, angular code examples, angular for freshers, angular tutorial for experienced, angular 9 tutorials beginners, angular tutorials step by step, angular 9 tutorials, angular tutorials beginners, angular tutorials examples

Id: tgdFhjWNKTs

Length: 13min 52sec (832 seconds)

Published: Sat May 16 2020