Today, we will be covering the following topics to help you gain a solid understanding of Angular controllers.
Check out Full Stack Web Development Course video to learn more about its concepts:
Controllers in Angular
Applications in AngularJS are controlled by controllers. They control the data of the application. These are the JavaScript Objects that hold attributes and functions. It is defined by ng-controller. It uses $scope as a parameter. $scope objects communicate with the view and expose the model to the view.
Syntax
<div ng-app = "" ng-controller = "controller_name">
//code
</div>
Example
<html>
<head>
<title>AngularJS Controller</title>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<h2>Example of AngularJS Controllers </h2>
<div ng-app="details" ng-controller="employeecontroller">
Id: <input type="text" ng-model="id"><br><br>
Name: <input type="text" ng-model="name"><br>
<br>
Details of Employee: {{id + " " + name}}
</div>
<script>
var e = angular.module('details', []);
e.controller('employeecontroller', function($scope) {
$scope.id = 20;
$scope.name = "abc";
});
</script>
</body>
</html>
Output
How to define a controller in Angular?
There are two ways in which a controller can be defined in an AngularJS application. One is by defining it as an application module and the second way is by defining it as a JavaScript function.
An Application Module
A controller can be defined 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 = "Intellipaat";
});
</script>
</body>
</html>
Output:
Application.controller
My name (app.controller): Intellipaat
JavaScript Function
AngularJS controller can also be defined 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 = "Intellipaat";
}
</script>
</body>
</html>
Output:
Controller As Function
My Name (controller as function): Intellipaat
Purpose of AngularJS Controller
The AngularJS Controller has two purposes. It sets the initial value of $scope object and attaches the behavior to it. The primary responsibility of an AngularJS Controller is to control the data that gets passed to the view. There is two-way communication between the scope and the view .
Get 100% Hike!
Master Most in Demand Skills Now!
AngularJS Controller in External Files
The AngularJS Controller can be stored in external files in case of a larger application. An external file needs to be created and saved with the extension, .js.
For example, file_name.js can be the external file that you can create. Its path can be provided with the help of the 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>
The code below should be saved 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 text is inputted in the textbox (in this case, Intellipaat), the output will show as:
Enter Name: Intellipaat
Tutorial Name: Intellipaat
Restrictions on Controller in AngularJS
Following are the scenarios where a controller can’t be used:
- Sharing code or state across
- Filtering output – Instead, there are various built-in filters by AngularJS as well as custom filters.
- Manipulating DOM (Document Object Model) – Data binding or directives exist for this purpose.
- Formatting input – Angular form controls are there for formatting purposes.
Conclusion
AngularJS Controller should be kept as short and simple as possible as it contains business logic only. If presentation logic is included with business logic in AngularJS Controller, its testability gets affected. In conclusion, the Angular Controller’s functionality is provided in the module container. It can contain attributes or properties and functions. AngularJS controller is invoked using $scope object.