Tech Update: Leveraging Modularity Dynamicity Using AngularJs
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 –
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:
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.