Angular

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:

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs