Define AngularJS Controller with Syntax and Examples
Free Angular course with real-time projects Start Now!!
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
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-
Technology is evolving rapidly!
Stay updated with DataFlair on WhatsApp!!
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
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.
Your opinion matters
Please write your valuable feedback about DataFlair on Google
