SAP

Must Learn!

Big Data

Web

Modules are one of the most important concepts of Angular JS.

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.

Overall modules in Angular have 2 roles to play;

  1. The first is to define the application functionality that is applied to the entire HTML page using the ng-app directive.
  2. The second use of a module is to define functionality, such as services, directives, and filters, in a way that makes it easy to reuse it in different applications.

In the duration of this tutorial, we will look at modules in detail and how they affect the working of Controllers.

In this tutorial, you will learn-

What is a AngularJS module

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

Function Democontroller($scope) {
                                    $scope.a=1;
                                    $scope.b=2;
                                    $scope.c=$scope.b + $scope.a;
                            });

In the above code, we are 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.

<body ng-app="">
      <div ng-controller="DemoController">
      <h3> Guru99 Global Event</h3>
      {{c}}

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 logically 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

var sampleApp = angular.module('sampleApp',[]);
sampleApp.controller('DemoController', function($scope) {
                                    $scope.a=1;
                                    $scope.b=2;
                                    $scope.c=$scope.b + $scope.a;
                         });

Let's note the key differences in the code written above

  1. var sampleApp = angular.module('sampleApp',[]);

    We are specifically creating a 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.

  2. 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

<body ng-app="'sampleApp'">
                           <div ng-controller="DemoController">
                           <h3> Guru99 Global Event</h3>
                		   {{c}}

Let's note the key differences in the code written above and our previous code

<body ng-app="'sampleApp'">

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 Java script 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.html 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 Utilities 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.

Step1) Define the code for the multiple modules and controllers.

var AdditionApp = angular.module('AdditionApp',[]);
AdditionApp.controller('DemoAddController', function($scope) {
       $scope.a=5;
       $scope.b=6;
       $scope.c=$scope.a + $scope.b;
});
var SubractionApp = angular.module('SubtractionApp',[]);
SubractionApp.controller('DemoSubtractController', function($scope) {
       $scope.a=8;
       $scope.b=6;
       $scope.d=$scope.a - $scope.b;
});

Let's note the key points in the code written above

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

  2. 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.

Step2) Create your main application files. Let's create a file called ApplicationAddition.html and add the below code

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Addition</title>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script src="//cdn.guru99.com/lib/Utilities.js"></script>
</head>
<body>
<div ng-app = "AdditionApp" ng-controller="DemoAddController">
    {{c}}
</div>
</script>
</body>
</html>

Let's note the key points in the code written above

  1. <script src="//cdn.guru99.com/lib/Utilities.js"></script>

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

  2. <div ng-app = "AdditionApp" ng-controller="DemoAddController">

    We are accessing the 'AdditionApp' module and DemoAddController by using the ng-app directive and the ng-controller respectively.

  3. {{c}}

    Since we are referencing the above mentioned module and controller we are able to reference the $scope.c variable via an expression. The expression will be the result of the addition of the 2 scope variables a and b which was carried out in the 'DemoAddController' Controller

    The same way we will do for subtraction function.

Step3) Create your main application files. Let's create a file called "ApplicationSubtraction.html" and add the below code

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Subtraction</title>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//cdn.guru99.com/lib/Utilities.js"></script>
</head>
<body>
<div ng-app = "SubtractionApp" ng-controller="DemoSubtractController">
    {{d}}
</div>
</script>
</body>
</html>

Let's note the key points in the code written above

  1. <script src="//cdn.guru99.com/lib/Utilities.js"></script>

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

  2. <div ng-app = " SubtractionApp " ng-controller=" DemoSubtractController ">

    We are accessing the 'SubtractionApp module and DemoSubtractController by using the ng-app directive and the ng-controller respectively.

  3. {{d}}

    Since we are referencing the above mentioned module and controller we are able to reference the $scope.d variable via an expression. The expression will be the result of the subtraction of the 2 scope variables a and b which was carried out in the 'DemoSubtractController' Controller

Summary

  • Without the use of AngularJS modules, controllers start having a global scope which leads to bad programming practices.
  • Modules are used to separate business logic. Multiple modules can be created to have logic separated within these different modules.
  • Each AngularJS module can have its own set of controllers defined and assigned to it.
  • When defining modules and controllers, they are normally defined in separate JavaScript files. These JavaScript files are then referenced in the main application file.