Angular Tutorials - Angular Application Architecture

Angular Jun 13, 2019

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


A Very High-Level View of angular


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

NGModules in detail


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 property, 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.

Thinking of application in ngmodules


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

SharedModule


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 up to a very good extent but this is only to
grab the concept of using ngmodules

Lazy Loaded Module


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



Neeraj Dana

Experienced Software Engineer with a demonstrated history of working in the information technology and services industry. Skilled in Angular, React, React-Native, Vue js, Machine Learning