Define AngularJS Controller with Syntax and Examples

AngularJS Controller is a heart of Angular application. What controls the data in angular? How it controls? Explore this AngularJS Controller tutorial, to know the answers of all these queries. Here, we will learn how to define a controller with the example. Along with this, we will see the purpose and limitations of the controller in AngularJS.

So, are you ready to explore AngualrJS Controller?

Define AngularJS Controller with Syntax and Examples

Define AngularJS Controller with Syntax and Examples

1. What is AngularJS Controller?

AngularJS controller controls the flow of data from the model part to the view part. Data is taken from the view part as an input by the controller, then it processes the data and sends back to the view part (HTML part) that is being displayed to the user. It consists of the core business logic. It is defined in an angular application using a directive known as ng-controller.

2. How to Define Controller in AngularJS?

There are two ways to define a controller in an AngularJS application.

  • Define as an application module
  • Define as an JavaScript function

i. An application Module

A controller define as an application module.

Syntax – 

angular.module("myapp", []) 
.controller("appController", function($scope) { 
// definition of controller 
} );

Example – 

<!DOCTYPE html> 
<html> 
<head> 
<title>Understanding Controllers In AngularJS</title> 
<script src="angular.js"></script> 
</head> 

<body ng-app="myapp"> 
<div> Application.controller</div> 
<div ng-controller="appController"> 
<div> My Name (app.contrller): {{myName}} </div> 
</div> 
<br/> 
<script> 
angular.module("myapp", []) 
.controller("appController", function($scope)
{ 
$scope.myName = "DataFlair"; 
}); 
</script> 
</body> 
</html>

Output-

Application.controller

My name (app.controller): DataFlair

Do you know why AngularJS is used?

ii. JavaScript Function

AngularJS controller defines as a Javascript function.

Syntax-

function controllerAsFunction($scope){ 
//definition of controller 
}

Example –

<!DOCTYPE html> 
<html> 
<head> 
<title>Understanding Controllers and Services In AngularJS</title> 
<script src="angular.js"></script> 
</head> 
<body ng-app="myapp"> 
<div> Controller as function</div> 
<div ng-controller="Controller As Function"> 
<div> My Name (controller as function): {{myName}} </div> 
</div> 
<script> 
function controllerAsFunction($scope) { 
$scope.myName = "DataFlair"; 
} 
</script> 
</body> 
</html>

Output-

Controller As Function

Join DataFlair on Telegram

My name (controller as function): DataFlair

3. Purpose of AngularJS Controller

There are two purposes of the controller:

  • The initial value of $scope object is set by using a controller.
  • Behaviour is attached to $scope object using a controller.

Do you know How MVC Works in AngularJS?

4. AngularJS Controller in External Files

For a larger application, it is possible that we can store controller in external files.

You have to create an external file and save this file with extension .js. For example- name_of_file.js and you can provide its path by using source attribute in a script tag.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
Enter Name: <input type="text" ng-model="fName"><br>
<br>
Tutorial Name: {{fullName()}}
</div>
<script src= “infocontroller.js”>
</script>
</body>
</html>

Save the below-written code as infocontroller.js

var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.fullName = function() {
return $scope.fName;
};
});

Output –

Enter Name:

Tutorial Name:

When we write text in textbox output will be

Enter Name: DataFlair

Tutorial Name: DataFlair

5. Restrictions on Controller in AngularJS

Look at the scenarios where we can’t use a controller:

  • We cannot use a controller to share code or state across.
  • We cannot use AngualrJS controller to filter output. For this purpose there are various built-in filters are provided by AngularJS such as uppercase, lowercase and many more. Also one can create custom filters too.
  • DOM (Document object model) can’t manipulate by a controller. For this purpose, data binding or directives are theirs.
  • We can’t use the controller to format input. For that angular form, controls are there.

Basically, we should keep AngularJS controller short and simple as possible. This is because a controller contains business logic only. When we can include presentation logic with business logic in a controller, its testability gets effects.

The easiest and efficient alternative for these services encapsulate all those works that do not deal with business logic (or that does not belong to a controller) into services. We can use these services by dependency injection in a controller.

6. Conclusion

Therefore, we can conclude that the controller is functionality provided in the module container. Business logic is written inside a controller. It can contain attributes or properties and functions. Using $scope object AngularJS controller is invoked. Hope, you liked our explanation. If you have any query, feel free to ask in the comment tab.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.