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, I highly recommended reading my previous article on angularJS.

Introduction

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

ng-Module

What is Module

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

We can create a simple module using following code.

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 is control the data. I am not going to cover what are the types of function in this article but let me give some brief about constructor function. In constructor function when we call that function that function create a new object each time. Let’s make a controller.

myApp.controller(‘myController’,function($scope){

});

What is $scope

$scope is nothing but its act like glue between controller and view.

Example

<!DOCTYPE html>
<html>
	<head>
		<title>My First App In AngularJS</title>
		<script src="scripts/angular.min.js"></script>
	</head>
	<body ng-app="myModuleApp" ng-controller="myController" style="font-family:verdana;">
		<div>{{AngularMessage}}</div>
		<div style="clear:both; height:20px; width:10px;"></div>
		
	</body>
	<script>
		var  myApp = angular.module('myModuleApp',[]);
		myApp.controller('myController',function($scope){
			$scope.AngularMessage = "Angular Message";
		});
	</script>
</html>

Output:
output

Working with multiple modules

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

Method 1

<!DOCTYPE html>
<html>
	<head>
		<title>My First App In AngularJS</title>
		<script src="scripts/angular.min.js"></script>
	</head>
	<body ng-app="myModuleApp" style="font-family:verdana;">
		<div  ng-controller="myController">
			<div>{{AngularMessage}}</div>
			<div style="clear:both; height:20px; width:10px;"></div>
		</div>
		<div  ng-controller="myController1">
			<div>{{AngularMessage}}</div>
			<div style="clear:both; height:20px; width:10px;"></div>
		</div>
	</body>
	<script>
		var  myApp = angular.module('myModuleApp',['myModuleApp1']);
		myApp.controller('myController',function($scope){
			$scope.AngularMessage = "Angular Message";
		});

		var myApp1 = angular.module('myModuleApp1',[]);
		myApp1.controller('myController1',function($scope){
			$scope.AngularMessage = "Another Message";
		});

	</script>
</html>

inject-module

In above code I am injecting myModuleApp1 in myModuleApp.

Output

output

Method 2

<!DOCTYPE html>
<html >
	<head>
		<title>My First App In AngularJS</title>
		<script src="scripts/angular.min.js"></script>
	</head>
	<body ng-app="myMultipleModule" style="font-family:verdana;">
		<div  ng-controller="myController">
			<div>{{AngularMessage}}</div>
			<div style="clear:both; height:20px; width:10px;"></div>
		</div>
		<div  ng-controller="myController1">
			<div>{{AngularMessage}}</div>
			<div style="clear:both; height:20px; width:10px;"></div>
		</div>
	</body>
	<script>
		var  myApp = angular.module('myModuleApp',[]);
		myApp.controller('myController',function($scope){
			$scope.AngularMessage = "Angular Message";
		});

		var myApp1 = angular.module('myModuleApp1',[]);
		myApp1.controller('myController1',function($scope){
			$scope.AngularMessage = "Another Message";
		});
		
		angular.module('myMultipleModule',['myModuleApp','myModuleApp1'])
	</script>
</html>

Method 3

<!DOCTYPE html>
<html>
    <head>
<title>My First App In AngularJS</title>
        	<script src="scripts/angular.min.js"></script>
        
    </head>
    <body style="font-family:verdana;">
        <div id="myDiv1">
            <div ng-controller="myController">
                {{AngularMessage}}
            </div>
            <div ng-controller="myController1">
                {{AngularMessage}}
            </div>
        </div>
		<div style="clear:both; height:20px; width:10px;"></div>
        <div id="myDiv2">
            <div ng-controller="myController1">
                {{AngularMessage}}
            </div>
        </div>
		<script>
          var moduleA = angular.module("myModuleApp", []);
          moduleA.controller("myController", function($scope) {
              $scope.AngularMessage = "Angular Message";
          });

          var moduleB = angular.module("myModuleApp1", []);
          moduleB.controller("myController1", function($scope) {
              $scope.AngularMessage = "Another Message";
          });

          angular.element(document).ready(function() {
              var myDiv1 = document.getElementById("myDiv1");
              angular.bootstrap(myDiv1, ["myModuleApp", "myModuleApp1"]);

              var myDiv2 = document.getElementById("myDiv2");
              angular.bootstrap(myDiv2, ["myModuleApp1"]);
          });
        </script>
    </body>
</html>

Note: This method is not recommended because using this method we can not create the loosely coupled application.

Output
module multiple

Hope this article is helpful.

Tags: , , , , , ,