Modules in AngularJS

When working on large projects, JavaScript code very quickly goes from being just one line to multiple files. Even the conventional practices that we were using so far for creating angular applications won't help. To keep things crisp we need a rather modular approach.

Modules in AngularJS help us to do that. We use modules to break the code into separate blocks based on the usability of each code block. Let us understand this by creating a sample.

Let's modify the code in this article and make it modular.

We would start it by creating a module such as shown below.



Next we would create a service.


The service that we've created above is a non-configurable service, you pass in the service name and a method that would execute when the service is called. Next we will create a controller and pass in the service in addition to $scope variable.



So, we are done with the JavaScript code, now we need to change the view a bit to keep it in sync with the modular approach. This process includes the assigning of the name of the module that the controller will use. So since the name of our module is “TechnologyModule”, the view would have this:



That's it, we are done with making the code modular. Wasn't that simple? It is indeed. Stay tuned for more on AngularJS.