Modules And Controllers In AngularJS

Anoop Kumar Sharma

AngularJS ControllerControllers in AngularJSModules in AngularJS

17 Comments

Join the conversation! Your thoughts help the community grow.

Delpin Susai Raj10y ago
Good one
Anil Kumar Murmu10y ago
Good one
- Anoop Kumar Sharma10y ago
  Thanks Anil Kumar Murmu..!!
Former member10y ago
Could you please put your example in which you have injected dependency into module?
- Anoop Kumar Sharma10y ago
  Gul Md Ershad, I have not added any external modules/dependencies in above example as I am trying to make this example as simple as possible. But in my upcoming Article i.e. "Routing in AngularJS", I will show you how to inject dependency into module. So please stay connected. :)
Anoop Kumar Sharma10y ago
Thanks Mohammed Ibrahim..!! :)
Anoop Kumar Sharma10y ago
Thanks Ankit Bansal :-)
Anoop Kumar Sharma10y ago
Thanks Santhakumar Munuswamy Sir..!!
Mohammed Ibrahim10y ago
nice
Ankit Bansal10y ago
Really helpful..
Santhakumar Munuswamy10y ago
Thanks for nice share
Anoop Kumar Sharma10y ago
Thanks Gowtham K..!! :-)
Anoop Kumar Sharma10y ago
Thanks Nanddeep Nachan :-)
Gowtham K10y ago
Good One, Thanks for sharing:)
Nanddeep Nachan10y ago
Nice
Anoop Kumar Sharma10y ago
Thanks Arul R..!!
Arul R10y ago
Nice share

In this article, we will see the role of Modules, Controllers, $scope in AngularJS Application. Here's the link for previous article:

Getting Started with AngularJS

Module: Module in AngularJS application is a container for controllers, directive, filters, services, etc and helps in packaging code as reusable modules.

Creating/Defining a Module

The first parameter in angular.module() function is the name of the module and the second parameter is an array in which we can add dependencies. Here, we have not added any external modules/dependencies as we are trying to make this example as simple as possible.

Controller

Controller is defined by a JavaScript constructor function. Controller controls and acts as a brain for the View in AngularJS Application. Controller is attached to the DOM using the ng-controller directive. Controllers should only contain business logic.

Adding a Controller in our angular module

In the above code, we have added a controller with our angular module (i.e. myApp) using Controller method of the module. In Controller method, the first parameter is name of the controller and second is function representing the controller.

$scope acts as a glue between application controller and the view. $scope is dynamically injected into controller's function. We have added some data to $scope properties.

Here, we have added our module and controller in View using ng-App and ng-controller directive of AngularJS.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Working with Controller</title>
<script src="Script/angular.js"></script>
<script>
// Declare a module
var myApp = angular.module('myApp', []);
//Registering a controller in myApp module
myApp.controller('myController', function ($scope) {
$scope.Name = "Anoop Kumar Sharma";
$scope.Website = "www.ittutorialswithexample.com";
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
Name:{{Name}}<br />
Website:{{Website}}
</div>
</body>
</html>

Let's save and run the application.

Preview

Let's move the entire <script> to new file i.e. controller.js and add reference of that script after the angular script.

Example2.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Working with Controller</title>
<script src="Script/angular.js"></script>
<script src="Script/controller.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
Name:{{Name}}<br />
Website:{{Website}}
</div>
</body>
</html>

Script/controller.js

// Declare a module
var myApp = angular.module('myApp', []);
//Registering a controller in myApp module
myApp.controller('myController', function ($scope) {
$scope.Name = "Anoop Kumar Sharma";
$scope.Website = "www.ittutorialswithexample.com";
});

Preview

Hope you liked it. Thanks!