Module And Controller In AngularJS

Pramod Thakur
8y
12.3k
0
0

100

Article

scripts.zip

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

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.

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

What is $scope

$scope is nothing but it acts 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=>
<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 work with multiple modules. We can write our own custom module. Some of these are the following.

Method 1