Post
Ask Question

Module And Controller In AngularJS

Table of Content

  • Introduction
  • What is Module
  • What is Controller
  • What is $scope
  • Example
  • Working with multiple module

Before reading this article, please go through my previous article on AngularJS.

Introduction


AngularJS module is nothing but a container of all angular components like controller, services, directive, filter, config etc.

module

What is Module

Let me explain why module is required in AngularJS. In .NET console application there is a main method and what main method does is, it’s an entry point of application. It is same as angular module and is an entry point. Using module we can decide how AngularJS application should be bootstrap.

We can create a simple module using the following code.

  1. var myApp = angular.module(‘myModuleApp’,[]);  
In above code myModuleApp is module name and if this module dependent on other module we can inject in “[]”.

What is Controller

Controller is a JavaScript constructor function which controls the data. I am not going to cover what are the types of functions in this article but let me give some brief about constructor function. In constructor function when we call that function that function creates a new object each time.

Let’s make a controller.
  1. myApp.controller(‘myController’,function($scope){  
  2.   
  3. });  
What is $scope
$scope is nothing but it acts like glue between controller and view.

Example
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>My First App In AngularJS</title>  
  6.     <script src="scripts/angular.min.js"></script>  
  7. </head>  
  8.   
  9. <body ng-app="myModuleApp" ng-controller="myController" style=>  
  10.     <div>{{AngularMessage}}</div>  
  11.     <div style="clear:both; height:20px; width:10px;"></div>  
  12.   
  13. </body>  
  14. <script>  
  15.     var myApp = angular.module('myModuleApp', []);  
  16.     myApp.controller('myController', function($scope)  
  17.     {  
  18.         $scope.AngularMessage = "Angular Message";  
  19.     });  
  20. </script>  
  21.   
  22. </html>  
Output:
output
Working with multiple modules

Let’s make another module and call that module in our app. There are several methods to work with multiple modules. We can write our own custom module. Some of these are the following.

Method 1
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>My First App In AngularJS</title>  
  6.     <script src="scripts/angular.min.js"></script>  
  7. </head>  
  8.   
  9. <body ng-app="myModuleApp" style=>  
  10.     <div ng-controller="myController">  
  11.         <div>{{AngularMessage}}</div>  
  12.         <div style="clear:both; height:20px; width:10px;"></div>  
  13.     </div>  
  14.     <div ng-controller="myController1">  
  15.         <div>{{AngularMessage}}</div>  
  16.         <div style="clear:both; height:20px; width:10px;"></div>  
  17.     </div>  
  18. </body>  
  19. <script>  
  20.     var myApp = angular.module('myModuleApp', ['myModuleApp1']);  
  21.     myApp.controller('myController', function($scope)   
  22.     {  
  23.         $scope.AngularMessage = "Angular Message";  
  24.     });  
  25.   
  26.     var myApp1 = angular.module('myModuleApp1', []);  
  27.     myApp1.controller('myController1', function($scope)  
  28.     {  
  29.         $scope.AngularMessage = "Another Message";  
  30.     });  
  31. </script>  
  32.   
  33. </html>  

output
In the above code I am injecting myModuleApp1 in myModuleApp.

Output

output
Method 2
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>My First App In AngularJS</title>  
  6.     <script src="scripts/angular.min.js"></script>  
  7. </head>  
  8.   
  9. <body ng-app="myMultipleModule" style=>  
  10.     <div ng-controller="myController">  
  11.         <div>{{AngularMessage}}</div>  
  12.         <div style="clear:both; height:20px; width:10px;"></div>  
  13.     </div>  
  14.     <div ng-controller="myController1">  
  15.         <div>{{AngularMessage}}</div>  
  16.         <div style="clear:both; height:20px; width:10px;"></div>  
  17.     </div>  
  18. </body>  
  19. <script>  
  20.     var myApp = angular.module('myModuleApp', []);  
  21.     myApp.controller('myController', function($scope)  
  22.     {  
  23.         $scope.AngularMessage = "Angular Message";  
  24.     });  
  25.   
  26.     var myApp1 = angular.module('myModuleApp1', []);  
  27.     myApp1.controller('myController1', function($scope)  
  28.     {  
  29.         $scope.AngularMessage = "Another Message";  
  30.     });  
  31.   
  32.     angular.module('myMultipleModule', ['myModuleApp', 'myModuleApp1'])  
  33. </script>  
  34.   
  35. </html>  
Method 3:
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>My First App In AngularJS</title>  
  6.     <script src="scripts/angular.min.js"></script>  
  7.   
  8. </head>  
  9.   
  10. <body style=>  
  11.     <div id="myDiv1">  
  12.         <div ng-controller="myController">  
  13.             {{AngularMessage}}  
  14.         </div>  
  15.         <div ng-controller="myController1">  
  16.             {{AngularMessage}}  
  17.         </div>  
  18.     </div>  
  19.     <div style="clear:both; height:20px; width:10px;"></div>  
  20.     <div id="myDiv2">  
  21.         <div ng-controller="myController1">  
  22.             {{AngularMessage}}  
  23.         </div>  
  24.     </div>  
  25.     <script>  
  26.         var moduleA = angular.module("myModuleApp", []);  
  27.         moduleA.controller("myController", function($scope)   
  28.         {  
  29.             $scope.AngularMessage = "Angular Message";  
  30.         });  
  31.   
  32.         var moduleB = angular.module("myModuleApp1", []);  
  33.         moduleB.controller("myController1", function($scope)  
  34.          {  
  35.             $scope.AngularMessage = "Another Message";  
  36.         });  
  37.   
  38.         angular.element(document).ready(function()  
  39.          {  
  40.             var myDiv1 = document.getElementById("myDiv1");  
  41.             angular.bootstrap(myDiv1, ["myModuleApp", "myModuleApp1"]);  
  42.   
  43.             var myDiv2 = document.getElementById("myDiv2");  
  44.             angular.bootstrap(myDiv2, ["myModuleApp1"]);  
  45.         });  
  46.     </script>  
  47. </body>  
  48.   
  49. </html>  
Note: This method is not recommended  because using this method we can not create the loosely coupled application.
 
Output:

output
Hope this article was helpful.

Read more articles on AngularJS:


Similar Articles