Learn NgModule in Angular with Examples

Key Takeaways

in this episode we're going to talk about ng module and how to properly use it to organize an angular application so what's the purpose of an ng module in the first place the answer is it helps organize the complex relationship between views such as components and directives to data providers such as services and guards it works by allowing you to define all these relationships in the Swingle file as opposed to doing it individually and every component service as was the case in early days of angular 2 now let's look inside an NG module and see what these metadata terms actually mean first we have declarations which is where you would put any component directive or pipe and then it'll be privately available to that module if you want it to be publicly available to other modules then you'll need to add it to the export section this concept is similar to public and private functions and object-oriented programming components will be private by default and become public if you add them to exports other modules gain access to exported components by importing that module in their own metadata so just to recap declarations imports and exports define the relationship between components and how they're shared between different ng modules next we have the bootstrap property which defines a component that's used to initially load your application by default this will usually be the app component which is created automatically by the angular CLI the final property you should be aware of is providers this is where you register data providers such as Services and guards that can be injected into components within this module the injectable class will be available to any component in this module as well as any module that imports it now let's look at some practical ways we can use energy module to organize an application in this example we have all of our components and services in the group app module that was created by default as our app grows larger this file is going to be more and more cluttered and more and more hard to maintain our goal is to refactor most of our components and services to their own modules with the exception of the app component which we still want to bootstrap from the root module overall this will keep the logic in our app much more organized now let's take a look at the routing module that was created by default by the angular CLI a routing module should have no declarations it may have providers in the form of guards and it should always export the router module we can add our contact list component to the router and it will load that component imperative way when the route is activated which in this case is just route URL depending on the complexity of your app you may use multiple routing modules for better organization as well as lazy loading now let's build a feature module to organize everything related to contacts in our app feature modules will consist mostly of declarations and possibly a provider but they should never export anything their primary purpose is to organize business logic related to a specific feature we generate the module with the angular CLI and copy everything related to contacts over to it notice we're also importing the common module that gives us access to angular's most common features such as NGS and 10g for now we can go back to the route and delete everything related to contacts then import the contact module and add it to the imports in the route if we had 20 different components related to contacts you can see how this would greatly improve the clutter and the file now let's look at a shared module also called widget modules they're almost identical to future modules except that they add all their declarations to the exports as well so they can be distributed to other module common use cases include social media icons Oh Dean spinners and other UI elements similar to those let's generate the module from the CLI then add the social icons component to both the declarations and the exports from there we can go ahead and import it in both the root module as well as the feature module we created in the previous step now the social icons component will be available everywhere in the app the last type we'll look at is a core or service module it has no declarations and only focuses on services for dependency injection common providers to include here would be an off service or a toast message service anything that provides data globally throughout the app in this example we're extracting our off service into the core module we generate it with the CLI and copy over the auth service to a new home we can also remove the common module since we're all made dealing with services here back in the root we can go ahead and import the core module and add it to the imports with the others if we look over our app launch well now we can see it's a lot more organized we just have the one declaration no providers the one bootstrap component and just a handful of modules to manage that covers the main patterns you'll see with ng module and angular applications in an upcoming video I'll show you how to use the router along with ng modules to lazy load component that's it for this episode if you found the video helpful please like and subscribe and if you want to support the channel consider becoming a pro subscriber at angular firebase comm for just a few bucks a month you'll get access to your exclusive content as well as free one on one project consulting thanks for watching and I'll see you next time [Music] you