Tech Update: Leveraging Modularity Dynamicity Using AngularJs

 In Our Thinking

Modularization and dynamicity are extremely important aspects of any web application, without which, no web app can survive in the W3 world. It’s really an exhaustive job to earn these essentials using plain JavaScript. Using a JS Framework becomes handy at this point in time. Probably this is one of the major reasons behind the rising popularity of frameworks like AngularJS, React JS.

In this blog, we will have a look at the support of AngularJs to achieve Modularity.

Modularity simply means manageability of code within the application. Modularity can be can be achieved in two ways – Logical Modularity and Physical Modularity. Let’s have a look at the Logical modularity first. In simple terms, it means separation of modules. Each module can be defined as angular.module(). Each module can also specify some other module on which it depends so that it allows you to reuse and structure your code. Every module plays a role in defining the application using ng-app directive, or it defines functionality using services, factories or directives.

Here is a definition of simple module –

Angularjs Module

The first obvious question which arises is how to split the application code. Well, there are two options here –

  • Split the code by type components (services, factories or directives etc.)
  • Split the code by functionality

AngularJS team suggests going by the second option. The idea behind this is that each divided module should behave as independent mini-app.  A sample split-up of an Email Application can be done as follows:

split-up-of-an-email-application

Now let’s jump to Physical Modularity. In AngularJS, modularizing your application physically refers to arranging JavaScript files in the application. This can be achieved by keeping organized directory structure. Here is one such sample structure for further understanding.

directory-structure

App folder, as the name suggests, contains the crux of your application. It contains components and shared sections of the app. Components are directives and services for a specific section of the app. Every folder can be further divided into separate views, controllers, and services sub-folders. Shared folder contains specific reusable code of special directives. The ‘Assets’ folder consists of all the items which are unrelated to AngularJs but are required for the application. The app.module.js file handles the setup of your app, load in AngularJS dependencies and so on. The app.route.js file handles all the routes and the route configuration.

It is always recommended to develop the modular application so as to get scalable, maintainable and easy to debug code.

Start typing and press Enter to search