Angularjs Module Tutorial With Example

In all of our earlier tutorials, you would have noticed the ng-app directive used to define your main Angular application. This is one of the key concepts of modules in Angular.JS. In this tutorial, you will learn-

How to Create a module in AngularJS

Modules and Controllers

How to Create a module in AngularJS

Before we start off with what is a module, let’s look at an example of an AngularJS application without a module and then understand the need of having modules in your application. Let’s consider creating a file called “DemoController.js” and adding the below code to the file In the above code, we have created a function called “DemoController” which is going to act as a controller within our application. In this controller, we are just performing the addition of 2 variables a and b and assigning the addition of these variables to a new variable, c, and assigning it back to the scope object. Now let’s create our main Sample.html, which will be our main application. Let’s insert the below code snippet in our HTML page. In the code above, we are including our DemoController and then invoking the value of the $scope.c variable via an expression. But notice our ng-app directive, it has a blank value.

This basically means that all controllers which are called within the context of the ng-app directive can be accessed globally. There is no boundary which separates multiple controllers from each other. Now in modern day programming, this is a bad practice to have controllers not attached to any modules and making them globally accessible. There has to be some logical boundary defined for controllers.

And this is where modules come in. Modules are used to create that separation of boundaries and assist in separating controllers based on functionality. Let’s change the code above to implement modules and attach our controller to this module Let’s note the key differences in the code written above

var sampleApp = angular.module(‘sampleApp’,[]); We are specifically creating an AngularJS module called ‘sampleApp’. This will form a logical boundary for the functionality that this module will contain. So in our above example, we have a module which contains a controller that performs the role of the addition of 2 scope objects. Hence, we can have one module with a logical boundary which says that this module will only perform the functionality of mathematical calculations for the application.

sampleApp.controller(‘DemoController’, function($scope) We are now attaching the controller to our AngularJS module “SampleApp”. This means that if we don’t reference the module ‘sampleApp’ in our main HTML code, we will not be able to reference the functionality of our controller.

Our main HTML code will not look as shown below Let’s note the key differences in the code written above and our previous code In our body tag,

Instead of having an empty ng-app directive, we are now calling the module sampleApp. By calling this application module, we can now access the controller ‘DemoController’ and the functionality present in the demo controller.

Modules and Controllers

In Angular.JS, the pattern used for developing modern day web applications is of creating multiple modules and controllers to logically separate multiple levels of functionality. Normally modules will be stored in separate Javascript files, which would be different from the main application file. Let’s look at an example of how this can be achieved. In the example below,

We will create a file called Utilities.js which will hold 2 modules, one for performing the functionality of addition and the other for performing the functionality of subtraction. We are then going to create 2 separate application files and access the Utility file from each application file. In one application file we will access the module for addition and in the other, we will access the module for subtraction.

Step 1) Define the code for the multiple modules and controllers. Let’s note the key points in the code written above

var AdditionApp = angular.module(‘AdditionApp’,[]); var SubractionApp = angular.module(‘SubtractionApp’,[]); There is 2 separate Angular Module created, one which is given the name ‘AdditionApp’ and the second one is given the name ‘SubtractionApp’.

AdditionApp.controller(‘DemoAddController’, function($scope) SubractionApp.controller(‘DemoSubtractController’, function($scope) There are 2 separate controllers defined for each module, one is called the DemoAddController and the other is the DemoSubtractController. Each controller has separate logic for addition and subtraction of numbers.

Step 2) Create your main application files. Let’s create a file called ApplicationAddition.html and add the below code Let’s note the key points in the code written above

We are referencing our Utilities.js file in our main application file. This allows us to reference any AngularJS modules defined in this file.