What is Module in AngularJS

AngularJS is one of the most popular JavaScript MVC framework now in the field of web application development. It is used mostly to develop Single Page Application (SPA). Understanding Module in AngularJS is very important to develop your application efficiently, Most importantly when you need to write modular code.


What is Module in AngularJS?
The official definition from Angularjs.org is "a container for the different parts of your app – controllers, services, filters, directives, etc".
So, What I say about the definition of Module is that- your whole application in angularjs is a module. You can finish your project with a single module or you can also write multiple sub-module to a core module and finish your app more efficiently.

Your module will hold all of your controllers, services, factories, filter, directives, providers, etc. If you have multiple sub-modules, you can also write multiple controllers, services, factories, filter, directives, providers, and assign to those sub-modules. So your app will look like a module tree with its various parts.

If we mention the angular app with its module tree it will look like the following:

angular.module()
       .controller()
       .config()
       .service()
       .filter()
       .factory()
       .directive()
       .constant()
       .value();

Here, you are defining your app in the module first, then adding more things to the module as method chaining. The following example can help you to understand more elaborately.

angular.module('app',[])
       .controller('helloController',function(){})
       .config(function($routeProvider){})
       .service('helloService', function(){})
       .filter('safeMode',function(){})
       .factory('helloFactoryService', function(){})
       .directive('helloWorld', function(){})
       .constant('categoryName', 'apple Banana')
       .value('userId', '123456');

From the above example, we can understand how the various parts of the angular application are inserted into the module. If you have more modules you can insert them into the main module too by the following way.

angular.module('app',['app.one','app.two','app.three','app.four','app.five']);

When you define the other module into the main module it will work together. So, you can write more modular app as you need to maintain scalability in your project.