Angular Application Architecture: Angular Application In Ngmodules

Neeraj Dana
Apr 14 · 4 min read

In this Angular tutorials, we won’t be writing any code rather we will have a higher level view of how to think of angular architecture in terms of the angular module or angular ngmodule

What is Angular

angular is a Framework Which allow us to create a simple angular app a client-side application in HTML and typescript (a language which compiles down to javascript)

Every angular Application contains at least one root angular module in it which is specific to the angular module(not javascript modules) and is decorated with NgModuledecorator and typically named as app module Now it’s not compulsory that it will have only one angular module and we will dig into it more but for now

An angular application is a set of angular modules and each angular module can be considered as a group of related things, basically modularizing an application means breaking and organizing the angular application into sensefull pieces so that we can reuse our code, manage our code and it increases the performance also with the help of lazily loaded angular modules again we will get back to it shortly,moreover angular modules consolidate angular components, angular directives, and angular pipes into cohesive blocks of functionality and this modules can be used by other angular modules in your application

ngmodules are typescript classes which are just decorated with @NgModule Decorator it has 4 things in it they are

  1. Declaration: this property tells angular that which components, pipes, and directives are part of these modules. It’s kind off we are binding our component directive to a ngmodule
  2. Providers: In this propert, we will register our services in the ngmodules which are required by our components in the modules or which can be consumed by other modules when they import this module
  3. Import: if we want to use some other module in our ngmodule we have to import that module in this property
  4. Export: in this property, we register those components, directives, and pipes which we want to make public so that other module’s component templates can use them.
@NgModule({imports: [CommonModule, SharedModule,FormsModule,  FilterPipeModule,MDBBootstrapModulesPro.forRoot(),RouterModule.forChild(routes)],exports: [RouterModule],declarations: [BlogComponent, BlogDetailComponent,BlogCReatorComponent, EvenblogComponent, OddblogComponent]})export class BlogModule {}

Suppose you have an e-commerce application where a customer can register login change password manage his account see his orders and the admin can add ducts change the price of the products add images of the products. A customer can purchase a product and pay for it

just try to imagine it and come up with how many ngmodules you can have in it I think we can have multiple ngmodules in it we can see r specific functionality in it so we can encapsulate register login change password manage account into a module and we can name it as UserModule or more specifically CustomerModule

And Similarly we can have Admin module which has specific permissions and we can group the product and shipment related stuff in it and name it something like InventoryModule

now the interesting thing suppose for orders we have one service which gives us a list of orders based on user now if we see closely this service will be used by both the modules CustomerModule (as the customer should be able to see his orders ) and InventoryModule (as admin can also see the orders and dispatch them so this order service is a very good condition to make it shared so what we will do is we will create a shared module which will be used by both other modules

NOTE: I know it can be improved upto a very good extent but this is only to grab the concept of using ngmodules

Now I hope you have a pretty good understanding of angular modules now let’s dig a bit more into it

So now the admin functionality is totally different from Customer functionality but when we make a build or run our application it does not matter which module I am on whether I am admin or customer the code behind will have the logic of both the modules

So as you can see we obviously have a performance issue the code which I am not us that is also being loaded in the browser to overcome this situation we can make our modules loaded on demand typically based on routing

so that it, for now, hope it may have helped you if it does

Originally published at


4 claps
Neeraj Dana

Written by

A Passionate developer with 6 years of hands-on experience and a man behind Smartcodehub Visit